Build a cool color lighten/darken tool from scratch and sharpen up your HTML, CSS and vanilla JavaScript skills along the way!
Overview
COURSE DIFFICULTY
Skills Learned
After completing this online training course, students will be able to:
Check for a valid hex color
Convert hex to RGB
Display percentage from slider
Alter color by percentage
Create a toggle
Reset functionality
parseInt
textContent
Mathmin and Mathmax
HTML DOM style Property
01. Build a Color Tool in Vanilla JavaScript
- 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!
SKILLS LEARNED
Skills Learned
After completing this online training course, students will be able to:
Check for a valid hex color
Convert hex to RGB
Display percentage from slider
Alter color by percentage
Create a toggle
Reset functionality
parseInt
textContent
Mathmin and Mathmax
HTML DOM style Property
COURSE OUTLINE
01. Build a Color Tool in Vanilla JavaScript
- 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!
