diff --git a/auto-placement-explicit.css b/auto-placement-explicit.css new file mode 100644 index 0000000..15552bd --- /dev/null +++ b/auto-placement-explicit.css @@ -0,0 +1,49 @@ +.container { + display: grid; + grid-gap: 10px; + grid-template-rows: repeat(5, 60px); + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 60px; + /*grid-auto-flow: dense;*/ +} +.box{ + display: grid; + grid-template-rows: auto; + grid-template-rows: auto; + align-items: center; + justify-items: center; +} + +.box.two { + grid-row: span 2; +} +.box.four { + grid-column: 1 / span 2; /* INTERESTING */ +} +.box.seven { + grid-column: span 1; +} +.box.eight { + grid-column: span 1; +} +/* explicit grid placement */ +.box.six { + grid-row: 3 / span 2; + grid-column: 2 / span 2; +} +.box.five{ + grid-row: 2; + grid-column: 4; +} +.box.eleven { + grid-row: 5;; + grid-column: 3 / span 2; +} + +/* Old school css*/ +.container { + border: 2px solid black; +} +.box { + border: 0.5px solid blue; +} \ No newline at end of file diff --git a/auto-placement-explicit.html b/auto-placement-explicit.html new file mode 100644 index 0000000..9647808 --- /dev/null +++ b/auto-placement-explicit.html @@ -0,0 +1,16 @@ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ \ No newline at end of file diff --git a/auto-placement-explicit.js b/auto-placement-explicit.js new file mode 100644 index 0000000..da62ec0 --- /dev/null +++ b/auto-placement-explicit.js @@ -0,0 +1,58 @@ +var container = document.getElementsByClassName("container"); +console.log(container); + +var boxes = container[0].getElementsByClassName("box"); +console.log(boxes); + +function setBoxContent (currBox, i, color) { + currBox.style.backgroundColor = color; + let countNode = (currBox.firstElementChild||currBox.firstChild); + countNode.innerHTML = (i+1); + countNode.style.fontSize = "40px"; + countNode.style.color = "black"; +} +/* +function fillExplicitBox(i, color){ + let currBoxNumber = explicitBoxes[i]; + let currBox = boxes.item(currBoxNumber); + setBoxContent(currBox, currBoxNumber, color); +} +*/ + +function fillBox(i, color){ + let currBox = boxes.item(i); + console.log(currBox); + setBoxContent(currBox, i, color); +} + +var explicitBoxes = [6,5,11]; +var implicitBoxes = []; +let numBoxes = boxes.length; +let numExplicitBoxes = explicitBoxes.length; +for(let j=1; j<=numBoxes; j++) { + if(! explicitBoxes.includes(j)){ + implicitBoxes.push(j); + } +} +let orderBoxes = explicitBoxes.concat(implicitBoxes); + +let delayInMilliseconds = 1000; +let counter = 0; +let color = "#ffb"; +let exColor = "#0fb"; + +var timedLoop = setInterval(function() { + if(counter < numExplicitBoxes){ + fillBox(orderBoxes[counter]-1, exColor); + } + else { + fillBox(orderBoxes[counter]-1, color); + } + counter++; + if(counter===numBoxes) { + //clearInterval(i); + counter = 0; + exColor = (exColor === "#0fb" ? "#bf0" : "#0fb"); + color = (color === "#ffb" ? "#bff" : "#ffb"); + } +}, delayInMilliseconds); diff --git a/auto-placement.css b/auto-placement.css new file mode 100644 index 0000000..42da4f9 --- /dev/null +++ b/auto-placement.css @@ -0,0 +1,48 @@ +.container { + display: grid; + grid-gap: 10px; + grid-template-rows: repeat(3, 60px); + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 60px; + grid-auto-flow: dense; +} +.box{ + display: grid; + grid-template-rows: auto; + grid-template-rows: auto; + align-items: center; + justify-items: center; +} +.box.two { + grid-row: span 2; +} +/* +Try:: +.box.four { + grid-column: span 2; +} +*/ +.box.four { + grid-column: span 2; +} +.box.six { + grid-row: span 2; + grid-column: span 3; +} +.box.seven { + grid-column: span 1; +} +.box.eight { + grid-column: span 1; +} +.box.eleven { + grid-row: span 2; + grid-column: span 2; +} +/* Old school css*/ +.container { + border: 2px solid black; +} +.box { + border: 0.5px solid blue; +} \ No newline at end of file diff --git a/auto-placement.html b/auto-placement.html new file mode 100644 index 0000000..03fa287 --- /dev/null +++ b/auto-placement.html @@ -0,0 +1,18 @@ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ \ No newline at end of file diff --git a/auto-placement.js b/auto-placement.js new file mode 100644 index 0000000..82ec06b --- /dev/null +++ b/auto-placement.js @@ -0,0 +1,33 @@ +var container = document.getElementsByClassName("container"); +console.log(container); + +var boxes = container[0].getElementsByClassName("box"); +console.log(boxes); + +function fillBox(i, color){ + let currBox = boxes.item(i); + console.log(currBox); + currBox.style.backgroundColor = color; + // to center text + //let countNode = document.createElement("span"); + let countNode = (currBox.firstElementChild||currBox.firstChild); + countNode.innerHTML = (i+1); + countNode.style.fontSize = "40px"; + countNode.style.color = "black"; + //countNode.style.border = "0.5px solid red"; + currBox.appendChild(countNode); +} + +var delayInMilliseconds = 1000; //1 second +var counter = 0; +var numBoxes = boxes.length; +var color = "#ffb"; +var timedLoop = setInterval(function() { + fillBox(counter, color); + counter++; + if(counter===numBoxes) { + //clearInterval(i); + counter = 0; + color = (color === "#ffb" ? "#bff" : "#ffb"); + } +}, delayInMilliseconds);