add animation, form validation, final step and test javascript

css/style.less

@@ -1,7 +1,7 @@
 @color-1: #047E7C;
 @color-2: #0C6D74;
 @color-3: #0C6D74;
-@color-bg: #F1F2E3;
+@color-white: #F1F2E3;
 @color-grey: #787970;
 
 /* ======== MIXINS ======== */
@@ -19,17 +19,31 @@
   box-shadow: inset 0px 8px 6px -5px rgba(0, 0, 0, 0.5);
 }
 
+/* ======== ANIMATIONS ======== */
+
+@keyframes rotate-step-number {
+  0% {
+    transform: rotate3d(0,0,0,0deg);
+  }
+  50% {
+    transform: rotate3d(45, 45, 1, 90deg);
+  }
+  100% {
+    transform: rotate3d(0,0,0,0deg);
+  }
+}
+
 /* ======== ======== */
 
 body {
   cursor: default;
-  background-color: @color-bg;
+  background-color: @color-white;
   font-family: "Source Sans Pro", sans;
   font-weight: 300;
 }
 
 header {
-  background-color: @color-bg;
+  background-color: @color-white;
   padding: 1rem;
 
   h1 {
@@ -41,7 +55,7 @@ header {
 }
 
 #steps {
-  color: @color-bg;
+  color: @color-white;
   .step-heading {
     .top-bottom-shadow;
 
@@ -53,17 +67,19 @@ header {
         display: inline-block;
         margin: 0 0.5em;
         text-align: center;
+        font-weight: 400;
 
         width: 40px;
         height: 40px;
 
         border: 0px;
         border-radius: 50%;
+
+        transition: background-color 0.5s, transform 0.5s;
       }
 
       .step-number:not(.done) {
-        font-weight: 400;
+        background-color: @color-white;
-        background-color: @color-bg;
         color: black;
         .number {
           display: inline;
@@ -74,8 +90,11 @@ header {
       }
 
       .step-number.done {
+        &:not(.final) { // prevents animation to be shown at final step
+          animation: rotate-step-number 0.5s;
+        }
         background-color: #8ECA63; // green
-        color: @color-bg;
+        color: @color-white;
         .number {
           display: none;
         }
@@ -105,6 +124,12 @@ header {
           color: rgba(255, 255, 255, 0.5);
           opacity: 1;
         }
+        // show numbers without spin box
+        -moz-appearance:textfield;
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+        }
       }
     }
 
@@ -113,7 +138,11 @@ header {
       height: 96px;
       padding-top: 2em;
 
-      a {
+      button {
+        /* unstyle button */
+        background-color: transparent;
+        color: @color-white;
+        border: none;
         span {
           display: block;
           font-size: 24px;
@@ -151,7 +180,7 @@ header {
 
 footer {
   .top-bottom-shadow;
-  background-color: @color-bg;
+  background-color: @color-white;
   padding: 2em 30vw;
   text-align: center;
   a {
@@ -159,3 +188,20 @@ footer {
     border-bottom: dotted 1px rgba(0,0,0,0.25);
   }
 }
+
+/* ======== FINAL STEP ======== */
+
+.step.final {
+  pre.address {
+    font-family: inherit;
+    font-size: inherit;
+    color: @color-white;
+  }
+  .download-wrapper {
+    text-align: center;
+  }
+  a {
+    color: @color-white;
+    border-bottom: dotted 1px rgba(0,0,0,0.25);
+  }
+}

index.html

@@ -39,32 +39,32 @@
         <form>
           <div class="row">
             <div class="col col-12 col-md-6">
-              <input type="text" name="givenname" placeholder="Vorname">
+              <input type="text" name="givenname" placeholder="Vorname" required>
             </div>
             <div class="col col-12 col-md-6">
-              <input type="text" name="surname" placeholder="Nachname">
+              <input type="text" name="surname" placeholder="Nachname" required>
             </div>
           </div>
           <div class="row">
             <div class="col col-12">
-              <input type="text" name="address" placeholder="Adresse">
+              <input type="text" name="address" placeholder="Adresse" required>
             </div>
           </div>
           <div class="row">
             <div class="col col-12 col-md-4">
-              <input type="text" name="zip" placeholder="Postleitzahl">
+              <input type="number" min="10000" max="99999" name="zip" placeholder="Postleitzahl" required>
             </div>
             <div class="col col-12 col-md-8">
-              <input type="text" name="place" placeholder="Ort">
+              <input type="text" name="place" placeholder="Ort" required>
             </div>
           </div>
-        </form>
           <div class="next-wrapper">
-          <a data-toggle="collapse" data-target="#step-2" aria-expanded="false" aria-controls="step-2">
+            <button type="submit">
               <span>Weiter</span>
               <i class="material-icons">keyboard_arrow_down</i>
-          </a>
+            </button>
           </div>
+        </form>
       </div>
 
       <!--
@@ -77,45 +77,29 @@
 
       <div class="step-heading" id="step-2-heading">
         <h2>
-          <div class="step-number">
+          <div class="step-number final done">
-            <span class="number">2</span>
             <span class="check">✓</span>
           </div>
           <a data-toggle="collapse" data-target="#step-2" aria-expanded="true" aria-controls="step-2">
-            Persönliche Daten
+            Fertig
           </a>
         </h2>
       </div>
 
-      <div id="step-2" class="step collapse" aria-labelledby="step-2-heading" data-parent="#steps">
+      <div id="step-2" class="step final collapse" aria-labelledby="step-2-heading" data-parent="#steps">
-        <form>
+        <p>
-          <div class="row">
+          Sie haben erfolgreich Ihren Mitgliedsantrag ausgefüllt und können
-            <div class="col col-12 col-md-6">
+          diesen jetzt herunterladen und dann entweder per E-Mail an
-              <input type="text" name="givenname" placeholder="Vorname">
+          <a href="mailto:membership@fablab-nea.de">membership@fablab-nea.de
-            </div>
+          </a> schicken oder ausdrucken und per Post schicken:
-            <div class="col col-12 col-md-6">
+        </p>
-              <input type="text" name="surname" placeholder="Nachname">
+        <p>
-            </div>
+        <pre class="address">
-          </div>
+FabLab Bad Windsheim
-          <div class="row">
+Spitalwall 16
-            <div class="col col-12">
+91435 Bad Windsheim</pre>
-              <input type="text" name="address" placeholder="Adresse">
+        <div class="download-wrapper">
-            </div>
+          <button type="button" onclick="gen()" class="btn btn-success">Mitgliedsantrag herunterladen</button>
-          </div>
-          <div class="row">
-            <div class="col col-12 col-md-4">
-              <input type="text" name="zip" placeholder="Postleitzahl">
-            </div>
-            <div class="col col-12 col-md-8">
-              <input type="text" name="place" placeholder="Ort">
-            </div>
-          </div>
-        </form>
-        <div class="next-wrapper">
-          <a data-toggle="collapse" data-target="#step-3" aria-expanded="false" aria-controls="step-3">
-            <span>Weiter</span>
-            <i class="material-icons">keyboard_arrow_down</i>
-          </a>
         </div>
       </div>
 
@@ -130,8 +114,13 @@
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js" integrity="sha256-98vAGjEDGN79TjHkYWVD4s87rvWkdWLHPs5MC3FvFX4=" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.0/dist/js/bootstrap.min.js" integrity="sha256-C8oQVJ33cKtnkARnmeWp6SDChkU+u7KvsNMFUzkkUzk=" crossorigin="anonymous"></script>
 
+    <!-- lodash -->
+    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.5/lodash.min.js" integrity="sha256-kfCY8AGGIjQknt91OQsTG0nhavjNrRGIWWb8WXOvQp8=" crossorigin="anonymous"></script>
+
     <!-- pdfmake -->
     <script src="https://cdn.jsdelivr.net/npm/pdfmake@0.1.36/build/pdfmake.min.js" integrity="sha256-Bxopx5SriypS8eE5qr38Bvap2ZNx3CUl9HZ6sewBtfk=" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/pdfmake@0.1.36/build/vfs_fonts.js" integrity="sha256-wvH/UThD/fVD6sz1bAWX7JDW5Nx1TBdhegX8IHX20hA=" crossorigin="anonymous"></script>
+
+    <script src="script.js"></script>
   </body>
 </html>

script.js

@@ -0,0 +1,45 @@
+const num_steps = 1;
+
+_.forEach(_.range(num_steps), function(value) {
+  $('#step-' + (value+1) + ' form').submit(function(event) {
+    $('#step-' + (value+2) ).collapse('show');
+    $('#step-' + (value+1) + '-heading .step-number').addClass('done');
+    event.preventDefault();
+  });
+});
+
+function gen() {
+  var model = {};
+  _.forEach(_.range(num_steps), function(value) {
+    _.each($('#step-' + (value + 1) + ' form').serializeArray(), function(value) {
+      model[value.name] = value.value;
+    });
+  });
+  var docDefinition = {
+    content: [
+      { text: 'Mitgliedsantrag FabLab Neustadt Aisch/Bad Winsheim', fontSize: 20, margin: [0,0,0,20] },
+      {
+        text: [
+          'Name: ',
+          { text: model.givenname + ' ' + model.surname, bold: true },
+        ]
+      },
+      {
+        text: [
+          'Adresse: ',
+          { text: model.address, bold: true },
+        ]
+      },
+      {
+        text: [
+          'PLZ + Ort: ',
+          { text: model.zip + ' ' + model.place, bold: true },
+        ]
+      }
+    ],
+    pageSize: 'A4',
+    pageMargins: [ 62.3622, 60, 62.3622, 60 ]
+  };
+
+  pdfMake.createPdf(docDefinition).download('Mitgliedsantrag FabLab NEA.pdf');
+}