Rename class

related #8

eating.html

@@ -15,11 +15,11 @@ <h1 class="eating__title">How are you eating?</h1>
     <p class="eating__text">
       Slide to choose how many fruit and vegetables you eat per day.
     </p>
-    <div class="input-wrapper">
-      <input class="rangeslider" type="range" min="0" max="5" value="0" step="1"
+    <div class="eating__slider">
+      <input class="slider__range" type="range" min="0" max="5" value="0" step="1"
       oninput="updateOutput(value)">
-      <div class="reel"></div>
-      <div class="static-output"></div>
+      <div class="slider__reel"></div>
+      <div class="slider__banana"></div>
     </div>
   </div>
 

main.css

@@ -87,34 +87,33 @@ body {
 .feelings__title {
   margin-bottom: 50px;
 }
-.input-wrapper {
+.eating__slider {
   width: 500px;
   margin: 0 auto;
   position: relative;
   padding-top: 160px;
   padding-bottom: 160px;
   overflow-x: hidden;
 }
-.rangeslider {
+.slider__range {
   display: block;
   -webkit-appearance: none;
   outline: none;
   height: 5px;
   width: 100%;
   background: rgba(0, 0, 0, 0.3);
 }
-.rangeslider::-webkit-slider-thumb {
+.slider__range::-webkit-slider-thumb {
   -webkit-appearance: none;
   cursor: pointer;
   height: 10px;
   width: 54px;
   position: relative;
 }
-.rangeslider::-webkit-slider-thumb:after {
+.slider__range::-webkit-slider-thumb:after {
   content: '< >';
   word-spacing: 20px;
   text-align: center;
-  background: hsl(140, 50%, 70%);
   font: bold 17px/25px 'Montserrat Alternates', sans-serif;
   color: white;
   width: 54px;
@@ -125,25 +124,24 @@ body {
   color: transparent;
   transition: color 0.25s;
 }
-.rangeslider::-webkit-slider-thumb:before {
+.slider__range::-webkit-slider-thumb:before {
   content: '';
   height: 5px;
   width: 400px;
   position: absolute;
   top: 0;
   right: 0;
-  background: hsl(140, 50%, 70%);
   /*prevent click obstruction for the real slider track beneath*/
   pointer-events: none;
 }
-.reel {
+.slider__reel {
   width: 25%;
   height: 100px;
   overflow: hidden;
   position: absolute;
   top: 0; /*left pos will be controlled by JS*/
 }
-.static-output {
+.slider__banana {
   font: bold 3rem/1rem 'Montserrat Alternates', sans-serif;
   color: white;
   position: absolute;

slider.js

@@ -1,20 +1,20 @@
 //lets populate reel numbers
-var min = $(".rangeslider").attr("min");
-var max = $(".rangeslider").attr("max");
+var min = $(".slider__range").attr("min");
+var max = $(".slider__range").attr("max");
 
-updateOutput($(".rangeslider").val());
+updateOutput($(".slider__range").val());
 
 var rfigure, h;
 function updateOutput(figure) {
 	//because of the step param the slider will return values in multiple of 0.05 so we have to round it up
 	rfigure = Math.round(figure);
 	//displaying the static output
-	$(".static-output").html(rfigure);
+	$(".slider__banana").html(rfigure);
 
 	//positioning .static-output and .reel
 	//horizontal positioning first
-	h = figure/max*($(".input-wrapper").width()-$(".reel").width()) + 'px';
+	h = figure/max*($(".eating__slider").width()-$(".slider__reel").width()) + 'px';
 
 	//applying the positions
-	$(".static-output, .reel").css({left: h});
+	$(".slider__banana, .slider__reel").css({left: h});
 }