From 5e793d1e4523882e84f932b43c0e26e8f203e210 Mon Sep 17 00:00:00 2001 From: Zachary Masson Date: Sun, 16 Jun 2024 07:28:40 +0200 Subject: [PATCH] :sparkles: Add mobile mode --- assets/css/mobile.css | 51 ++++++++++++++++++++++++++++ assets/css/style.css | 2 +- assets/js/main.js | 79 +++++++++++++++++++++++++++---------------- index.html | 1 + 4 files changed, 102 insertions(+), 31 deletions(-) create mode 100644 assets/css/mobile.css diff --git a/assets/css/mobile.css b/assets/css/mobile.css new file mode 100644 index 0000000..0e7ef3b --- /dev/null +++ b/assets/css/mobile.css @@ -0,0 +1,51 @@ +@media only screen and (max-width: 500px) { + .made { + left: 15px; + top: 15px; + } + + .made > a > img { + width: 200px; + } + + .watchers { + right: 15px; + top: 15px; + } + + #calculator { + background-image: none; + height: 100vh; + max-height: 930px; + width: 100vh; + background-color: var(--black); + } + + #calculator::before { + display: none; + } + + #calculator > .content { + height: calc(100% - 20px); + margin: 0 0; + } + + #calculator > .content > .result { + height: 600px; + margin-right: 60px; + } + + #calculator > .content > .keyboard > .line { + gap: 20px; + } + + #calculator > .content > .keyboard > .line > button { + width: 75px; + } + + #calculator > .content > .keyboard > .line > button.double { + width: 170px; + height: 75px; + border-radius: 60px; + } +} \ No newline at end of file diff --git a/assets/css/style.css b/assets/css/style.css index 95496a8..2c9a866 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -132,7 +132,7 @@ body { #calculator > .content > .keyboard > .line > button { width: 60px; - height: 60px; + aspect-ratio: 1/1; border-radius: 100%; diff --git a/assets/js/main.js b/assets/js/main.js index 07b121d..8852e4c 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,37 +1,45 @@ -const resultText = document.getElementById("text"); -const oldResultText = document.getElementById("oldResult"); -const buttons = document.querySelectorAll("button"); +// DOM elements selection +const resultText = document.getElementById("text"); // Field to display the current result +const oldResultText = document.getElementById("oldResult"); // Field to display the previous result +const buttons = document.querySelectorAll("button"); // Selecting all buttons -let oldNumber = "0"; -let currentNumber = "0"; -let currentSign = ""; +// Calculation variables +let oldNumber = "0"; // Previous number +let currentNumber = "0"; // Current number +let currentSign = ""; // Current operator -let isEqual = false; +let isEqual = false; // Indicates whether the equal button has been pressed +// Keyboard event document.addEventListener("keydown", OnKeyPress); +// Adding event listeners to buttons buttons.forEach((btn) => btn.addEventListener("click", OnButtonPress)); +/** + * Refreshes the result display + */ function RefreshResult() { - if (oldNumber === "0") oldResultText.style.opacity = "0"; - else oldResultText.style.opacity = "1"; - + oldResultText.style.opacity = oldNumber === "0" ? "0" : "1"; resultText.innerText = currentNumber; - if (isEqual) oldResultText.innerText = oldNumber; - else oldResultText.innerText = oldNumber + ` ${currentSign}`; + oldResultText.innerText = isEqual ? oldNumber : oldNumber + ` ${currentSign}`; } /** - * Function for add number in currebtNumber - * @param {Number} number + * Function to add a number to currentNumber + * @param {number} number - The number to add */ function AddNumber(number) { - if (currentNumber.length > 7) return; - if (currentNumber !== "0") currentNumber += number.toString(); - else currentNumber = number.toString(); + if (currentNumber.length > 7) return; // Limits the number of digits + currentNumber = + currentNumber === "0" ? number.toString() : currentNumber + number; RefreshResult(); } +/** + * Function to handle function buttons + * @param {string} func - The function to execute (AC, +/-, %) + */ function FunctionButton(func) { switch (func) { case "AC": @@ -41,17 +49,19 @@ function FunctionButton(func) { break; case "+/-": - currentNumber = (-parseFloat(currentNumber)).toString(); + currentNumber = `-${currentNumber}`; break; case "%": - currentNumber = parseFloat(currentNumber) / 100; + currentNumber = (parseFloat(currentNumber) / 100).toString(); break; } - RefreshResult(); } +/** + * Function to handle the equal button + */ function EqualButton() { if (currentSign === "") return; @@ -86,19 +96,22 @@ function EqualButton() { isEqual = false; } +/** + * Function to handle operator buttons + * @param {string} sign - The operator (+, -, ×, ÷) + */ function SignButton(sign) { currentSign = sign; - if (oldNumber != "") { - EqualButton(); - } - oldNumber = currentNumber; currentNumber = "0"; RefreshResult(); } +/** + * Handles keyboard key press events + * @param {KeyboardEvent} e - The key press event + */ function OnKeyPress(e) { - console.log(e); if (!isNaN(parseFloat(e.key))) { AddNumber(parseFloat(e.key)); } @@ -139,19 +152,25 @@ function OnKeyPress(e) { } } +/** + * Handles button click events + * @param {MouseEvent} e - The button click event + */ function OnButtonPress(e) { - e.preventDefault(); - switch (e.target.getAttribute("data-type")) { + const { target } = e; + const dataType = target.getAttribute("data-type"); + + switch (dataType) { case "num": - AddNumber(e.target.innerText); + AddNumber(parseFloat(target.innerText)); break; case "func": - FunctionButton(e.target.innerText); + FunctionButton(target.innerText); break; case "sign": - SignButton(e.target.innerText); + SignButton(target.innerText); break; case "other": diff --git a/index.html b/index.html index 6a16bd6..c4e8a53 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,7 @@ type="image/x-icon" /> +