Interactive pricing card made with HTML5/CSS3 and Vanilla Javascript

Community feedback

• 

  Fazza Razaq Amiarso•2,320

  @fazzaamiarso

  Posted almost 3 years ago

  Hello Nneoma! Great work!

  You can refactor your code like this

  function applyDiscount(discount){
    price.textContent = discount;
    timeout();
  }
  
  function discountToggle() {
    checkboxSlide.addEventListener("click", () => {
      if (checkboxSlide.checked === true) {
        if (price.textContent == amount[0]) applyDiscount(discount[0]) 
        else if (price.textContent == amount[1]) applyDiscount(discount[1])
        else if (price.textContent == amount[2]) applyDiscount(discount[2])
        else if (price.textContent == amount[3]) applyDiscount(discount[3])
        else applyDiscount(discount[4])
      } else {
        price.textContent = rangeSlide.value;
      }
    });
  }
  
  function updatePrice(amount, views){
    price.textContent = price
    pageviews.textContent = views;
  }
  
  function rangeOfViews() {
    // range slide listener
    rangeSlide.addEventListener("input", (e) => {
      rangeValue.innerHTML = e.target.value;
      if (rangeSlide.value === 10000 || rangeSlide.value < 50000) updatePrice(amount[0], views[0])
      else if (rangeSlide.value === 50000 || rangeSlide.value < 100000) updatePrice(amount[1], views[1]);
      else if (rangeSlide.value === 100000 || rangeSlide.value < 500000) updatePrice(amount[2], views[2]);
      else if (rangeSlide.value === 500000 || rangeSlide.value < 1000000) updatePrice(amount[3], views[3]);
      else updatePrice(amount[4], views[4]);
    });
  }
  
  

  I hope it helps! Cheers!

  11

  Marked as helpful