Users should be able to:
- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- Use the slider and toggle to see prices for different page view numbers
That was one of the hardest challenges I had to take, implementing an accessible slider and customizing it was fairly hard. I used the 'output' tag for both -page views- and -months- to ensure that any changes happen when the slider moves the values will be displayed.
To customize the slide I had to add a couple of layouts on top of <input type=range> and make it transparent.
When it comes to style I tried to use both regular CSS (for the general style) and CSS modules (for styling components), I had to add some Webpack configuration to use both.
I would like to add some animation using Framer Motion. I am still new to React so maybe my current solution isn't the best, I will add some changes in the future while I still learning and practicing.
Some resources that helped me in this challenge:
- Live Site URL: Add live site URL here
Made with 💖 by ZINEB