frontendMentor-challenge-interactivePricingComponent.github.io

This is one of the Challenges from Frontend Mentor

Except the codes, all colors and design are contributed by Frontend Mentor).

click to see result

💡 What do I learn from this challenge?

• pratically using prototype and objects to write Javascript.
• custom the slider (including slider thumb) through css

🚩 What I'd like to improve but haven't found the solutions?

• I am not too sure how 'this' work and when to use it is better. By creating script.v2, I felt my code could be much cleaner.
• I am unable to change the discount text bewteen "-25%" and "25% discount" while I resize the screen, but I can only use a function to check the screen size when click on the toggle.

Front-end Style Guide

Layout

The designs were created to the following widths:

• Mobile: 375px
• Desktop: 1440px

Colors

Primary

• Soft Cyan (Full Slider Bar): hsl(174, 77%, 80%)
• Strong Cyan (Slider Backround): hsl(174, 86%, 45%)
• Light Grayish Red (Discount Background): hsl(14, 92%, 95%)
• Light Red (Discount Text): hsl(15, 100%, 70%)
• Pale Blue (CTA Text): hsl(226, 100%, 87%)

Neutral

• White (Pricing Component Background): hsl (0, 0%, 100%)
• Very Pale Blue (Main Background): hsl(230, 100%, 99%)
• Light Grayish Blue (Empty Slider Bar): hsl(224, 65%, 95%)
• Light Grayish Blue (Toggle Background): hsl(223, 50%, 87%)
• Grayish Blue (Text): hsl(225, 20%, 60%)
• Dark Desaturated Blue (Text & CTA Background): hsl(227, 35%, 25%)

Typography

Body Copy

• Font size (Introductory Paragraph): 15px

Font

• Family: Manrope
• Weights: 600, 800