feat: Initial commit - Basic Etch-a-Sketch functionality

johan2160 · Mar 19, 2024 · 9644d7d · 9644d7d
commit 9644d7d
Show file tree

Hide file tree

Showing 3 changed files with 203 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,36 @@
+<!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="style.css" />
+  </head>
+  <body>
+    <main>
+      <section class="content">
+        <h1>Etch-a-Sketch</h1>
+        <div class="flex">
+          <div class="pickcolor-container">
+            <label for="pickcolor-btn" class="label-txt">Pick a color: </label>
+            <input type="color" class="pickcolor-btn" id="pickcolor-btn" />
+          </div>
+          <div class="grid-selection-container">
+            <label for="grid-selection" id="grid-selection-txt"></label>
+            <input
+              type="range"
+              id="grid-selection"
+              min="1"
+              value="16"
+              max="64"
+            />
+          </div>
+          <button class="reset-btn">Reset</button>
+        </div>
+
+        <div class="container"></div>
+      </section>
+    </main>
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,57 @@
+const container = document.querySelector(".container");
+const inputColor = document.querySelector(".pickcolor-btn");
+const gridRange = document.querySelector("#grid-selection");
+const gridRangeText = document.querySelector("#grid-selection-txt");
+const resetBtn = document.querySelector(".reset-btn");
+let numberOfSquares = gridRange.value;
+let squareColor;
+
+gridRangeText.innerText = `${gridRange.value} x ${gridRange.value}`;
+
+const generateGrid = () => {
+  const containerWidth = 550;
+  const squarePerimeter = containerWidth / numberOfSquares;
+
+  for (let i = 1; i <= numberOfSquares; i++) {
+    const row = document.createElement("div");
+    row.classList.add("row");
+    container.appendChild(row);
+
+    for (let j = 1; j <= numberOfSquares; j++) {
+      const item = document.createElement("div");
+      item.classList.add("item");
+      item.style.width = `${squarePerimeter}px`;
+      item.style.height = `${squarePerimeter}px`;
+      row.appendChild(item);
+
+      item.addEventListener("mouseover", () => {
+        item.style.backgroundColor = squareColor;
+      });
+    }
+  }
+};
+
+generateGrid();
+
+const deleteCurrentGrid = () => {
+  while (container.firstChild) {
+    container.removeChild(container.firstChild);
+  }
+};
+
+const regenerateGrid = () => {
+  deleteCurrentGrid();
+  numberOfSquares = gridRange.value;
+  generateGrid();
+};
+
+gridRange.addEventListener("change", () => {
+  gridRangeText.innerText = `${gridRange.value} x ${gridRange.value}`;
+  regenerateGrid();
+});
+
+inputColor.addEventListener("change", () => {
+  squareColor = inputColor.value;
+});
+
+resetBtn.addEventListener("click", regenerateGrid);
diff --git a/style.css b/style.css
@@ -0,0 +1,110 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  line-height: 1.5;
+}
+
+body {
+  font-family: "Roboto", sans-serif;
+  background: #2c2c2c;
+  color: #fff;
+}
+
+main {
+  display: flex;
+  justify-content: center;
+}
+
+.sidebar {
+  justify-self: start;
+  margin-inline: 1rem;
+}
+
+.content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  justify-self: center;
+}
+
+h1 {
+  font-size: 4rem;
+  text-align: center;
+  margin: 1rem 0rem;
+}
+
+.pickcolor-container {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.label-txt {
+  font-size: 1.2rem;
+}
+
+.pickcolor-btn {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: 1.7rem;
+  height: 1.7rem;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+.container {
+  margin: 0.25rem 0rem;
+  width: 550px;
+}
+
+.row {
+  display: flex;
+  width: 100%;
+}
+
+.item {
+  background: rgb(255, 255, 255);
+}
+
+.flex {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.grid-selection-txt {
+  display: inline-block;
+}
+
+.grid-selection-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.reset-btn {
+  padding: 0.2rem 1.5rem;
+  border-radius: 0.2rem;
+  border: none;
+  cursor: pointer;
+  background: #ffffff;
+  color: #2c2c2c;
+  transition: all 0.25s;
+}
+
+.reset-btn:hover {
+  background: #0075ff;
+  color: #fff;
+}