Add emoji-sprite.svg to project and link to range.

Related #65.

public/index.js

@@ -106,4 +106,29 @@
       });
     }
   }
+
+  [
+    "sleep__range",
+    "friends__range"
+  ].forEach(range => {
+    if (document.getElementsByClassName(range)[0]){
+      var node = document.getElementsByClassName(range)[0];
+      // addOnInputToElement( node, sleepingLion );
+      addOnInputToElement( node, emojiSprite );
+    }
+  });
+
+  function addOnInputToElement(element, func){
+    element.oninput = function(){ func() }
+  }
+
+  function emojiSprite(){
+    var value = document.getElementsByClassName("friends__range")[0].value;
+    var element = document.getElementsByClassName("friends__emoji-sprite")[0];
+    changeBackgroundPosition(element, value, -180)
+  }
+
+  function changeBackgroundPosition(element, value, illustrationSize){
+    element.style.backgroundPosition = parseInt(value) * illustrationSize + "px";
+  }
 })(jQuery);

public/views/friends.hbs

@@ -1,13 +1,18 @@
-<div class="introduction">
-  <img class="sleeping-lion" src="assets/lion-sleeping.svg" alt="Sleeping Lion"></img>
-  <div class="introduction__text">
-    <p>What is your name?<p>
-      <input class="text-input name" type="text" autofocus="">
+<div class="friends">
+  <div class="friends__text">
+    <h2 class="friends__title">Friends</h2>
   </div>
-  <div class="introduction__text">
-    <p>How old are you?<p>
-      <input class="text-input age" type="text" autofocus="">
+  <div class="friends__emoji-sprite"></div>
+  <div class="friends__slider">
+    <input class="friends__range" type="range" min="0" max="4" value="2" step="1">
   </div>
+  <div class="friends__text">
+    <p class="friends__subtitle">Good things about your friendships?</p>
+      <input class="friends__text-input" type="text" autofocus="">
+  </div>
+  <div class="friends__text">
+    <p class="friends__subtitle">Bad things about your friendships?</p>
+      <input class="friends__text-input" type="text" autofocus="">
+  </div>
+  {{> buttons }}
 </div>
-
-{{> buttons }}

scss/_friends.scss

@@ -0,0 +1,82 @@
+.friends {
+  @extend %main-content;
+  padding: 40px 100px;
+}
+
+.friends__text {
+  @extend %main-text;
+  margin: 0;
+  padding: 0;
+}
+
+.friends__title {
+  margin-top: 25px;
+}
+
+.friends__subtitle {
+  font-size: 1.9rem;
+  margin: 20px 0;
+}
+
+.friends__text-input {
+  font-family: $main-font;
+  width: 570px;
+  height: 50px;
+  font-size: 2rem;
+  border: none;
+  border-bottom: 4.5px dotted $white;
+  background-color: $transparent;
+  color: $yellow;
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.friends__slider {
+  height: 150px;
+  margin-bottom: 30px;
+}
+
+.friends__text-input:focus {
+  outline: none;
+}
+
+.friends__range {
+  -webkit-appearance: none;
+  width: 500px;
+  margin: 100px 0 100px 30px;
+
+  &::-webkit-slider-runnable-track {
+    width: 300px;
+    height: 2px;
+    background: $transparent;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 120px;
+    width: 120px;
+    position:relative;
+    margin-top: -38px;
+    background-image: url(../assets/range-buttons.svg);
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+}
+
+.friends__emoji-sprite{
+  background-image: url("../assets/emoji-sprite.svg");
+  background-repeat: no-repeat;
+  background-position: -360px;
+  background-size: 900px;
+  height: 175px;
+  width: 175px;
+  margin-left: 195px;
+}
+
+span {
+  display: none;
+}

scss/_layout.scss

@@ -27,7 +27,7 @@ body {
 .buttons {
   position: relative;
   z-index: 1;
-  margin: -40px 110px;
+  width: 100%;
 }
 
 .button {

scss/main.scss

@@ -10,3 +10,4 @@
 @import "choose-an-avatar";
 @import "personality";
 @import "balloon";
+@import "friends";

src/routes.js

@@ -94,7 +94,7 @@ module.exports = [
     handler: (request, reply) => {
       var data =  {
         isEnd: true,
-        prev: '/hobbies',
+        prev: '/friends',
       };
       reply.view('finished', data);
     }