Skip to content
Submitted over 2 years ago

Interactive Pricing Component - Using React and SCSS

Tyler•330
@tylermaks
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive pricing component
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hi all,

Here is my first "Junior" challenge solution, I'm excited to be seeing some progress! It was much easier this time for me to make the component responsive and to use State with React. That said, any tips on making my code cleaner is appreciated!

Thanks, -Tyler

Community feedback

  • markus•2,250
    @markuslewinPosted over 2 years ago

    This comment was deleted about 2 years ago

    0
    Tyler•330
    @tylermaksPosted over 2 years ago

    @markuslewin thanks so much for the feedback!

    I tried implementing your comments by using e.target.value to replace getElementById, and including a position state to change the inline styles of the slider element. The updated handleInput function is below:

    const handleInput = (e) =>{
      let pricesArr = [8,12,16,24,36]
      let viewArr = ["10K", "50K", "100K", "500K", "1M"]
      setPrice(pricesArr[e.target.value])
      setViews(viewArr[e.target.value])
      setPosition(e.target.value)
  }

    Does this make my solution a little cleaner? Thanks again!

    -Tyler

    1
    Tyler•330
    @tylermaksPosted over 2 years ago

    @markuslewin thanks again for the feedback, I really appreciate it!

    I completely missed the redundancies! I've refactored my code based on your comments. I'll read through the documentation and keep an eye out on future projects. Thanks again!

    -Tyler

    1

Please log in to post a comment

Log in with GitHub

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