App Update - New apps, better UI, more app functionality

Author: HimC29

README.md

@@ -1,5 +1,6 @@
 const display = document.getElementById("display");
 let userInputs = [];
+let calculated = false;
 display.value = "Calculator"
 
 function formatInputForScreen(userInputs){
@@ -33,6 +34,14 @@ function displayToScreen(){
 }
 
 function appendToken(input){
+    // If we just calculated and the new input is a number, clear and start fresh
+    if(calculated && !isNaN(input)){
+        clearDisplay();
+    }
+    // If an operator is pressed after a calculation, don't clear, just reset the flag
+    if(calculated && isNaN(input)){
+        calculated = false;
+    }
     userInputs.push(input);
     displayToScreen();
     console.log(userInputs);
@@ -51,6 +60,7 @@ function delLastDigit(){
 }
 
 function calculate(){
+    calculated = true;
     let formattedEquation = "";
     let sqrtActive = false;
     for(const input of userInputs){

apps/Calculator/index.html

@@ -1,58 +1,79 @@
+* {
+    box-sizing: border-box;
+}
+
 body {
     margin: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    padding: 0;
     height: 100vh;
+    width: 100vw;
+    overflow: hidden;
     background-color: hsl(0, 0%, 75%);
+    font-family: Arial, Helvetica, sans-serif;
 }
 
 #calculator {
-    font-family: Arial, Helvetica, sans-serif;
-    background-color: hsl(0, 0%, 15%);
-    border-radius: 1rem; /* was 15px */
-    max-width: 90vw; /* responsive width */
-    width: 400px; /* fallback for large screens */
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background: linear-gradient(135deg, hsl(0, 0%, 20%), hsl(0, 0%, 15%));
     overflow: hidden;
 }
 
 #display {
-    width: calc(100% - 2rem); /* padding-aware */
-    padding: 1.25rem; /* was 20px */
-    font-size: 4rem; /* scales with container */
+    width: 100%;
+    padding: 2rem;
+    flex: 0 0 20%;
+    font-size: clamp(2rem, 10vh, 5rem);
     text-align: right;
     border: none;
-    background-color: hsl(0, 0%, 20%);
-    color: white;
+    background-color: hsl(0, 0%, 10%);
+    color: #ffffff;
     overflow-x: auto;
+    overflow-y: hidden;
+    resize: none;
+    font-weight: bold;
 }
 
 #keys {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
-    gap: 0.625rem; /* was 10px */
-    padding: 1.5rem; /* was 25px */
+    gap: 1rem;
+    padding: 1.5rem;
+    flex: 1;
+    grid-auto-rows: 1fr;
+    min-height: 0;
+    width: 100%;
+    max-width: 80rem;
+    margin: 0 auto;
 }
 
 button {
-    width: 100%; /* fill grid cell */
-    aspect-ratio: 1; /* keep buttons square */
-    border-radius: 50%; /* circular buttons */
+    border-radius: 0.5rem;
     border: none;
     background-color: hsl(0, 0%, 30%);
     color: white;
-    font-size: 1.5rem; /* scales better on smaller screens */
+    font-size: clamp(1rem, 5vw, 3rem);
     font-weight: bold;
     cursor: pointer;
-    transition: background-color 0.2s;
+    transition: all 0.15s ease;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 button:hover {
     background-color: hsl(0, 0%, 40%);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
 }
 
 button:active {
     background-color: hsl(0, 0%, 50%);
+    transform: translateY(0);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
 .operator-btn {
@@ -66,3 +87,27 @@ button:active {
 .operator-btn:active {
     background-color: hsl(35, 100%, 75%);
 }
+
+/* Mobile/Responsive adjustments */
+@media (max-width: 600px) {
+    #keys {
+        gap: 0.75rem;
+        padding: 1rem;
+    }
+
+    #display {
+        padding: 1.5rem 1rem;
+    }
+}
+
+@media (max-width: 400px) {
+    #keys {
+        gap: 0.5rem;
+        padding: 0.75rem;
+    }
+
+    #display {
+        padding: 1rem;
+        font-size: clamp(1.5rem, 8vh, 3rem);
+    }
+}