DEV Community

Krishna
Krishna

Posted on • Edited on

🎯 Day 2 - Built a Color Picker Using JavaScript Events

Hey everyone! 👋

Today is Day 2 of my #100DaysOfCode challenge.

I worked on a Color Picker project to understand how JavaScript handles DOM Events and dynamic styling.

📌 What I did:

Displayed a list of color buttons with hex codes.

On clicking a color:

The background color of the page changes.

The selected color code is displayed dynamically.

The text content also changes to reflect the selected code.

🔍 I used:

HTML, CSS, and JavaScript

addEventListener() to handle click events

style.backgroundColor and textContent to update the UI in real-time

🖼️ Here's a screenshot of the output:

💡 This helped me reinforce the concept of event handling and DOM manipulation in JavaScript.

👉 Let me know what you think or if you’ve built something similar!

Output:-
https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nxh203641kdasdprjlu6.png

100DaysOfCode #CodeNewbie #DevJourney #CodingLife #CodingCommunity #LearnToCode #WebDevelopment #JavaScript #FullStackDevelopment #JavaScript #LearningJavaScript #JS #JSDevelopment #JavaScriptForBeginners #JavaScriptJourney #JavaScriptCoding #JavaScriptDevelopment #FrontendDevelopment #WebDev #CodeEveryday #100DaysOfLearning #Day2

Top comments (0)