Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Scrimba

Build a Color Tool in Vanilla JavaScript

via Scrimba

Overview

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!

Syllabus

  • Course Intro
  • Create the Base Layout
  • Create the Base Styling
  • Check for Valid Hex Color in JavaScript
  • Display Color From User Hex Input
  • Convert Hex Color to RGB
  • Convert RGB Color To Hex - Challenge Requirements
  • Convert RGB To Hex - Challenge Solution
  • Display Percentage from Slider
  • Alter Color By Percentage
  • Ensure Hex Values Stay Between 0 and 255
  • Alter Color Based On User Input
  • Create Custom Toggle Button Layout
  • Create Custom Toggle Button Styling
  • Create Custom Toggle Functionality in JavaScript
  • Alter Color Based on Lighten/Darken Toggle State
  • Input Reset Functionality - Challenge Requirements
  • Add Color Reset Functionality - Challenge Solution
  • Course Outro
  • Congratulations on completing Build a color tool in vanilla JavaScript! 🎉

Reviews

Start your review of Build a Color Tool in Vanilla JavaScript

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.