Bar height and width now change with screen

SefBoonen · Aug 10, 2023 · fae1453 · fae1453
1 parent d00ff06
commit fae1453
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/scripts/index.js b/scripts/index.js
@@ -8,6 +8,9 @@ const sSortSpeed = document.getElementById("sortspeed");
 // Container for the lines
 const container = document.getElementById("container");
 
+const heightContainer = container.clientHeight * 0.95;
+const widthContainer = container.clientWidth * 0.8;
+
 const sortSpeedNum = document.getElementById("sortspeednum");
 
 let lines = [];
@@ -59,7 +62,7 @@ bSort.addEventListener('click', () => {
 function setLinesToContainer(array) {
     let htmlLines = [];
     array.forEach(element => {
-        htmlLines.push(`<td valign="bottom"> <div id="l${element}" style="border-left: 15px solid green; height: ${element * 8.8}px;"></div> </td>`);
+        htmlLines.push(`<td valign="bottom"> <div id="l${element}" style="border-left: ${widthContainer / 100}px solid green; height: ${(heightContainer / 100) * element}px;"></div> </td>`);
     });
     container.innerHTML = htmlLines.join("");
 }

diff --git a/styles/style.css b/styles/style.css
@@ -25,7 +25,8 @@ html, body {
 }
 
 .container {
-    height:100%;
+    height: 100%;
+    width: 100%;
 }
 
 .lines {