Challenge Files

Your 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 (details provided below)

Here are the different page view ranges and the corresponding monthly price totals:

• 10K pageviews / $8 per month
• 50K pageviews / $12 per month
• 100K pageviews / $16 per month
• 500k pageviews / $24 per month
• 1M pageviews / $36 per month

If the visitor switches the toggle to yearly billing, a 25% discount should be applied to all prices.

• id's (#) are used for any element targeted by JS
• body has a two background images
• the ipc card has a shadow
• the slider button has a coloured shadow
• the slider price range elements are re-ordered on larger screen size so need to keep separate References
• the discount value is a pill
• give the ipc-Card_cta a top border, full width of card

1. how to handle discount pricing?
   • JS to modify cost if yearly billing selected
   • JS to update the views and price when the slider is moved
2. how to create the slider?
   • put together using ideas from tutorials and examples (see References)
     • gc-Slider class, JS used to update gradient colour of rail
     • works in 3 modern browsers: Firefox, Chrome, Edge
       • required some code duplication as needed two polyfill selectors: -moz-range-thumb and -webkit-slider-thumb
3. how to create the toggle switch?
   • put together using ideas from tutorials (see References)
   • used a pseudo-element and a data-* attribute to hide and show the word discount in the billing section based on screen size
4. CTA - had to load the icon-check.svg's in the HTML in order to position as per the design, originally tried using a ul but each item would have needed custom positioning anyway, making CSS code messier

References:

For the slider:

• CSS Custom Properties - Dynamic Changes with and without Javascript
• Customizing Cross-Browser Range Inputs with CSS and Javascript
• MDN: <input type="range">
• Style Input Range

For the toggle switch:

• Toggle Button Switches
• Theme Switching Toggle
• Toggle switch

For hiding/showing the word 'discount':

• How to change text in CSS media query