Responsive HTML-CSS-JS- Interactive pricing component solution

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 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!

  Marked as helpful

  0

  ---

  

  Hugo•430

  @HugoMoncadaPosted over 2 years ago

  @elaineleung Thank you very much for taking time and comment on my solution 😁. Yes you're right, an object would be a better way to manage everything, it can fix much of the repetitive code that I have here.

  Hope you can comment and give me feedback with future solutions as well.
  Thanks again.

  1

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @HugoMoncada No problem Hugo, happy to help 🙂

  0