Responsive HTML-CSS-JS- Interactive pricing component solution

Community feedback

• 

  Elaine•11,360

  @elaineleung

  Posted almost 3 years ago

  Hi Hugo, I think you did a great job here with the range slider, and everything's working well for me. What's especially good is that I could use this with the tab key also, which makes this a great app for screen reader users.

  About the JS, I'd suggest using textContent instead of innerHTML since you only have plain text and no HTML to actually be parsed. The code does look a bit clunky right now with the switches and the repetition; what I'd do is, I'd try having all the info as an object instead, and then write a function to bring the object in. It will look something like this:

  const dataMap = { 
       "0" : {
          views: "10",
          unit: "K",
          price: 8 
       },
       "25" : {
          views: "50",
          unit: "K",
          price: 12 
       },
      "50" : {
       // info here
       },
       // ... complete the rest here
   }
  

  You can then use the following function in your event listeners and in other functions:

  function displayInfo (rangePosition, checked) {
      const info = dataMap[rangePosition]
      const price = checked ? info.price * 0.75 : info.price // this calculates the discount if "checked" is true
  
      views.textContent = info.views; 
      document.querySelector(".views-letter").textContent = info.unit; 
      price.textContent = price.toFixed(2).toString() 
  }
  

  You can experiment with it a bit, and see whether this can help you shorten the lines in your JS!

  02

  Marked as helpful