Task4-Cognifyz

🎨 Cognifyz Internship - Task 4: Interactive Color Buttons

📌 Project Overview

This project is part of my Cognifyz Technologies Front-End Development Internship.
It demonstrates an interactive background color changer built with HTML, CSS, and JavaScript, allowing users to change the background color using buttons and keyboard shortcuts.

📂 Files in This Repository

• index.html → Main HTML structure of the project
• styles.css → CSS for styling buttons, layout, and dark mode
• script.js → JavaScript for interactive color-changing functionality

🛠️ Features Implemented

🔘 Buttons

• Cycle Colors – Switches background through a predefined palette
• Random Color – Generates a random background color
• Reset Color – Resets background to the default color
• Dark/Light Mode – Toggles between dark and light themes

🎨 Color Features

• Displays current background color in hex format
• Tracks and displays number of color changes
• Shows a history of recently used colors with clickable swatches

⌨ Keyboard Shortcuts

• C → Cycle Colors
• R → Random Color
• D → Dark Mode
• ESC → Reset

📱 Responsive Design

• Fully responsive layout for desktop, tablet, and mobile
• Styled with gradients, hover effects, and animations

📸 Preview

(You can add a screenshot or GIF demo here)

📖 Learning Outcomes

Through this task, I learned:

• Managing DOM manipulation in JavaScript
• Using arrays and event listeners for interactive behavior
• Implementing CSS transitions and animations
• Building dark/light mode toggle functionality
• Handling keyboard events for shortcuts

✅ Task Status

• Task 4: ✔ Completed

---

💡 Next Step: Enhance with localStorage to save user-selected colors across page reloads.