Update design and add history button

index.js

@@ -16,7 +16,7 @@ function createWindow() {
     const win = new BrowserWindow({
         width: 280,
         height: 485,
-        // resizable: false,
+        resizable: false,
         autoHideMenuBar: true,
     });
 

static/assets/css/keyboard.css

@@ -10,8 +10,11 @@
     grid-template-rows: minmax(100px, auto) repeat(5, 1fr);
     gap: .5rem;
     width: 100vw;
+    height: 100vh;
     padding: 10px;
     border-radius: 20px;
+    transition: all 0.4s;
+    z-index: 100;
 }
 
 .display {

static/assets/css/style.css

@@ -17,6 +17,8 @@ body {
     font-optical-sizing: auto;
     font-weight: 400;
     font-style: normal;
+    user-select: none;
+    overflow: hidden;
 }
 
 button {
@@ -25,4 +27,60 @@ button {
     font-weight: 500;
     font-style: normal;
     font-variation-settings: "slnt" 0;
+}
+
+.history-container::-webkit-scrollbar {
+    display: none;
+}
+
+.history-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    overflow-y: scroll;
+
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    align-items: center;
+    gap: 0.75rem;
+    text-align: center;
+
+    font-family: "IBM Plex", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 400;
+    font-style: normal;
+    user-select: none;
+
+    transform: scale(1.2);
+    filter: blur(10px);
+    opacity: 0;
+    pointer-events: none;
+    z-index: 200;
+
+    transition: all 0.4s;
+}
+
+.history-container span {
+    color: rgba(255, 255, 255, 0.6);
+}
+
+.history-container span strong {
+    color: white;
+}
+
+body.history-open .history-container {
+    transform: scale(1);
+    filter: blur(0);
+    opacity: 1;
+    pointer-events: initial;
+}
+
+body.history-open .calculator {
+    transform: scale(0.8);
+    filter: blur(10px);
+    opacity: 0.4;
 }

static/assets/js/calculator-logic.js

@@ -11,6 +11,8 @@ buttons.forEach(button => {
 
         if (value === 'AC') {
             resetCalculator();
+        } else if (value === 'H') {
+            toggleHistory();
         } else if (value === '=') {
             calculateResult();
         } else {
@@ -53,7 +55,7 @@ function updateCharacterPositions() {
     for (let i = characterSpans.length - 1; i >= 0; i--) {
         const span = characterSpans[i];
         const spanWidth = span.offsetWidth; // Get the width of each character
-        currentOffset -= spanWidth + 5; // Move left by the width of the character + some margin
+        currentOffset -= spanWidth; // Move left by the width of the character + some margin
 
         anime({
             targets: span,
@@ -84,7 +86,7 @@ function calculateResult() {
     for (let i = characterSpans.length - 1; i >= 0; i--) {
         const span = characterSpans[i];
         const spanWidth = span.offsetWidth; // Get the width of each character
-        currentOffset -= spanWidth + 3; // Move left by the width of the character + some margin
+        currentOffset -= spanWidth; // Move left by the width of the character + some margin
 
         anime({
             targets: span,
@@ -115,6 +117,25 @@ function calculateResult() {
     isResultDisplayed = true;
 }
 
+function toggleHistory() {
+    $('body').toggleClass('history-open');
+
+    if ($('body').hasClass('history-open')) { // If the history was just opened
+        // Animate it's elements
+        console.log('a')
+        anime({
+            targets: '.history-container span',
+            translateY: [-100, 0],
+            opacity: [0, 1],
+            duration: 400,
+            delay: anime.stagger(100, { start: 200, direction: 'reverse' }),
+            easing: 'easeOutQuart'
+        })
+    }
+}
+
+$('#history').on('click', toggleHistory);
+
 function clearDisplay() {
     // Remove all current characters (spans)
     characterSpans.forEach(span => span.remove());

static/index.html

@@ -11,6 +11,7 @@
         href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
         rel="stylesheet">
 
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
     <!-- anime.js is a library for easy fancy animations with JavaScript -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
 
@@ -18,12 +19,18 @@
     <link rel="stylesheet" href="./assets/css/keyboard.css">
 </head>
 <body>
+    <div class="history-container" id="history">
+        <span>5+10<strong> = 15</strong></span>
+        <span>7*8<strong> = 56</strong></span>
+        <span>9*9<strong> = 81</strong></span>
+        <span>8*8<strong> = 64</strong></span>
+    </div>
     <div class="calculator">
         <div class="display">
             <div class="display-text"></div>
         </div>
         <button class="button">AC</button>
-        <button class="button">±</button>
+        <button class="button">H</button>
         <button class="button">%</button>
         <button class="button operation">÷</button>
         <button class="button">7</button>