Build a Color Tool in Vanilla JavaScript
Build a cool color lighten/darken tool from scratch and sharpen up your HTML, CSS and vanilla JavaScript skills along the way!
82 min
Content
About
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! 🎉
Certificate of Completion