Build a color tool in vanilla JavaScript

Unlock Course Get started!

Join 429 other students

Sign in to get

Access to 30+ free courses

New courses added monthly

Weekly coding challenges

Huge discord community

Exclusive chat access

Subscribe to access!Black Friday discount

Get access to this course and ALL other Scrimba courses at great value. Our 30-day money back guarantee makes this risk free for you.

Career Path includes

75+ hours of content

100s of coding challenges

Exclusive Study Group access

HTML, CSS, JS & React

Getting Hired section

30-day money-back guarantee

Subscribe now!62% covid discountSubscribe to access with 62% covid discount.

with James Q Quick

429 students enrolled

Course level: Intermediate

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

What's inside

This course contains 19 interactive screencasts

▼

Build a color tool in vanilla JavaScript

19 lessons - 1 hour

1. Course Intro

2. Create the Base Layout

3. Create the Base Styling

4. Check for Valid Hex Color in JavaScript

5. Display Color From User Hex Input

6. Convert Hex Color to RGB

7. Convert RGB Color To Hex - Challenge Requirements

8. Convert RGB To Hex - Challenge Solution

9. Display Percentage from Slider

10. Alter Color By Percentage

11. Ensure Hex Values Stay Between 0 and 255

12. Alter Color Based On User Input

13. Create Custom Toggle Button Layout

14. Create Custom Toggle Button Styling

15. Create Custom Toggle Functionality in JavaScript

16. Alter Color Based on Lighten/Darken Toggle State

17. Input Reset Functionality - Challenge Requirements

18. Add Color Reset Functionality - Challenge Solution

19. Course Outro

The course creator

Meet your teacher

James Q Quick

Web Developer, Speaker, and Teacher.

Follow me on twitter

Why this course rocks

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!

Join the community!

Learning alone can be lonely. Click here to join our Discord server and connect with other Scrimba learners!