refactor: remove the dice-container

tasxatzial · Jan 24, 2024 · f9d148c · f9d148c
1 parent e3441ce
commit f9d148c
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 15 deletions.
diff --git a/src/index.html b/src/index.html
@@ -13,10 +13,8 @@
 </head>
 <body>
     <div class="container">
-        <div class="dice-container">
-            <div class="dice"></div>
-        </div>
-        <div class="result-container"></div>
+        <div class="dice"></div>
+        <div class="text-result"></div>
     </div>
 </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,16 +1,16 @@
 'use strict';
 
 const dice = document.querySelector('.dice');
-const resultContainer = document.querySelector('.result-container');
+const textResult = document.querySelector('.text-result');
 dice.addEventListener('click', render);
 
 /* initialize */
 dice.innerHTML = createDotHtml('dot-middle-center');
-resultContainer.innerHTML = 1;
+textResult.innerHTML = 1;
 
 function render() {
     dice.innerHTML = createDiceHtml();
-    resultContainer.innerHTML = dice.children.length;
+    textResult.innerHTML = dice.children.length;
 }
 
 function createDiceHtml() {

diff --git a/src/style.css b/src/style.css
@@ -17,24 +17,21 @@ body {
     justify-content: center;
     align-items: center;
     width: 100vw;
-    max-width: 10rem;
-    min-width: 5rem;
-}
-
-.dice-container {
-    width: 100%;
+    max-width: 15rem;
+    min-width: 8rem;
 }
 
 .dice {
     --gap: 6%;
     display: grid;
-    grid: repeat(3, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr));
+    grid: repeat(3, 1fr) / repeat(3, 1fr);
     grid-template-areas:
         "top-left top-center top-right"
         "middle-left middle-center middle-right"
         "bottom-left bottom-center bottom-right";
     justify-items: center;
     align-items: center;
+    width: calc(100% - 2 * var(--gap));
     aspect-ratio: 1;
     padding: var(--gap);
     margin: var(--gap);
@@ -44,7 +41,7 @@ body {
     cursor: pointer;
 }
 
-.result-container {
+.text-result {
     font-size: min(5rem, 50vw);
     font-weight: bold;
 }