Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive pricing card made with HTML5/CSS3 and Vanilla Javascript

#accessibility#bem
Nneoma Njoku• 1,210

@SatellitePeace

Desktop design screenshot for the Interactive pricing component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I found it a bit hard to apply the right Javascript logic to get the checkbox working

  • Though the checkbox functionality works the UX is not particularly friendly

  • i also feel like i wrote too many lines of code for something that should have less code and advice on how i can refactor my javascript code is welcome

Community feedback

Fazza Razaq Amiarso• 2,360

@fazzaamiarso

Posted

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!

Marked as helpful

1

Nneoma Njoku• 1,210

@SatellitePeace

Posted

@fazzaamiarso Thank you it helps

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord