Build a color tool in vanilla JavaScript

Unlock Course Get started!

Join 1040 other students

Sign in to get

Access to 30+ free courses

New courses added monthly

Weekly coding challenge

Join a friendly community

Subscribe to access!

Subscribe to access to this course and ALL other courses. You get a 30-day money-back guarantee, no questions asked.

Subscription includes

All courses, bootcamps, paths

100s of coding challenges

Certificates of completion

Exclusive Pro members chat

New courses monthly

with James Q Quick

1040 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 20 interactive screencasts

Build a color tool in vanilla JavaScript

20 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

20. Congratulations on completing Build a color tool in vanilla JavaScript! 🎉

Meet your teacher

The course creator

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!