Build a Color Tool in Vanilla JavaScript

0 (0)

Duration

1h

Students

0

Level

Intermediate

Last Updated

February 27, 2025

Build a Color Tool in Vanilla JavaScript

Overview
Curriculum
Reviews

Build a cool color lighten/darken tool from scratch and sharpen up your HTML, CSS and vanilla JavaScript skills along the way!

1 Sections
20 Lessons
1h Duration

Expand All

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!

0

0 Ratings

5 Star 0%

4 Star 0%

3 Star 0%

2 Star 0%

1 Star 0%

Reviews

Free

Course Includes

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