did to some extent

and-is · Apr 30, 2024 · 0ef3f5f · 0ef3f5f
1 parent 23e1027
commit 0ef3f5f
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Etch-a-Sketch</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <button class="reset">New Grid</button>
+    <div class="container"></div>
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,39 @@
+const cont = document.querySelector(".container");
+
+function getRandomColor() {
+  const letters = "0123456789ABCDEF";
+  let color = "#";
+  for (let i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+  return color;
+}
+
+for (let i = 0; i < 16; i++) {
+  const bhado = document.createElement("div");
+  bhado.classList.add("bhaado");
+  cont.appendChild(bhado);
+  bhado.style = "width: 25%; height: 25%;";
+  bhado.addEventListener("mouseenter", () => {
+    bhado.style.backgroundColor = getRandomColor();
+  });
+}
+let n = 4;
+const btn = document.querySelector("button");
+btn.addEventListener("click", () => {
+  let first;
+  for (let i = 0; i < n * n; i++) {
+    first = cont.firstChild;
+    first.remove();
+  }
+  n = prompt("How many columns/rows you wish to have? ");
+  for (let i = 0; i < n * n; i++) {
+    const bhado = document.createElement("div");
+    bhado.classList.add("bhaado");
+    cont.appendChild(bhado);
+    bhado.style = `width: ${100 / n}%; height: ${100 / n}%;`;
+    bhado.addEventListener("mouseenter", () => {
+      bhado.style.backgroundColor = getRandomColor();
+    });
+  }
+});
diff --git a/styles.css b/styles.css
@@ -0,0 +1,33 @@
+body{
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.bhaado:hover{
+    background-color: red;
+}
+.container{
+    display: flex;
+    flex-wrap: wrap;
+    width: 80vh;
+    height: 80vh;
+    border: 2px solid black;
+}
+.reset{
+    margin: 20px;
+    width: 100px;
+    height: 40px;
+    color: white;
+    background-color: black;
+    border-radius: 10px;
+    font-size: 15px;
+    font-weight: bold;
+    border: none;
+    cursor: pointer;
+}
+.reset:hover{
+    color: white;
+    background-color: #333333;
+}