Play together in Etch-a-Sketch

Oksana.Kolisnyk.22y.0 — Mon, 25 Mar 2024 13:12:57 +0000

This web development project,
inspired by The Odin Project's Etch-A-Sketch assignment,

focuses on creating a dynamic grid of square divs
using JavaScript for DOM manipulation.

The project requirements include implementing a hover effect to change the appearance of squares as the mouse moves over them, and adding a clear button to reset the grid and prompt the user for a new grid size.

The layout utilizes Flexbox and CSS Grid for element arrangement, with attention to centering elements and ensuring proper sizing of the grid container.

JavaScript functions handle grid creation, hover effects, and grid reset functionality.

Additional styling enhancements were made to improve the project's visual appeal.

Key Features:

Dynamic grid generation based on user input
Hover effect to change square appearance
The clear button to reset the grid
Responsive layout using Flexbox and CSS Grid
JavaScript functions for grid manipulation

Overall, the project provides a hands-on opportunity to practice DOM manipulation, event handling, and responsive web design techniques, making it an engaging learning experience for web development beginners.

I want to share with you my work:
my Live Demo Code
my GitHub Code

Thanks for reading😊

DEV Community: Oksana.Kolisnyk.22y.0

Play together in Etch-a-Sketch