From ad72dfb07947bb8d290a322ce663ce233c935452 Mon Sep 17 00:00:00 2001
From: Robert Romero Medina <enanow41romero@gmail.com>
Date: Sun, 4 Oct 2020 13:26:58 -0400
Subject: [PATCH] Nominate button does not work #101

---
 src/assets/style/custom.scss    |  24 ++++++
 src/components/FormNominate.vue | 110 +++++++++++++++++++++++++
 src/views/Nominate.vue          | 138 +++++++++++++++++++-------------
 3 files changed, 218 insertions(+), 54 deletions(-)
 create mode 100644 src/components/FormNominate.vue

diff --git a/src/assets/style/custom.scss b/src/assets/style/custom.scss
index 4d8b214..13f172a 100644
--- a/src/assets/style/custom.scss
+++ b/src/assets/style/custom.scss
@@ -30,3 +30,27 @@ body {
         background: #23272b;
     }
 }
+
+.btn {
+    &.secundary {
+        width: 200px;
+        height: 50px;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        color: #fff;
+        background: #1ac790;
+        border-radius: 6px;
+        font-family: "Poppins";
+        font-size: 1.3rem;
+    }
+
+    &.secundary:hover {
+        background: #23272b;
+    }
+
+    &.block {
+        width: 100%;
+        height: 50px;
+    }
+}
\ No newline at end of file
diff --git a/src/components/FormNominate.vue b/src/components/FormNominate.vue
new file mode 100644
index 0000000..137b35c
--- /dev/null
+++ b/src/components/FormNominate.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="campos mt-3 pt-4 w-100 text-left" id="nominate">
+    <div class="row flex-wrap">
+      <div class="col-lg-6 col-md-12 my-2">
+        <label class="text-white">User Name *</label>
+        <input
+          type="text"
+          class="form-control"
+          placeholder="@example02"
+          v-model="form.nameUser"
+        />
+      </div>
+      <div class="col-lg-6 col-md-12 my-2">
+        <label class="text-white">Url of your Github profile *</label>
+        <input
+          type="text"
+          class="form-control"
+          placeholder="https://github.com/example02"
+          v-model="form.urlGithub"
+        />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-lg-6 col-md-12 my-2">
+        <label class="text-white">Url of your Twitter profile</label>
+        <input
+          type="text"
+          class="form-control"
+          placeholder="https://twitter.com/example02"
+          v-model="form.urlTwitter"
+        />
+      </div>
+      <div class="col-lg-6 col-md-12 my-2">
+        <label class="text-white">Url of your Linkedin profile </label>
+        <input
+          type="text"
+          class="form-control"
+          placeholder="https://www.linkedin.com/in/emxaple02"
+          v-model="form.urlLinkedin"
+        />
+      </div>
+    </div>
+    <div class="row mt-2">
+      <div class="col">
+        <label class="text-white">Make a brief description</label>
+      </div>
+      <div class="col-12">
+        <textarea class="form-control" v-model="form.descripcion"></textarea>
+      </div>
+      <div class="col-12 text-center mt-3" v-if="errorForm === true">
+        <small class="d-block text-danger"> Fill in all the fields * </small>
+      </div>
+      <div class="col-12 mt-3">
+        <a
+          href="#nominate"
+          rel="noreferrer"
+          class="btn secundary block"
+          @click="sendNominate"
+        >
+          Send
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "NominateForm",
+  data() {
+    return {
+      form: {
+        nameUser: "",
+        urlGithub: "",
+        urlTwitter: "",
+        urlLinkedin: "",
+        descripcion: "",
+      },
+      errorForm: false,
+    };
+  },
+  methods: {
+    sendNominate() {
+      if (
+        this.form.nameUser === "" ||
+        this.form.urlGithub === "" ||
+        this.form.urlTwitter === "" ||
+        this.form.urlLinkedin === "" ||
+        this.form.descripcion === ""
+      ) {
+        this.errorForm = true;
+        return;
+      }
+      this.errorForm = false;
+    },
+  },
+};
+</script>
+<style>
+.campos {
+  width: 100%;
+  transition: ease-in-out 0.9s;
+  font-family: Poppins, Source Sans Pro, sans-serif;
+  font-weight: bold;
+}
+.campos input,
+textarea {
+  font-weight: normal;
+  font-size: 14px;
+}
+</style>>
\ No newline at end of file
diff --git a/src/views/Nominate.vue b/src/views/Nominate.vue
index 56024d0..0ac32cb 100644
--- a/src/views/Nominate.vue
+++ b/src/views/Nominate.vue
@@ -1,59 +1,89 @@
 <template>
