Project: Etch-a-Sketch

Overview

The "Etch-a-Sketch" project is part of The Odin Project's Foundations course, designed as a web-based drawing application that allows users to draw by hovering over a grid with a customizable size. This project demonstrates key skills in HTML, CSS, and JavaScript, focusing on DOM manipulation, event handling, and dynamic styling.

Structure

odin-etch-a-sketch/
│
├── index.html
├── style.css
├── script.js
└── README.md

Demonstrated Skills

• HTML Structure: Used semantic HTML elements such as <main>, along with proper meta tags and document structure.
• CSS Styling: Styled the grid layout, button interactions, and hover effects.
• JavaScript Functionality: Implemented dynamic grid creation, random color generation, and opacity scaling on hover.
• Event Handling: Managed user interactions such as adjusting grid size and handling mouse hover effects over grid cells.
• DOM Manipulation: Generated and updated grid cells dynamically through JavaScript.

Acknowledgments

Special thanks to The Odin Project for providing the curriculum and inspiration to build this project.