Merge pull request #95 from CYPIAPT-LNDSE/WTC-4-Add-Sleeping-Page

Add sleeping page. Related #4

public/index.js

@@ -8,6 +8,15 @@
     shift: 100
   });
 
+  [
+    "sleep__range"
+  ].forEach(range => {
+    if (document.getElementsByClassName(range)[0]){
+      var node = document.getElementsByClassName(range)[0];
+      addOnInputToElement( node, sleepingLion );
+    }
+  });
+
   function addAnswersToSessionStorage(){
     var personality = [];
     var hobbies = [];
@@ -98,12 +107,25 @@
     }
   }
 
-  // Adds a class to chosen element
-  function addClassToNode(node, className){
-    if (node) {
-      node.addEventListener("click", function(){
-        node.classList.add(className);
-      });
-    }
+  // Adds a class to baloons which makes them disappear when clicked.
+  function addPopClassToBallons(node){
+    if (!node){ return; }
+    node.addEventListener("click", function(){
+      node.classList.add('pop');
+    });
+  }
+
+  function addOnInputToElement(element, func){
+    element.oninput = function(){ func() }
+  }
+
+  function sleepingLion(){
+    var value = document.getElementsByClassName("sleep__range")[0].value;
+    var element = document.getElementsByClassName("sleep__sleeping-lion")[0];
+    changeBackgroundPosition(element, value, -332)
+  }
+
+  function changeBackgroundPosition(element, value, illustrationSize){
+    element.style.backgroundPosition = parseInt(value) * illustrationSize + "px";
   }
 })(jQuery);

public/views/sleep.hbs

@@ -0,0 +1,11 @@
+<div class="sleep">
+  <div class="sleep__text">
+    <h2 class="sleep__title">How well <br> have you been sleeping?</h2>
+    <div class="sleep__sleeping-lion"></div>
+    <div class="sleep__slider">
+      <input class="sleep__range" type="range" min="0"
+             max="5" value="0" step="1">
+    </div>
+  </div>
+  {{> buttons }}
+</div>

scss/_sleep.scss

@@ -0,0 +1,56 @@
+.sleep {
+  @extend %main-content;
+
+  & + .buttons {
+    margin: 440px 100px;
+  }
+}
+
+.sleep__text {
+  @extend %main-text;
+}
+
+.sleep__title {
+  margin-top: 0px;
+}
+
+.sleep__sleeping-lion {
+  background-image: url("../assets/lion-sleeping-sprite.svg");
+  background-repeat: no-repeat;
+  background-position: -0px;
+  background-size: 2000px;
+  height: 320px;
+  width: 330px;
+  margin-left: 120px;
+}
+
+.sleep__range {
+  -webkit-appearance: none;
+  width: 500px;
+  margin: 100px 0 100px 0;
+
+  &::-webkit-slider-runnable-track {
+    width: 300px;
+    height: 2px;
+    background: $transparent;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 150px;
+    width: 150px;
+    position:relative;
+    margin-top: -47.4px;
+    background-image: url(../assets/range-buttons.svg);
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+}
+
+.value {
+  display: none;
+}

scss/main.scss

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

src/routes.js

@@ -72,6 +72,17 @@ module.exports = [
     handler: (request, reply) => {
       var data =  {
         prev: '/personality',
+        next: '/sleep'
+      };
+      reply.view('hobbies', data);
+    }
+  },
+  {
+    method: 'GET',
+    path: '/sleep',
+    handler: (request, reply) => {
+      var data =  {
+        prev: '/hobbies',
         next: '/finished'
       };
       reply.view('hobbies', data);
@@ -83,7 +94,7 @@ module.exports = [
     handler: (request, reply) => {
       var data =  {
         isEnd: true,
-        prev: '/hobbies',
+        prev: '/sleep',
       };
       reply.view('finished', data);
     }

tests/server.test.js

@@ -100,6 +100,17 @@ test('Check /personality', t => {
   });
 });
 
+test('Check /sleep', t => {
+  const options = {
+    method: 'GET',
+    url: '/sleep'
+  };
+  server.inject(options, response => {
+    t.equal(response.statusCode, 200, 'You received a 200 status code');
+    t.end();
+  });
+});
+
 test('Check /feelings', t => {
   const options = {
     method: 'GET',