Css variables added

fabianmendozaospina · Dec 7, 2024 · cf2fbb6 · cf2fbb6
1 parent 225efba
commit cf2fbb6
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 10 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -9,6 +9,9 @@
     --app-white: #fff;
     --app-red-dark: rgba(255, 6, 6, 0.5);
     --app-red-light: rgba(250, 6, 6, 0.9);
+    --app-output-font-size-big: 84px;
+    --app-output-font-size-small: 64px;
+    --app-input-font-size: 45px;
 }
 
 
@@ -326,7 +329,7 @@ form {
 
 .output {
     font-weight: 800;
-    font-size: 88px;
+    font-size: var(--app-output-font-size-big);
     margin: 0;
     letter-spacing: 5px;
     white-space: nowrap;
@@ -352,7 +355,7 @@ input[type="text"] {
     width: 100%;
     height: 140px;
     padding: 10px;
-    font-size: 45px;
+    font-size: var(--app-input-font-size);
     font-weight: 800;
     border-radius: 5px;
     margin-bottom: 40px;

diff --git a/assets/js/index.js b/assets/js/index.js
@@ -1,10 +1,10 @@
 'use strict';
 
-import { select, listen, formatCounter } from "./utils.js";
+import { select, listen, formatCounter, outputFontBig, outputFontSmall } from "./utils.js";
 import data from "../data/word-bank.js";
 import { saveScore } from "./modal-score.js";
 
-const TOTAL_SECONDS = 15;
+const TOTAL_SECONDS = 20;
 const containerIntroObj = select('.container-intro');
 const containerGameObj = select('.container-game');
 const gameControlsObj = select('.game-controls');
@@ -108,9 +108,9 @@ function getWordToType() {
     const wordToType = wordBank[wordToTypeIndex];
 
     if (wordToType.length > 9) {
-        outputObj.style.fontSize = '75px';
+        outputObj.style.fontSize = outputFontSmall;
     } else {
-        outputObj.style.fontSize = '88px';
+        outputObj.style.fontSize = outputFontBig;
     }
 
     outputObj.innerHTML = [...wordToType]

diff --git a/assets/js/modal-score.js b/assets/js/modal-score.js
@@ -1,6 +1,7 @@
 'use strict';
 
-import { select, listen, formatCounter, formatDate, formatPercentage } from "./utils.js";
+import { select, listen, formatCounter, formatDate, 
+         formatPercentage, mainFont, monospaceFont } from "./utils.js";
 //TODO: Check possibility to use the class Score:
 //import Score from "./Score.js";
 
@@ -12,9 +13,6 @@ const logo = select('.logo');
 const scoreClose = select('.score-close');
 const scoreTable = select('.score-table');
 const gameScoreOpen = select('.game-score-open');
-const rootStyles = getComputedStyle(document.documentElement);
-const mainFont = rootStyles.getPropertyValue('--app-main-font').trim();
-const monospaceFont = rootStyles.getPropertyValue('--app-monospace-font').trim();
 
 function openModal() {
     modalOverlay.classList.add('active');

diff --git a/assets/js/utils.js b/assets/js/utils.js
@@ -1,5 +1,12 @@
 'use strict';
 
+const rootStyles = getComputedStyle(document.documentElement);
+export const mainFont = rootStyles.getPropertyValue('--app-main-font').trim();
+export const monospaceFont = rootStyles.getPropertyValue('--app-monospace-font').trim();
+export const outputFontBig = rootStyles.getPropertyValue('--app-output-font-size-big').trim();
+export const outputFontSmall = rootStyles.getPropertyValue('--app-output-font-size-small').trim();
+
+
 export function select(selector, scope = document) {
     return scope.querySelector(selector);
 }