-    <div class="nominate">
-        <div class="nominate__section">
-            <div class="nominate__content-wrapper">
-                <h1 class="nominate__title">
-                    Nominate a <span class="nominate__highlight">developer</span>
-                </h1>
-                <p class="nominate__body-text">
-                    Help us build the directory of Developers thriving in the field of programming.
-                    If you know someone who deserves to be on the list, nominate them by clicking the Nominate button and filling the form.
-                    And hey, it's alright to nominate yourself. 😎
-                </p>
-                <a href="#" rel="noreferrer" class="btn primary">Nominate</a>
-            </div>
-        </div>
+  <div class="nominate">
+    <div class="nominate__section">
+      <div class="nominate__content-wrapper">
+        <h1 class="nominate__title">
+          Nominate a <span class="nominate__highlight">developer</span>
+        </h1>
+        <p class="nominate__body-text">
+          Help us build the directory of Developers thriving in the field of
+          programming. If you know someone who deserves to be on the list,
+          nominate them by clicking the Nominate button and filling the form.
+          And hey, it's alright to nominate yourself. 😎
+        </p>
+
+        <a href="#nominate" rel="noreferrer" class="btn primary" @click="onNominar">
+        Nominate</a>
+
+        <template v-if="openNominar">
+            <NominateForm />
+        </template>
+
+      </div>
     </div>
+  </div>
 </template>
+<script>
 
-<style lang="scss" scoped>
-    .nominate {
-        margin-top: 33px;
-
-        &__section {
-            display: flex;
-            flex: 1 1 auto;
-            flex-direction: column;
-            justify-content: flex-start;
-            align-items: center;
-            padding: 5rem;
-        }
-
-        &__content-wrapper {
-            display: flex;
-            flex-direction: column;
-            max-width: 720px;
-            align-items: baseline;
-        }
-
-        &__title {
-            font-size: 3.0rem;
-            margin: 5.0rem 0 2.0rem;
-            font-family: Poppins, Source Sans Pro, sans-serif;
-            font-weight: bold;
-            color: #fff;
-        }
-
-        &__body-text {
-            font-size: 0.97rem;
-            font-family: Poppins, Source Sans Pro, sans-serif;
-            text-align: justify;
-            margin: 0;
-            color: #fff;
-        }
-
-        &__highlight {
-            color: #909090;
-        }
+import NominateForm from '@/components/FormNominate.vue'
+
+export default {
+  name: "Nominate",
+  components: {
+      NominateForm
+  },
+  data() {
+    return {
+      openNominar: false,
+
+    };
+  },
+  methods: {
+    onNominar() {
+      this.openNominar = !this.openNominar;
     }
-</style>
+  },
+};
+</script>>
+<style lang="scss" scoped>
+.nominate {
+  margin-top: 33px;
+
+  &__section {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 5rem;
+  }
+
+  &__content-wrapper {
+    display: flex;
+    flex-direction: column;
+    max-width: 720px;
+    align-items: baseline;
+  }
+
+  &__title {
+    font-size: 3rem;
+    margin: 5rem 0 2rem;
+    font-family: Poppins, Source Sans Pro, sans-serif;
+    font-weight: bold;
+    color: #fff;
+  }
+
+  &__body-text {
+    font-size: 0.97rem;
+    font-family: Poppins, Source Sans Pro, sans-serif;
+    text-align: justify;
+    margin: 0;
+    color: #fff;
+  }
+
+  &__highlight {
+    color: #909090;
+  }
+}
+
+</style>
\ No newline at end of file