me/js-etch-a-sketch
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

final

Browse source
This commit is contained in:
ak 2023-05-04 12:13:43 -07:00
commit 28af092b68
4 changed files with 109 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md Normal file
View file

@ -0,0 +1,2 @@
# js-etch-a-sketch
This project is a proof-of-concept etch-a-sketch approximation made in Javascript. Takes user input to define or redefine grid size, and makes each cell 10% darker each time it's hovered over.

16
index.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Etch-a-Sketch</title>
<link rel = "stylesheet" type = "text/css" href = "style.css">
</head>
<body>
<center>
<div id="container"></div>
<script src="main.js"></script>
</center>
</body>
</html>

69
main.js Normal file
View file

@ -0,0 +1,69 @@
const container = document.querySelector("#container");
/* header */
const header = document.createElement('h1');
header.textContent = "Etch-a-sketch";
header.setAttribute('style', 'padding: 10px;');
container.appendChild(header);
/* button to change grid dimensions */
const dimensionChanger = document.createElement('button');
dimensionChanger.textContent = "Change grid size";
dimensionChanger.setAttribute('style', 'margin-bottom: 15px; margin-right: 20px;');
container.appendChild(dimensionChanger);
dimensionChanger.onclick = () => {
/* get user inputs */
let input = prompt("Enter the number of squares per side for new grid");
makeGrid(parseInt(input), parseInt(input));
}
/* reset button */
const resetButton = document.createElement('button');
resetButton.textContent = "Reset";
container.appendChild(resetButton);
resetButton.onclick = () => location.reload();
/* make grid container */
const gridContainer = document.createElement('div');
gridContainer.setAttribute("id", "griddiv");
container.appendChild(gridContainer);
/* make each cell 10% darker on mouseover */
function darkenCell() {
/* get current rgba of cell */
currentValue = getComputedStyle(this).getPropertyValue("background-color");
/* regex match for number values only */
const values = currentValue.match(/[\d.]+/g);
/* CSS doesn't output an alpha value of 1 but rather removes the alpha value entirely at 1.
do nothing if there is no alpha value (only three digits declared in rgba) */
if (values.length === 3) {
return;
}
else {
/* assigns newAlpha variable to sum of old transparency
number and 0.1 (10% darker) */
const newAlpha = parseFloat(values[3]) + 0.1;
/* increments cell color */
this.style.backgroundColor = 'rgba(0, 0, 0, ' + newAlpha + ')';
}
}
function makeGrid(rows, cols) {
/* wipe existing divs */
while(gridContainer.firstChild) {
gridContainer.removeChild(gridContainer.firstChild);
}
/* assign global CSS vars to ones passed by user */
gridContainer.style.setProperty('--grid-rows', rows);
gridContainer.style.setProperty('--grid-cols', cols);
/* make the cells */
for (i = 0; i < (rows * cols); i++) {
let cell = document.createElement("div");
gridContainer.appendChild(cell).className = "grid-item";
/* add listeners for mouseover */
cell.addEventListener('mouseover', darkenCell);
};
};
/* initialize to a default of 16x16 grid */
makeGrid(16, 16);

22
style.css Normal file
View file

@ -0,0 +1,22 @@
*{
padding: 0;
margin: 0;
}
:root {
--grid-cols: 1;
--grid-rows: 1;
}
#griddiv {
display: grid;
grid-template-rows: repeat(var(--grid-rows), auto);
grid-template-columns: repeat(var(--grid-cols), 1fr);
width: 500px;
height: 500px;
align-items: stretch;
}
.grid-item {
border: 1px solid #000000;
text-align: center;
}