Build a Color Tool in Vanilla JavaScript

Unlock Course Get started!

Join 3851 other students

Log in to get

Access to all our free courses

Interactive hands-on content

100s of code challenges

Join a friendly community

Subscribe to access!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

with James Q Quick

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 lessons1 hour 22 min

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! 🎉

You'll learn

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

Math.min and Math.max

HTML DOM style Property

Prerequisites

Before taking this course, you should have a solid understanding of HTML, CSS and JavaScript.

Learn JavaScript

172 lessons | 8 hours 24 min

with Per Harald Borgen

Per Harald Borgen

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!

F to the A oracle

to the Q

Who is this course for?

This is the perfect course for anyone who wants to practice their JavaScript by building a fun project.