Clean up files

related #8

eating.html

@@ -15,17 +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 id="input-wrapper">
-      <input id="rangeslider" type="range" min="0" max="5" value="0" step="1"
-      oninput="updateOutput(value, true)"
-      onchange="deactivate()"
-      onmouseup="deactivate()">
-      <div id="reel">
-        <!-- reel numbers - will be populated by JS -->
-        <div id="rn"></div>
-      </div>
-      <!-- static output display on the slider thumb - controlled by JS -->
-      <div id="static-output"></div>
+    <div class="input-wrapper">
+      <input class="rangeslider" type="range" min="0" max="5" value="0" step="1"
+      oninput="updateOutput(value)">
+      <div class="reel"></div>
+      <div class="static-output"></div>
     </div>
   </div>
 

main.css

@@ -87,30 +87,30 @@ body {
 .feelings__title {
   margin-bottom: 50px;
 }
-#input-wrapper {
+.input-wrapper {
   width: 500px;
   margin: 0 auto;
   position: relative;
   padding-top: 160px;
   padding-bottom: 160px;
   overflow-x: hidden;
 }
-#rangeslider {
+.rangeslider {
   display: block;
   -webkit-appearance: none;
   outline: none;
   height: 5px;
   width: 100%;
   background: rgba(0, 0, 0, 0.3);
 }
-#rangeslider::-webkit-slider-thumb {
+.rangeslider::-webkit-slider-thumb {
   -webkit-appearance: none;
   cursor: pointer;
   height: 10px;
   width: 54px;
   position: relative;
 }
-#rangeslider::-webkit-slider-thumb:after {
+.rangeslider::-webkit-slider-thumb:after {
   content: '< >';
   word-spacing: 20px;
   text-align: center;
@@ -125,7 +125,7 @@ body {
   color: transparent;
   transition: color 0.25s;
 }
-#rangeslider::-webkit-slider-thumb:before {
+.rangeslider::-webkit-slider-thumb:before {
   content: '';
   height: 5px;
   width: 400px;
@@ -136,18 +136,14 @@ body {
   /*prevent click obstruction for the real slider track beneath*/
   pointer-events: none;
 }
-#reel {
+.reel {
   width: 25%;
   height: 100px;
   overflow: hidden;
   position: absolute;
   top: 0; /*left pos will be controlled by JS*/
 }
-#rn {
-  transition: all 0.25s; /*vertical movement animation for the reel*/
-}
-/*static output styles*/
-#static-output {
+.static-output {
   font: bold 3rem/1rem 'Montserrat Alternates', sans-serif;
   color: white;
   position: absolute;
@@ -161,8 +157,6 @@ body {
   background-image: url('assets/banana.svg');
   background-repeat: no-repeat;
 }
-.active #rangeslider::-webkit-slider-thumb:after {color: white;}
-
 .download-button {
   margin-top: 20px;
   border: none;

slider.js

@@ -1,40 +1,20 @@
 //lets populate reel numbers
-var min = $("#rangeslider").attr("min");
-var max = $("#rangeslider").attr("max");
+var min = $(".rangeslider").attr("min");
+var max = $(".rangeslider").attr("max");
 
-// var rn = "";
-// for (var i = min; i <= max; i++) {
-//   rn += "<span>"+i+"</span>";
-// }
-//$("#rn").html(rn);
-
-//triggering updateOutput manually
-updateOutput($("#rangeslider").val(), false);
-
-var rfigure, h, v;
-//lets display the static output now
-function updateOutput(figure, activate) {
-	//if activate then add .active to #input-wrapper to help animate the #reel
-	if(activate)
-		$("#input-wrapper").addClass("active");
+updateOutput($(".rangeslider").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);
+	$(".static-output").html(rfigure);
 
-	//positioning #static-output and #reel
+	//positioning .static-output and .reel
 	//horizontal positioning first
-	h = figure/max*($("#input-wrapper").width()-$("#reel").width()) + 'px';
-	//vertical positioning of #rn
-	v = rfigure*$("#reel").height()*-1 + 'px';
+	h = figure/max*($(".input-wrapper").width()-$(".reel").width()) + 'px';
 
 	//applying the positions
-	$("#static-output, #reel").css({left: h});
-	//#rn will be moved using transform+transitions for better animation performance. The false translateZ triggers GPU acceleration for better performance.
-	 $("#rn").css({transform: 'translateY('+v+') translateZ(0)'});
-}
-function deactivate() {
-	//remove .active from #input-wrapper
-	$("#input-wrapper").removeClass("active");
+	$(".static-output, .reel").css({left: h});
 }