TOIT Training

Build a Color Tool in Vanilla JavaScript

Build a Color Tool in Vanilla JavaScript
  • Overview
  • Curriculum
  • Reviews

 

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

  • 1 Sections
  • 20 Lessons
  • 0 Quizzes
  • 0m Duration
Expand All

Build a Color Tool in Vanilla JavaScript

20 Lessons 0 Quizzes
  • 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!

0

0 Ratings
5 Star 0%
4 Star 0%
3 Star 0%
2 Star 0%
1 Star 0%

Reviews

Free

Start Course

Retake Course

Are you sure you want to retake the course? This action will permanently delete all your progress in this course.

Course Includes

  • 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
  • Mathmin and Mathmax
  • HTML DOM style Property

Deleting Course Review

Are you sure? You can't restore this back

Course Access

This course is password protected. To access it please enter your password below:

Buy for group

Build a Color Tool in Vanilla JavaScript
No groups Found

You don't have any groups yet

Create a group and add group members. Sync Group(s)