https://github.com/dak79/odin-etch-a-sketch
DOM manipulation
https://github.com/dak79/odin-etch-a-sketch
css git html javascript
Last synced: 2 months ago
JSON representation
DOM manipulation
- Host: GitHub
- URL: https://github.com/dak79/odin-etch-a-sketch
- Owner: dak79
- Created: 2022-02-23T08:41:33.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-05-26T13:11:55.000Z (about 3 years ago)
- Last Synced: 2025-02-13T19:40:43.809Z (over 1 year ago)
- Topics: css, git, html, javascript
- Language: JavaScript
- Homepage:
- Size: 12.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Etch-a-Sketch
## Live Preview
[Etch-a-Sketch](https://dak79.github.io/odin-etch-a-sketch/)
## Description
This project is part of
[The Odin Project - Foundations Path](https://www.theodinproject.com/lessons/foundations-etch-a-sketch).
The goal of this project is to learn about DOM manipulation and a proper use of
Google Search and net resources.
## Technologies
- HTML
- CSS
- JavaScript
- Git
## Assignment
- Create a webpage with a 16x16 grid of square divs.
- Create the divs using JavaScript.
- It’s best to put your grid squares inside another “container” div. There are
several different ways to make the divs appear as a grid (versus just one on
each line). Feel free to use any or play with each of them: float/clear,
inline-block, Flexbox, CSS Grid.
- There are multiple ways to change the color of the divs, including: adding a
new class to the div or changing the div’s background color using JavaScript.
- Add a button to the top of the screen that will send the user a pop-up asking
for the number of squares per side for the new grid. Once entered, the
existing grid should be removed and a new grid should be generated in the same
total space as before (e.g. 960px wide) so that you have got a new sketch pad.
- Research button tags in HTML and how you can make a JavaScript function run
when one is clicked. Also check out prompts.
- You should be able to enter 64 and have a brand new 64x64 grid pop up without
changing the total amount of pixels used.
- Push your project to GitHub!
- Extra Credit: Instead of just changing the color of a square from black to
white (for example), have each pass through with the mouse change it to a
completely random RGB value. Then try having each pass just add another 10% of
black to it so that only after 10 passes is the square completely black.