Find the perfect coding resourcesLearn more

Build a Color Tool in Vanilla JavaScript

ScrimbaScrimba
Recommended
Meet Your Instructor
James Q Quick avatar

James Q Quick

Instructor

Web Developer, Speaker, and Teacher. JavaScript instructor at Scrimba.

1h 22m

Completion

Certificate included

Format

Interactive coding

Free

What You'll Learn

Build a complete color lighten/darken tool from scratch

Create HTML structure for interactive applications

Style applications with CSS

Validate hex color inputs in JavaScript

Convert between hex and RGB color formats

Overview

Build a cool color lighten/darken tool from scratch and sharpen up your HTML, CSS and vanilla JavaScript skills along the way! This course hones your HTML, CSS and vanilla JavaScript skills by building a color lighten/darken tool. Throughout the 19 lessons, you'll solve several interactive challenges which will test your coding knowledge and let you in on a few handy hints along the way. You'll build out the skeleton HTML, style it with CSS and add a range of interactive features using vanilla JS - no frameworks required! By the end of the course, you'll have built a large project which will look great on your portfolio or pushed to your Github profile - so dive right in and get ready for a colour-switching fun rollercoaster!

Table of Contents
1
Course Intro5:27
2
Create the Base Layout4:53
3
Create the Base Styling5:28
4
Check for Valid Hex Color in JavaScript5:17
5
Display Color From User Hex Input4:18
6
Convert Hex Color to RGB6:46
7
Convert RGB Color To Hex - Challenge Requirements2:35
8
Convert RGB To Hex - Challenge Solution3:44
9
Display Percentage from Slider3:07
10
Alter Color By Percentage5:23
11
Ensure Hex Values Stay Between 0 and 2554:22
12
Alter Color Based On User Input6:12
13
Create Custom Toggle Button Layout3:29
14
Create Custom Toggle Button Styling5:07
15
Create Custom Toggle Functionality in JavaScript4:36
16
Alter Color Based on Lighten/Darken Toggle State3:39
17
Input Reset Functionality - Challenge Requirements1:51
18
Add Color Reset Functionality - Challenge Solution3:04
19
Course Outro2:14
20
Congratulations on completing Build a color tool in vanilla JavaScript!1:02

Share Your Experience

Sign in to leave a review and help others

No reviews yet. Be the first to review!