adds slider with comment text and scale number box

public/dom.js

@@ -1,23 +1,17 @@
 /* eslint-disable */
 var scales = document.querySelectorAll('input[type=range]')
-
 // we need to use an array of comments from the database - this one is for testing only
-const test = ['Comment for 1', '', 'Comment for 3', 'Comment for 4', 'Comment for 5'];
-
-scales.forEach( (scale) => {
-    scale.addEventListener('click', function(){
-        var currentScale = `${this.id}`;
-        var commentBoxId = `result${currentScale.slice(currentScale.indexOf('-'))}`;
-
-        console.log(`the current scale is: ${currentScale}`);
-        console.log(`the comment box associated with the current scale has an id of ${commentBoxId}`);
+const test = ['No pain', '', '', '', '4 means I take some pain medication', '', '', '', 'Can\'t focus on anything but my pain', '', ''];
 
-        var commentBox = document.getElementById('commentBoxId'); //Not working 
-
+scales.forEach((scale) => {
+    scale.addEventListener('change', function () {
+        var currentScaleId = `${this.id}`;
+        var commentBoxId = `result${currentScaleId.slice(currentScaleId.indexOf('-'))}`;
+        var scaleNumberId = `${this.id}-number`;
+        var scaleNumber = document.querySelector(`#${scaleNumberId}`);
+        var commentBox = document.querySelector(`#${commentBoxId}`);
 
-
-        //commentBox.innerHTML = test[`${this.value}`];
-
-        // result.innerHTML = `the scale is on ${this.value} and the comment is ${arr[this.value-1]}`;
+        scaleNumber.textContent = `${this.value}`;
+        commentBox.textContent = test[this.value] === '' ? "Any comments you've saved will appear here as you move the scale" : `Hint: ${test[this.value]}`
     })
 })

src/controllers/addData.js

@@ -1,4 +1,4 @@
-const symptomsList = [{ symptom: 'fatigue' }, { symptom: 'dry skin' }];
+const symptomsList = [{ symptom: 'fatigue' }, { symptom: 'dandruff' }];
 const factorsList = [{ factor: 'water' }, { factor: 'sleep' }];
 
 

src/views/addData.hbs

@@ -3,22 +3,25 @@
 <h2>Symptoms</h2>
 <ul>
   {{#each symptomsList}}
-  <span>
-    <li>{{this.symptom}}</li>
-    {{!-- need to add icon at the end --}}
-    <button class="expand">E</button>
-    <input id="scale-{{this.symptom}}" type="range" min="1" max="10" value="5">
-    <p id="result-{{this.symptom}}"></p>
-  </span>
-
+  <div id="symptom-rating">
+    <span>
+      <li>{{this.symptom}}</li>
+      {{!-- need to add icon at the end --}}
+      <button class="expand">E</button>
+    </span>
+    <br>
+    <input id="scale-{{this.symptom}}" type="range" min="0" max="10" value="0" steps="1">
+    <span id="scale-{{this.symptom}}-number"></span>
+    <p id="result-{{this.symptom}}">Any comments you've saved will appear here as you move the scale</p>
+  </div>
   {{/each}}
 </ul>
 
 <h2>Factors</h2>
 
 <ul>
   {{#each factorsList}}
-  <span>
+  <span id="factors-rating">
     <li>{{this.factor}}</li>
     {{!-- need to add icon at the end --}}
     <button class="expand">E</button>