From 494552092d1d1bc69ddc1f1d34a51e687a96f80d Mon Sep 17 00:00:00 2001 From: Jared Reyes Date: Fri, 5 May 2023 21:03:16 +1000 Subject: [PATCH] working on dynamic box size vs number of boxes --- global.css | 25 +++++++++++++++++++++++++ index.html | 18 ++++++++++++++++-- script.js | 30 ++++++++++++++++++++++++++++++ style.css | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 118 insertions(+), 2 deletions(-) diff --git a/global.css b/global.css index 7061124..5ff0ec5 100644 --- 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); } \ No newline at end of file diff --git a/index.html b/index.html index 0e31c10..9033188 100644 --- a/index.html +++ b/index.html @@ -6,13 +6,27 @@ Etch A Sketch - + + + + - +
+ + + +
+
\ No newline at end of file diff --git a/script.js b/script.js index e69de29..102be4b 100644 --- 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 index e69de29..e98bac1 100644 --- 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; +} \ No newline at end of file