tod
/
odin-etch-a-sketch
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added paint space, painting on hover 

After 1 second the block goes white again
This commit is contained in:
NetMan 2024-01-09 20:07:08 +01:00
parent 191d4bb049
commit e6435e500e
3 changed files with 39 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -9,5 +9,8 @@
</head> </head>
<body> <body>
<h1>Sketchpad</h1> <h1>Sketchpad</h1>
<div id="container">
</div>
</body> </body>
</html> </html>

21
script.js
View File

@ -0,0 +1,21 @@
const container = document.querySelector("#container");
for (let i = 0; i < 16; i++) {
let flexbox = document.createElement("div");
flexbox.classList.add("flexbox");
for (let j = 0; j < 16; j++) {
let div = document.createElement('div');
div.classList.add("griddy");
flexbox.appendChild(div);
}
container.appendChild(flexbox);
}
let griddies = document.querySelectorAll(".griddy");
griddies.forEach(griddy => {
griddy.addEventListener("mouseover", (event) => {event.target.style.backgroundColor = "#000"});
griddy.addEventListener("mouseout", (event) => {
setTimeout(() => event.target.style.backgroundColor = "#fff", 1000);
});
})

15
style.css
View File

@ -0,0 +1,15 @@
#container {
width: 600px;
border: 1px solid #000;
}
.flexbox {
display: flex;
}
.griddy {
border: 1px solid #000;
/* padding: 10px; */
flex: 1;
aspect-ratio: 1 / 1;
}