Build a cool color lighten/darken tool from scratch and sharpen up your HTML, CSS and vanilla JavaScript skills along the way!
Intermediate
Build a Color Tool in Vanilla JavaScript
Curriculum
- 1 Section
- 20 Lessons
- 1h Duration
Build a Color Tool in Vanilla JavaScript
20 Lessons
- Course Intro
- Create the Base Layout
- Create the Base Styling
- Check for Valid Hex Color in JavaScript
- Display Color From User Hex Input
- Convert Hex Color to RGB
- Convert RGB Color To Hex – Challenge Requirements
- Convert RGB To Hex – Challenge Solution
- Display Percentage from Slider
- Alter Color By Percentage
- Ensure Hex Values Stay Between 0 and 255
- Alter Color Based On User Input
- Create Custom Toggle Button Layout
- Create Custom Toggle Button Styling
- Create Custom Toggle Functionality in JavaScript
- Alter Color Based on Lighten/Darken Toggle State
- Input Reset Functionality – Challenge Requirements
- Add Color Reset Functionality – Challenge Solution
- Course Outro
- Congratulations on Completing Build a Color Tool in Vanilla JavaScript!
