https://github.com/top-submissions/foundations-etch-a-sketch
https://github.com/top-submissions/foundations-etch-a-sketch
beginner-project css css-grid dom-manipulation drawing-app dynamic-elements etch-a-sketch event-listeners foundations-path frontend fun-project hover-effects html interactive-ui javascript mini-project odin-project responsive-design student-project web-development
Last synced: 11 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/top-submissions/foundations-etch-a-sketch
- Owner: top-submissions
- Created: 2025-07-15T01:06:51.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-12-24T23:33:26.000Z (6 months ago)
- Last Synced: 2026-04-03T13:54:15.997Z (2 months ago)
- Topics: beginner-project, css, css-grid, dom-manipulation, drawing-app, dynamic-elements, etch-a-sketch, event-listeners, foundations-path, frontend, fun-project, hover-effects, html, interactive-ui, javascript, mini-project, odin-project, responsive-design, student-project, web-development
- Language: JavaScript
- Homepage:
- Size: 12.7 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Etch-A-Sketch
A **dynamic Etch-A-Sketch grid drawing project** built with **HTML, CSS, and JavaScript**
as part of **The Odin Project – Foundations Path**.
This project allows users to create a customizable grid and draw by hovering over cells. The project reinforces DOM manipulation, event handling, and interactive UI development.
---
## 🚀 Live Demo
👉 https://top-submissions.github.io/foundations-etch-a-sketch/
---
## 📋 Project Overview
- Users can specify the **number of rows and columns** to generate a grid
- Hovering over grid cells **changes their color randomly**
- Buttons to **clear the grid** or **load a new grid**
- Responsive and interactive design for better user experience
This project focuses on **JavaScript logic, DOM manipulation, and CSS grid layout**.
---
## ✨ Features
- Customizable grid dimensions
- Interactive drawing effect on hover
- Clear and reload grid functionality
- Responsive layout using CSS Grid
- Randomized cell coloring for visual feedback
---
## 🛠 Technologies Used
- **HTML5:** Structure for grid container and controls
- **CSS3:** Grid layout, styling, responsive design
- **JavaScript (ES6):** DOM selection, event listeners, and dynamic grid generation
---
## 📖 How It Works
1. User inputs the number of rows/columns
2. Clicking **Load Grid** generates the grid dynamically
3. Each cell has an event listener for hover, changing its color randomly
4. **Clear Grid** resets the cell colors
5. JavaScript ensures proper grid layout and spacing
---
## 📚 Learning Outcomes
* Working with **CSS Grid** and dynamic layouts
* Adding and managing **DOM elements dynamically**
* Implementing **hover effects** and event listeners in JavaScript
* Managing state for interactive web applications
---
## 👤 Author
**MatimotTheTimoters**
GitHub: [https://github.com/Chonky_Seal](https://github.com/Chonky_Seal)