From 983ca5732df4dda4a14c6af2fc6b3eda7a4d0647 Mon Sep 17 00:00:00 2001
From: "georgia.shaw" <georgia@cranbrookw4.com>
Date: Wed, 18 Sep 2019 12:47:52 +0100
Subject: [PATCH 1/5] organise css files and add classes

---
 public/css/formStyle.css      |  78 ++++++++++----------
 public/css/homeStyle.css      | 130 ++++++++++++++--------------------
 public/js/userForm.js         |  10 +--
 src/views/HIW.hbs             |  25 +++----
 src/views/form.hbs            |  98 ++++++++++++-------------
 src/views/home.hbs            |  13 ++--
 src/views/partials/header.hbs |  12 ++--
 7 files changed, 174 insertions(+), 192 deletions(-)

diff --git a/public/css/formStyle.css b/public/css/formStyle.css
index ac96765..9cee519 100644
--- a/public/css/formStyle.css
+++ b/public/css/formStyle.css
@@ -1,4 +1,4 @@
-/* ---------------------------------------------INPUT & BUTTONS ---------------------------------------------*/
+/* ---------------------------------FORM ------------------------------------*/
 .user-form {
   display: flex;
   flex-direction: column;
@@ -12,30 +12,46 @@
   width: 100vw;
 }
 
