Build a Color Tool in Vanilla JavaScript

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

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