Store TOP files in TOP folder

kemonprogrammer · kemonprogrammer · commit dd9aa082b9be · 2021-05-21T16:54:33.000+02:00
diff --git a/TOP version/index.html b/TOP version/index.html
@@ -0,0 +1,31 @@
+<!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 href="https://fonts.googleapis.com/css2?family=Roboto&amp;display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <h1>Etch a sketch</h1>
+    <div id="boxgrid"></div>
+    <button id="resolution">Change resolution</button><br>
+    <label for="colorChooser">Choose Colors</label>
+    <select name="colorColorDropdown" id="colorChooser">
+        <option value="bw">Black and White</option>
+        <option value="cl">Random Colors</option>
+    </select>
+
+
+    <!--
+        Add:
+    - "Resoultion: 16x16", to change grid size, with dropdown menu-->
+</body>
+
+<script src="main.js"></script>
+
+</html>
diff --git a/TOP version/main.js b/TOP version/main.js
@@ -0,0 +1,67 @@
+const boxGrid = document.getElementById("boxgrid");
+const button = document.getElementById("resolution");
+const colorChooser = document.getElementById("colorChooser");
+
+const gridWidth = 960;
+
+var random = function(number) {
+    // random number from 0 to number
+    return Math.floor(Math.random() * (number + 1));
+}
+
+
+var drawCanvas = function(boxesPerSide) {
+    for (let i = 1; i <= boxesPerSide; i++) {
+        for (let j = 1; j <= boxesPerSide; j++) {
+            const box = document.createElement("div");
+            box.classList.add("col" + j.toString());
+            box.classList.add("row" + i.toString());
+            box.classList.add("l100");
+
+            boxGrid.appendChild(box);
+
+            box.addEventListener("mouseenter", () => {
+                if (colorChooser.value === "cl") {
+                    box.style.backgroundColor = `hsl(${random(360)}, ${random(100)}%, ${random(100)}%)`;
+                } else {
+                    // pick lXX for lightness value
+                    let className = String(box.classList);
+                    let lightness = +className.slice(className.lastIndexOf("l") + 1, className.length);
+                    if (lightness > 0) {
+                        box.classList.remove(`l${lightness}`);
+                        lightness -= 10;
+                        box.classList.add(`l${lightness}`);
+                    }
+                    box.style.backgroundColor = `hsl(0, 0%, ${lightness}%)`;
+                }
+            });
+        }
+    }
+    const boxWidth = gridWidth / boxesPerSide;
+
+    boxGrid.style.display = "grid";
+    boxGrid.style.gridTemplate = `repeat(${boxesPerSide}, ${boxWidth}px) / repeat(${boxesPerSide}, ${boxWidth}px)`;
+}
+
+var clearCanvas = function() {
+    boxGrid.textContent = "";
+    boxGrid.removeAttribute("style");
+}
+
+var askResolution = () => {
+    const res = prompt("Enter resolution size", "10");
+    if (res === null) return;
+    if (res > 100) {
+        alert("Number too big, max: 100");
+        askResolution();
+        return;
+    }
+    clearCanvas();
+    drawCanvas(res);
+}
+
+
+button.addEventListener("click", askResolution);
+
+
+drawCanvas(16);
diff --git a/TOP version/style.css b/TOP version/style.css
@@ -0,0 +1,8 @@
+body {
+    margin: 0;
+    font-family: 'Roboto', 'Open Sans', sans-serif;
+}
+
+#boxgrid div {
+    background-color: rgb(240, 248, 255);
+}