-input {
-  padding: 10px;
-  width: 100%;
-  font-size: 17px;
+/*---------------------------- INPUT BOXES ------------------------------*/
+.user-input-outer-wrap {
+  /*this is what hides each part of the form - don't remove!*/
+  display: none;
+}
+
+.user-input {
+  border-radius: 3rem;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border: 2px solid #ebfffb;
+  background: #ffffff;
+  font-family: "Roboto", sans-serif;
+  margin: 0 0 1.5rem 0;
+  max-width: 20rem;
+  font-size: 1.1rem;
+  padding: 0.7rem;
   text-align: center;
+  /*this keeps the text that user enters centered*/
 }
 
-input.invalid {
+.user-input.invalid {
   background-color: #ffdddd;
 }
 
-.user-input {
-  display: none;
+.user-input-title {
+  font-family: "Righteous", cursive;
 }
 
-.button-wrap {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  width: 100vw;
+.user-input::placeholder {
+  text-align: center;
+  font-family: "Roboto", sans-serif;
+  color: #a2a1a1;
 }
 
-/* ---------------------------------------------STEPS ---------------------------------------------*/
+.time-and-date-wrap {
+  display: flex;
+  flex-direction: column;
+}
 
+/* --------------------------STEPS/PAGINATION DOTS ---------------------------*/
 .step-wrap {
   display: flex;
   flex-direction: row;
@@ -45,30 +61,30 @@ input.invalid {
   height: 15px;
   width: 15px;
   margin: 0 2px;
-  background-color: #bbbbbb;
+  background-color: #97a3cc;
   border: none;
   border-radius: 50%;
   display: inline-block;
-  opacity: 0.5;
-  box-shadow: inset 0 0 10px #3232ff;
+  /* opacity: 0.5; */
+  box-shadow: inset 0 0 5px #6375b3;
 }
 
 .step.active {
   opacity: 1;
-  background-color: #637bd0;
+  background-color: #3b487a;
 }
 
 .step.finish {
-  background-color: #4a5b99;
+  background-color: #4f62a6;
 }
 
-/* ---------------------------------------------RADIO BUTTONS ---------------------------------------------*/
-
+/* -----------------------------RADIO BUTTONS -------------------------------*/
 .radio-toolbar {
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
+
 .radio-toolbar input[type="radio"] {
   opacity: 0;
   position: fixed;
@@ -77,17 +93,9 @@ input.invalid {
 
 .radio-toolbar label {
   display: inline-block;
-  background-color: #ddd;
-  /* padding: 10px 20px; */
-  margin: 5px 0;
-  font-family: "Montserrat", sans-serif;
-  /* font-size: 16px; */
-  /* border: 2px solid #444; */
+  margin: 0.8rem 0;
   border-radius: 3rem;
-  padding: 10px;
-  width: 100%;
-  font-size: 17px;
-  text-align: center;
+  padding: 0.8rem;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   border: 2px solid #ebfffb;
   background: #ffffff;
@@ -97,11 +105,3 @@ input.invalid {
   background-color: #637bd0;
   border-color: #637bd0;
 }
-
-.radio-toolbar input[type="radio"]:focus + label {
-  /* border: 2px dashed #444; */
-}
-
-.radio-toolbar input[type="radio"]:hover + label {
-  /* border: 2px dashed #aaaaaa; */
-}
diff --git a/public/css/homeStyle.css b/public/css/homeStyle.css
index 43ad0b7..384778d 100644
--- a/public/css/homeStyle.css
+++ b/public/css/homeStyle.css
@@ -1,14 +1,13 @@
+/*--------------------------------GENERAL-------------------------------------*/
+
 html {
   box-sizing: border-box;
 }
 
 body {
   background: #ebfffb;
-}
-
-header {
-  display: flex;
-  flex-direction: row;
+  text-align: center;
+  font-family: "Montserrat", sans-serif;
 }
 
 *,
@@ -17,62 +16,52 @@ header {
   box-sizing: inherit;
 }
 
-.logo {
-  width: 50px;
-  height: 50px;
-}
-
-/* ---------------------------------------------- FONTS -----------------------------------------------------------*/
-
-h1,
-h3,
-p {
-  font-family: "Montserrat", sans-serif;
-  text-align: center;
+a {
+  text-decoration: none;
 }
 
-h2 {
-  text-align: center;
-  font-family: "Righteous", cursive;
+a:visited {
+  color: black;
 }
 
-/* ---------------------------------------------- BUTTONS -----------------------------------------------------------*/
-button {
-  background-color: #db3306;
-  color: #ffffff;
-  border: none;
-  padding: 15px 20px;
-  font-size: 17px;
-  font-family: "Montserrat", sans-serif;
-  cursor: pointer;
-  border-radius: 3rem;
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  margin: 0.5rem 0.5rem 2rem 0.5rem;
-}
+/*----------------------------------HEADER------------------------------------*/
 
-button:hover {
-  opacity: 0.8;
+header {
+  display: flex;
+  flex-direction: row;
 }
 
-/* ---------------------------------------------- ALERT BOX -----------------------------------------------------------*/
-
-.box {
-  /* width: 40%; */
+.header-button-wrap {
   margin: 0 auto;
   background: rgba(255, 255, 255, 0.2);
   border: 2px solid #fff;
   border-radius: 20px/50px;
   background-clip: padding-box;
-  text-align: center;
-  font-family: "Montserrat", sans-serif;
   align-self: center;
 }
 
-.box:visited {
+.header-button-wrap:visited {
   text-decoration: none;
 }
 
-.overlay {
+.header-button-link-wrap {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.logo {
+  width: 50px;
+  height: 50px;
+}
+
+.question-mark {
+  width: 35px;
+  height: 40px;
+}
+
+/* ------------------------------ ALERT BOX ----------------------------------*/
+
+.popup-home-overlay {
   position: fixed;
   top: 0;
   bottom: 0;
@@ -83,7 +72,8 @@ button:hover {
   visibility: hidden;
   opacity: 0;
 }
-.overlay:target {
+
+.popup-home-overlay:target {
   visibility: visible;
   opacity: 1;
 }
@@ -103,6 +93,7 @@ button:hover {
   color: #333;
   font-family: Tahoma, Arial, sans-serif;
 }
+
 .popup .close {
   position: absolute;
   top: 20px;
@@ -113,9 +104,11 @@ button:hover {
   text-decoration: none;
   color: #333;
 }
+
 .popup .close:hover {
   color: #06d85f;
 }
+
 .popup .content {
   max-height: 30%;
   overflow: auto;
@@ -127,42 +120,27 @@ button:hover {
   justify-content: space-around;
 }
 
-input {
+/* ------------------------------ BUTTONS ------------------------------------*/
+
+.standard-button {
+  background-color: #db3306;
+  color: #ffffff;
+  border: none;
+  padding: 1rem 1.3rem;
+  font-size: 1.05rem;
+  cursor: pointer;
   border-radius: 3rem;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  border: 2px solid #ebfffb;
-  background: #ffffff;
-  font-family: "Roboto", sans-serif;
-  /* padding-left: 1.5rem; */
-  margin: 0 0 1.5rem 0;
-  max-width: 20rem;
-}
-
-a {
-  text-decoration: none;
-}
-
-a:visited {
-  color: black;
-  font-family: "Montserrat", sans-serif;
-}
-
-input::placeholder {
-  text-align: center;
-  font-family: "Roboto", sans-serif;
-  color: #a2a1a1;
+  margin: 0.5rem 0.5rem 2rem 0.5rem;
 }
 
-.question-mark {
-  width: 35px;
-  height: 40px;
+.standard-button:hover {
+  opacity: 0.8;
 }
 
-@media screen and (max-width: 700px) {
-  .box {
-    /* width: 70%; */
-  }
-  .popup {
-    width: 70%;
-  }
+.button-wrap {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  /* width: 100vw; */
 }
diff --git a/public/js/userForm.js b/public/js/userForm.js
index b4faa10..f9f834e 100644
--- a/public/js/userForm.js
+++ b/public/js/userForm.js
@@ -16,7 +16,7 @@ const updateName = () => {
 };
 
 const showTab = n => {
-  const labelArray = document.querySelectorAll(".user-input");
+  const labelArray = document.querySelectorAll(".user-input-outer-wrap");
   labelArray[n].style.display = "block";
 
   if (n === 0) {
@@ -41,14 +41,14 @@ showTab(currentTab);
 
 const prevInput = e => {
   e.preventDefault();
-  const labelArray = document.querySelectorAll(".user-input");
+  const labelArray = document.querySelectorAll(".user-input-outer-wrap");
   labelArray[currentTab].style.display = "none";
   currentTab = currentTab - 1;
   showTab(currentTab);
 };
 
 const validateEmpty = () => {
-  const labelArray = document.querySelectorAll(".user-input");
+  const labelArray = document.querySelectorAll(".user-input-outer-wrap");
   let labelInput,
     valid = true;
 
@@ -65,7 +65,7 @@ const validateEmpty = () => {
 
 const validatePostcode = () => {
   let valid = true;
-  const labelArray = document.querySelectorAll(".user-input");
+  const labelArray = document.querySelectorAll(".user-input-outer-wrap");
   const postcodeInput = labelArray[currentTab].querySelector(
     ".user-input-postcode"
   );
@@ -80,7 +80,7 @@ const validatePostcode = () => {
 };
 const nextInput = e => {
   e.preventDefault();
-  const labelArray = document.querySelectorAll(".user-input");
+  const labelArray = document.querySelectorAll(".user-input-outer-wrap");
 
   if (!validateEmpty()) return false;
   if (currentTab == 1 || currentTab == 3) {
diff --git a/src/views/HIW.hbs b/src/views/HIW.hbs
index e05296c..624a6a3 100644
--- a/src/views/HIW.hbs
+++ b/src/views/HIW.hbs
@@ -1,14 +1,15 @@
 <header class="header">{{> headerNoHelp}}</header>
 <main>
-    <h1>How It Works</h1>
-    <p>Want to meet up with someone but can’t decide on a location?
-
-        <span class="highlight">We take your frustration away, and find a location for you! </span>
-
-        Based on your current locations and preferences, we’ll suggest a list of perfect venues for you and your friend.
-
-        Then, you’ll both have the chance to swipe through and select your favourite venues.
-
-        Once we have a match, we’ll show you how to get there, too.</p>
-    <button onclick="window.location.href='/'">Go Back</button>
-</main>
\ No newline at end of file
+  <h1 class="how-it-works-title">How It Works</h1>
+  <div class="how-it-works-text-wrap">
+    <p>Want to meet up with someone but can’t decide on a location?</p>
+    <p class="highlight">We take your frustration away, and find a
+      location for you!</p>
+    <p>Based on your current locations and preferences, we’ll suggest a
+      ist of perfect venues for you and your friend.</p>
+    <p>Then, you’ll both have the chance to swipe through and select your
+      favourite venues.</p>
+    <p>Once we have a match, we’ll show you how to get there, too.</p>
+  </div>
+  <button class="standard-button" onclick="window.location.href='/'">Go Back</button>
+</main>
diff --git a/src/views/form.hbs b/src/views/form.hbs
index b1b83a4..a58d339 100644
--- a/src/views/form.hbs
+++ b/src/views/form.hbs
@@ -6,72 +6,74 @@
 
 <main>
   <form class="user-form" action="/formsubmit" method="POST">
-    <div class="user-input">
+    
+    <div class="user-input-outer-wrap">
       <div class="user-input-inner-wrap">
-        <h2>What's your name?</h2>
-        <input type="text" placeholder="John" name="userName" />
+        <h2 class="user-input-title">What's your name?</h2>
+        <input class="user-input" type="text" placeholder="John" name="userName" />
+      </div>
     </div>
-  </div>
 
-    <div class="user-input">
+    <div class="user-input-outer-wrap">
       <div class="user-input-inner-wrap">
-        <h2>What's your postcode?</h2>
-        <input type="text" placeholder="SW1A 1AA" name="postcode" class="user-input-postcode" />
+        <h2 class="user-input-title">What's your postcode?</h2>
+        <input class="user-input user-input-postcode" type="text" placeholder="SW1A 1AA" name="postcode" />
+      </div>
     </div>
-  </div>
-
-    <div class="user-input">
 
+    <div class="user-input-outer-wrap">
       <div class="user-input-inner-wrap">
-        <h2>What's your <br>friend's name?</h2>
-
-        <input type="text" placeholder="Jane" name="friendName" id="friendName" />
+        <h2 class="user-input-title">What's your <br>friend's name?</h2>
+        <input class="user-input" type="text" placeholder="Jane" name="friendName" id="friendName" />
+      </div>
     </div>
-  </div>
 
-    <div class="user-input">
+    <div class="user-input-outer-wrap">
       <div class="user-input-inner-wrap">
-        <h2>What's <span class="user-input-name"></span>'s postcode?</h2>
-        <input type="text" placeholder="SW1A 2AA" name="friendPostcode" class="user-input-postcode" />
+        <h2 class="user-input-title">What's <span class="user-input-name"></span>'s postcode?</h2>
+        <input class="user-input user-input-postcode" type="text" placeholder="SW1A 2AA" name="friendPostcode" />
+      </div>
     </div>
-  </div>
 
-    <div class="user-input">
+    <div class="user-input-outer-wrap">
       <div class="user-input-inner-wrap">
-        <h2>When do you <br>want to meet?</h2>
-
-        <input id="todaydate" type="date" name="date" />
-        <input id="todaytime" type="time" name="time" />
+        <h2 class="user-input-title">When do you <br>want to meet?</h2>
+        <div class="time-and-date-wrap">
+          <input class="user-input" id="todaydate" type="date" name="date" />
+          <input class="user-input" id="todaytime" type="time" name="time" />
+        </div>
+      </div>
     </div>
-  </div>
-
-    <div class="user-input">
-        <h2>What do you want to do?</h2>
-        <div class="radio-toolbar">
-          <input id="entertainment" type="radio" placeholder="" name="venue" />
-          <label for="entertainment">We want to be entertained!</label>
 
-          <input id="restaurant" type="radio" placeholder="" name="venue" />
-          <label for="restaurant">We want to enjoy a nice meal.</label>
-          <input id="nightlife" type="radio" placeholder="" name="venue" />
-          <label for="nightlife">We want to party!</label>
-          <input id="coffee" type="radio" placeholder="" name="venue" />
-          <label for="coffee">We want to have coffee.</label>
-        </div>
+    <div class="user-input-outer-wrap">
+      <h2 class="user-input-title">What do you want to do?</h2>
+      <div class="radio-toolbar">
+        <input class="user-input" id="entertainment" type="radio" placeholder="" name="venue" />
+        <label for="entertainment">We want to be entertained!</label>
+        <input class="user-input" id="restaurant" type="radio" placeholder="" name="venue" />
+        <label for="restaurant">We want to enjoy a nice meal.</label>
+        <input class="user-input" id="nightlife" type="radio" placeholder="" name="venue" />
+        <label for="nightlife">We want to party!</label>
+        <input class="user-input" id="coffee" type="radio" placeholder="" name="venue" />
+        <label for="coffee">We want to have coffee.</label>
       </div>
+    </div>
+
     <div class="button-wrap">
-        <button class="button-previous">
-          Go Back
-        </button>
-        <button class="button-next">Next Step</button>
+      <button class="standard-button button-previous">
+        Go Back
+      </button>
+      <button class="standard-button button-next">Next Step</button>
     </div>
+
     <div class="step-wrap">
-     <span class="step"></span>
-     <span class="step"></span>
-     <span class="step"></span>
-     <span class="step"></span>
-     <span class="step"></span>
-     <span class="step"></span>
-   </div>
+      <span class="step"></span>
+      <span class="step"></span>
+      <span class="step"></span>
+      <span class="step"></span>
+      <span class="step"></span>
+      <span class="step"></span>
+    </div>
+
   </form>
 </main>
diff --git a/src/views/home.hbs b/src/views/home.hbs
index 16d094c..216230b 100644
--- a/src/views/home.hbs
+++ b/src/views/home.hbs
@@ -1,8 +1,9 @@
 <header class="header">{{> headerNoHelp}}</header>
 <main>
-    <h1>Want to meet up with a friend?</h1>
-    <p>Great! Tell us where you are and we’ll find a perfect venue that’s smack in the middle of both of you.</p>
-    <button onclick="window.location.href='/howitworks'">Learn More</button>
-    <button onclick="window.location.href='/form'">Let's Start</button>
-
-</main>
\ No newline at end of file
+  <h1>Want to meet up with a friend?</h1>
+  <p>Great! Tell us where you are and we’ll find a perfect venue that’s smack in the middle of both of you.</p>
+  <div class="button-wrap">
+    <button class="standard-button" onclick="window.location.href='/howitworks'">Learn More</button>
+    <button class="standard-button" onclick="window.location.href='/form'">Let's Start</button>
+  </div>
+</main>
diff --git a/src/views/partials/header.hbs b/src/views/partials/header.hbs
index 4066b62..9f332dd 100644
--- a/src/views/partials/header.hbs
+++ b/src/views/partials/header.hbs
@@ -1,9 +1,9 @@
 <!-- Back home pop up -->
-<div class="box">
-    <a class="button" href="#popupHome"><img class="logo" src="/img/logo.png" alt="Logo"></a>
+<div class="header-button-wrap">
+    <a class="header-button-link-wrap" href="#popupHome"><img class="logo" src="/img/logo.png" alt="Logo"></a>
 </div>
 
-<div id="popupHome" class="overlay">
+<div id="popupHome" class="popup-home-overlay">
     <div class="popup">
         <h2>Are you sure?</h2>
         <div class="content">
@@ -17,11 +17,11 @@
 </div>
 
 <!-- Info pop up -->
-<div class="box">
-    <a class="button" href="#popup1"><img class="question-mark" src="./img/help.svg"></a>
+<div class="header-button-wrap">
+    <a class="header-button-link-wrap" href="#popup1"><img class="question-mark" src="./img/help.svg"></a>
 </div>
 
-<div id="popup1" class="overlay">
+<div id="popup1" class="popup-home-overlay">
     <div class="popup">
         <h2>Info</h2>
         <a class="close" href="#">&times;</a>

From 6d48a113c4dfa868780324b92d556614e7d1d04f Mon Sep 17 00:00:00 2001
From: "georgia.shaw" <georgia@cranbrookw4.com>
Date: Wed, 18 Sep 2019 12:58:47 +0100
Subject: [PATCH 2/5] organise css folder

---
 public/css/finalStyle.css  | 44 +++++++++++++++++-----------------
 public/css/venuesSwipe.css |  6 ++---
 src/views/final.hbs        | 48 +++++++++++++++++++++-----------------
 3 files changed, 52 insertions(+), 46 deletions(-)

diff --git a/public/css/finalStyle.css b/public/css/finalStyle.css
index f072104..2f1aa4c 100644
--- a/public/css/finalStyle.css
+++ b/public/css/finalStyle.css
@@ -1,4 +1,22 @@
-.dropbtn {
+/*-------------------------------BUTTON WRAP----------------------------------*/
+
+.next-step-icon-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/*--------------------------ADD TO CALENDAR BUTTON ---------------------------*/
+.add-to-calendar-button-wrap {
+  position: relative;
+  display: inline-block;
+}
+
+.add-to-calendar-button-wrap a:hover {
+  background-color: #ddd;
+}
+
+.add-to-calander-button {
   background-color: #637bd0;
   border: 2px solid #5366aa;
   color: #fff;
@@ -7,12 +25,7 @@
   cursor: pointer;
 }
 
-.dropdown {
-  position: relative;
-  display: inline-block;
-}
-
-.dropdown-content {
+.add-to-calendar-dropdown-content {
   display: none;
   position: absolute;
   background-color: #fff;
@@ -26,7 +39,7 @@
   text-align: center;
 }
 
-.dropdown-content a {
+.add-to-calendar-dropdown-content a {
   color: black;
   padding: 12px 16px;
   text-decoration: none;
@@ -35,25 +48,14 @@
   font-family: "Montserrat", sans-serif;
 }
 
-.dropdown a:hover {
-  background-color: #ddd;
-}
-
 .show {
   display: block;
 }
 
-.citymapper-logo {
+/*-----------------------------CITYMAPPER BUTTON------------------------------*/
+.citymapper-button {
   border-radius: 1rem;
-  /* box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
-  /* border: 2px solid #298b20; */
   width: 85px;
   height: 80px;
   padding: 0.5rem;
 }
-
-.next-step-icon-wrap {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
diff --git a/public/css/venuesSwipe.css b/public/css/venuesSwipe.css
index 4fa6f29..1ee7451 100644
--- a/public/css/venuesSwipe.css
+++ b/public/css/venuesSwipe.css
@@ -41,7 +41,7 @@ body {
   pointer-events: none;
 }
 
-/* STEPS */
+/*----------------------------------STEPS-------------------------------------*/
 
 .step-wrap {
   display: flex;
@@ -69,7 +69,7 @@ body {
   background-color: #4caf50;
 }
 
-/* HEART */
+/*------------------------------------HEART-----------------------------------*/
 
 .heart-wrap {
   width: 4rem;
@@ -87,7 +87,7 @@ body {
   background-image: url(../img/colouredHeart.svg);
 }
 
-/* STARS */
+/*-----------------------------------STARS------------------------------------*/
 .stars img {
   width: 50px;
   height: auto;
diff --git a/src/views/final.hbs b/src/views/final.hbs
index aa8516c..6e25568 100644
--- a/src/views/final.hbs
+++ b/src/views/final.hbs
@@ -1,28 +1,32 @@
 <header class="header">{{> headerNoHelp}}</header>
 <main>
-    <h1>HURRAY!</h1>
-    <p class="highlight">You're meeting <span class="userB">{{data.userb}}</span></p>
-    <p>at<br>
-        <span class="time">{{data.timeinput}}</span><br>
-        on<br>
-        <span class="date">{{data.dateinput}}</span><br>
-        at<br>
-        <span class="final-venu"></span>
-        <span class="start-postcode" style="display:none">{{data.postcodea}}</span>
-    </p>
-<div class="next-step-icon-wrap">
-    <a href="" target="_blank" class="link-citymapper"><img class="citymapper-logo"
-            src="./img/citymapper.png"
-            alt="Get directions with Citymapper" /></a>
+  <h1>HURRAY!</h1>
+  <p class="highlight">You're meeting
+    <span class="userB">{{data.userb}}</span>
+  </p>
+  <p>at<br>
+    <span class="time">{{data.timeinput}}</span><br>
+    on<br>
+    <span class="date">{{data.dateinput}}</span><br>
+    at<br>
+    <span class="final-venu"></span>
+    <span class="start-postcode" style="display:none">{{data.postcodea}}</span>
+  </p>
+  <div class="next-step-icon-wrap">
 
-    <div class="dropdown">
-        <button onclick="myFunction()" class="dropbtn"> <i class="fa fa-calendar-o" aria-hidden="true"></i> Add to
-            Calendar</button>
-        <div id="myDropdown" class="dropdown-content">
-            <a href="#" class="fa fa-yahoo" aria-hidden="true" target="_blank"> Yahoo</a>
-            <a href="#" class="fa fa-google" aria-hidden="true" target="_blank"> Google</a>
-            <a href="#" class="fa fa-outlook" aria-hidden="true" target="_blank"> Outlook</a>
-        </div>
+    <a href="" target="_blank" class="link-citymapper">
+      <img class="citymapper-button" src="./img/citymapper.png" alt="Get directions with Citymapper" />
+    </a>
+
+    <div class="add-to-calendar-button-wrap">
+      <button onclick="myFunction()" class="add-to-calander-button"> <i class="fa fa-calendar-o" aria-hidden="true"></i> Add to
+        Calendar</button>
+      <div id="myDropdown" class="add-to-calendar-dropdown-content">
+        <a href="#" class="fa fa-yahoo" aria-hidden="true" target="_blank"> Yahoo</a>
+        <a href="#" class="fa fa-google" aria-hidden="true" target="_blank"> Google</a>
+        <a href="#" class="fa fa-outlook" aria-hidden="true" target="_blank"> Outlook</a>
+      </div>
     </div>
+
   </div>
 </main>

From be30a98b6b1d6f2bda2066aaa91a254ed3bb566a Mon Sep 17 00:00:00 2001
From: "georgia.shaw" <georgia@cranbrookw4.com>
Date: Wed, 18 Sep 2019 14:30:15 +0100
Subject: [PATCH 3/5] changes to css for swipe page

---
 public/css/homeStyle.css   |  1 +
 public/css/venuesSwipe.css | 29 ++++++++++++++++-------------
 public/js/venuesSwipe.js   |  2 +-
 src/views/venues.hbs       | 14 ++++++++++----
 4 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/public/css/homeStyle.css b/public/css/homeStyle.css
index 384778d..6382bb4 100644
--- a/public/css/homeStyle.css
+++ b/public/css/homeStyle.css
@@ -132,6 +132,7 @@ header {
   border-radius: 3rem;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   margin: 0.5rem 0.5rem 2rem 0.5rem;
+  font-family: "Montserrat", sans-serif;
 }
 
 .standard-button:hover {
diff --git a/public/css/venuesSwipe.css b/public/css/venuesSwipe.css
index 1ee7451..31de9cb 100644
--- a/public/css/venuesSwipe.css
+++ b/public/css/venuesSwipe.css
@@ -1,3 +1,4 @@
+/*---------------------------------GENERAL------------------------------------*/
 * {
   margin: 0;
 }
@@ -10,17 +11,8 @@ body {
   height: 100vh;
 }
 
-.img-container {
-  width: 100vw;
-  height: 40vh;
-  overflow: hidden;
-  position: relative;
-}
-.img-container img {
-  width: 100%;
-}
-
-.container-swipe {
+/*-----------------------------SWIPE CONTAINER--------------------------------*/
+.swipe-container {
   --n: 1;
   display: flex;
   align-items: space-between;
@@ -41,7 +33,18 @@ body {
   pointer-events: none;
 }
 
-/*----------------------------------STEPS-------------------------------------*/
+.venue-image-container {
+  width: 100vw;
+  height: 40vh;
+  overflow: hidden;
+  position: relative;
+}
+
+.venue-image-container img {
+  width: 100%;
+}
+
+/*--------------------------STEPS/PAGINATION DOTS-----------------------------*/
 
 .step-wrap {
   display: flex;
@@ -88,7 +91,7 @@ body {
 }
 
 /*-----------------------------------STARS------------------------------------*/
-.stars img {
+.venue-rating-stars img {
   width: 50px;
   height: auto;
 }
diff --git a/public/js/venuesSwipe.js b/public/js/venuesSwipe.js
index 22fa152..8685500 100644
--- a/public/js/venuesSwipe.js
+++ b/public/js/venuesSwipe.js
@@ -1,5 +1,5 @@
 const mainContainer = document.querySelector(".main-container");
-const containerSwipe = document.querySelector(".container-swipe");
+const containerSwipe = document.querySelector(".swipe-container");
 const childCount = containerSwipe.children.length;
 
 containerSwipe.style.setProperty("--n", childCount);
diff --git a/src/views/venues.hbs b/src/views/venues.hbs
index 554ac1a..312779b 100644
--- a/src/views/venues.hbs
+++ b/src/views/venues.hbs
@@ -3,19 +3,24 @@
   {{>header}}
 
 </header>
+
   <h1>Pick your favourite venue</h1>
-  <div class="container-swipe">
+
+  <div class="swipe-container">
     {{#each venues}}
     <div class="venue-box">
-      <div class="img-container"><img src="{{image_url}}"/></div>
+      <div class="venue-image-container">
+        <img src="{{image_url}}"/>
+      </div>
       <div>{{name}}</div>
-      <div class="stars">{{{starFinder rating}}}</div>
+      <div class="venue-rating-stars">{{{starFinder rating}}}</div>
       <div>{{address}}</div>
       <div>{{price}}</div>
     </div>
     {{/each}}
   </div>
-  <div class=step-wrap>
+
+  <div class="step-wrap">
     <span class="step"></span>
     <span class="step"></span>
     <span class="step"></span>
@@ -24,4 +29,5 @@
     <span class="step"></span>
     <span class="step"></span>
   </div>
+
   <div class="heart-wrap uncolouredHeart"></div>

From c5b7e245107d099a8c21f2ec0c0bc9d1d4328efd Mon Sep 17 00:00:00 2001
From: "georgia.shaw" <georgia@cranbrookw4.com>
Date: Wed, 18 Sep 2019 14:52:59 +0100
Subject: [PATCH 4/5] remove class on form

---
 src/views/form.hbs | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/views/form.hbs b/src/views/form.hbs
index 48603f2..46d7090 100644
--- a/src/views/form.hbs
+++ b/src/views/form.hbs
@@ -8,41 +8,31 @@
   <form class="user-form" action="/formsubmit" method="POST">
 
     <div class="user-input-outer-wrap">
-      <div class="user-input-inner-wrap">
         <h2 class="user-input-title">What's your name?</h2>
         <input class="user-input" type="text" placeholder="John" name="userName" />
-      </div>
     </div>
 
     <div class="user-input-outer-wrap">
-      <div class="user-input-inner-wrap">
         <h2 class="user-input-title">What's your postcode?</h2>
         <input class="user-input user-input-postcode" type="text" placeholder="SW1A 1AA" name="postcode" />
-      </div>
     </div>
 
     <div class="user-input-outer-wrap">
-      <div class="user-input-inner-wrap">
         <h2 class="user-input-title">What's your <br>friend's name?</h2>
         <input class="user-input" type="text" placeholder="Jane" name="friendName" id="friendName" />
-      </div>
     </div>
 
     <div class="user-input-outer-wrap">
-      <div class="user-input-inner-wrap"
         <h2 class="user-input-title">What's <span class="user-input-name"></span>'s postcode?</h2>
         <input class="user-input user-input-postcode" type="text" placeholder="SW1A 2AA" name="friendPostcode" />
-      </div>
     </div>
 
     <div class="user-input-outer-wrap">
-      <div class="user-input-inner-wrap">
         <h2 class="user-input-title">When do you <br>want to meet?</h2>
         <div class="time-and-date-wrap">
           <input class="user-input" id="todaydate" type="date" name="date" />
           <input class="user-input" id="todaytime" type="time" name="time" />
         </div>
-      </div>
     </div>
 
     <div class="user-input-outer-wrap">

From 0c881e1225e64ad638634347434de5e87916a769 Mon Sep 17 00:00:00 2001
From: "georgia.shaw" <georgia@cranbrookw4.com>
Date: Wed, 18 Sep 2019 15:36:01 +0100
Subject: [PATCH 5/5] write router tests

---
 package.json         |  2 +-
 tests/router.test.js | 64 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 65 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a0ab19f..73656d3 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "start": "node src/server.js",
     "db_init": "node src/model/db_init.js",
     "dev": "nodemon src/server.js",
-    "test": "NODE_ENV=test node tests/db_test.js | tap-spec"
+    "test": "NODE_ENV=test tape tests/*test.js | tap-spec"
   },
   "repository": {
     "type": "git",
diff --git a/tests/router.test.js b/tests/router.test.js
index e69de29..529aefa 100644
--- a/tests/router.test.js
+++ b/tests/router.test.js
@@ -0,0 +1,64 @@
+const test = require("tape");
+const supertest = require("supertest");
+const app = require("./../src/app");
+
+test("1. Check that router testing is working", t => {
+  t.assert(true, true, "Must return true");
+  t.assert(process.env.NODE_ENV, "test", "inside testing environment");
+  t.end();
+});
+
+test("2. Check our home route works", t => {
+  supertest(app)
+    .get("/")
+    .expect(200)
+    .expect("Content-type", /html/)
+    .end(err => {
+      t.error(err, "home route working");
+      t.end();
+    });
+});
+
+test("3. Check our form route works", t => {
+  supertest(app)
+    .get("/form")
+    .expect(200)
+    .expect("Content-type", /html/)
+    .end(err => {
+      t.error(err, "/form route working");
+      t.end();
+    });
+});
+
+test("4. Check our venue route works", t => {
+  supertest(app)
+    .get("/venues")
+    .expect(200)
+    .expect("Content-type", /html/)
+    .end(err => {
+      t.error(err, "/venues route working");
+      t.end();
+    });
+});
+
+test("5. Check 404 route works", t => {
+  supertest(app)
+    .get("/idontwork")
+    .expect(404)
+    .expect("Content-type", /html/)
+    .end(err => {
+      t.error(err, "/404 route working");
+      t.end();
+    });
+});
+
+// test("6. Check 500 route works", t => {
+//   supertest(app)
+//     .get("/idontworkagain")
+//     .expect(500)
+//     .expect("Content-type", /html/)
+//     .end(err => {
+//       t.error(err, "/500 route working");
+//       t.end();
+//     });
+// });