scrimba
Build a Color Tool in Vanilla JavaScript
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Build a Color Tool in Vanilla JavaScript

Enroll for freeGet started!

Join 5322 other students

Log in to get

Access to all our free courses
Interactive hands-on content
100s of code challenges
Join a friendly community
Enroll for free
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 and career paths
100s of coding challenges
Certificates of completion
Exclusive Pro members chat
Get started
Course Intro
Go to lesson
The course creator James Q Quick

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!

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

man

Prerequisites

Before taking this course, you should have a solid understanding of HTML, CSS and 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!

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.