working on dynamic box size vs number of boxes

jrey8343 · May 5, 2023 · 4945520 · 4945520
1 parent 86cb7ea
commit 4945520
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 2 deletions.
diff --git a/global.css b/global.css
@@ -56,4 +56,29 @@ p, h1, h2, h3, h4, h5, h6 {
 */
 #root, #__next {
   isolation: isolate;
+}
+
+:root {
+  --shadow-color: 340deg 28% 61%;
+  --shadow-elevation-low:
+    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
+    0.4px 0.8px 1px -1.2px hsl(var(--shadow-color) / 0.34),
+    1px 2px 2.5px -2.5px hsl(var(--shadow-color) / 0.34);
+  --shadow-elevation-medium:
+    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36),
+    0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.36),
+    2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.36),
+    5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.36);
+  --shadow-elevation-high:
+    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
+    1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.34),
+    2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.34),
+    4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.34),
+    7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.34),
+    11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.34),
+    17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.34),
+    25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.34);
+  --grid-repeat: 4;
+  --grid-size: calc(var(--grid-repeat) * 12.5px);
+  --gap: calc(var(--grid-repeat) * 1.1px);
 }
diff --git a/index.html b/index.html
@@ -6,13 +6,27 @@
   <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>
-  <script src="script.js" defer></script>
   <link rel="stylesheet" href="global.css">
   <link rel="stylesheet" href="style.css">
+  <script src="script.js" defer></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
+    rel="stylesheet">
 </head>
 
 <body>
-
+  <div class="container">
+    <label for="sides-select">Choose a number of squares per side:</label>
+    <select name="sides" id="sides-select">
+      <option value="1">1</option>
+      <option value="2">2</option>
+      <option value="3">3</option>
+      <option value="4">4</option>
+    </select>
+    <button>Generate New Grid</button>
+    <div class="wrapper"></div>
+  </div>
 </body>
 
 </html>
diff --git a/script.js b/script.js
@@ -0,0 +1,30 @@
+const wrapper = document.querySelector('.wrapper');
+const button = document.querySelector('.container button');
+const root = document.querySelector(':root');
+
+createBoxes(4);
+
+
+function createBoxes(sides) {
+  //Calculate the amount of boxes
+  const boxes = sides ** 2;
+  //Create 16 squares within the container div
+  for (let i = 0; i < boxes ; i++) {
+    const div = document.createElement('div');
+    div.classList.add('box');
+    wrapper.appendChild(div);
+  };
+  setGridRepeat(sides);
+};
+
+function setGridRepeat(n) {
+  root.style.setProperty('--grid-repeat', n)
+};
+
+
+
+
+
+
+
+
diff --git a/style.css b/style.css
@@ -0,0 +1,47 @@
+body {
+  background-color: lavenderblush;
+  font-family: 'Inter', sans-serif;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2rem;
+}
+button {
+  font-size: 1.5rem;
+  border-radius: 8px;
+  border: none;
+  padding: 1rem;
+  background-color: cornsilk;
+  color: coral;
+  font-weight: 700;
+  box-shadow: var(--shadow-elevation-medium);
+}
+
+button:hover {
+  cursor: pointer;
+  background-color: coral;
+  color: white;
+}
+
+.wrapper {
+  padding-top: 2rem;
+  display: grid;
+  justify-content: center;
+  grid-template-columns: repeat(var(--grid-repeat), var(--grid-size));
+  grid-template-rows: repeat(var(--grid-repeat), var(--grid-size));
+  gap: var(--gap);
+}
+
+.box {
+  background-color: thistle;
+  border-radius: 8px;
+  box-shadow: var(--shadow-elevation-medium);
+}
+
+.box:hover {
+  cursor: pointer;
+  background-color: beige;
+}