Black Friday 2024: 25+ Ways to Save on Online Learning

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

Go to class Write review

Overview

Build a cool color lighten/darken tool from scratch and sharpen up your HTML, CSS and vanilla JavaScript skills along the way!
  • 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

Syllabus

  • Build a Color Tool in Vanilla JavaScript
    • 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! 🎉

Reviews

Start your review of Build a Color Tool in Vanilla JavaScript

Go to class

Never Stop Learning.

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

Sign up for free
Someone learning on their laptop while sitting on the floor.