made the base functions. not yet finished.

3 months ago · 4061bdd853
commit 4061bdd853
3 changed files with 197 additions and 0 deletions
--- a/calcu-js.js
+++ b/calcu-js.js
@ -0,0 +1,64 @@
+let output = "";
+let mem = null;
+const printNums = document.querySelector("print");
+
+// set all values to the textbox
+function setVal(value){
+    output += value;
+    document.getElementById("print").value = output;
+
+    // set to zero idk how to sir sankyuu
+    // if(value===document.getElementById("print").value){
+    //     output = 0;
+    // }
+
+    if(value %2 === 0){
+        document.getElementById("opbtn").style.backgroundColor = "green";
+    } else if(!isNaN(value)){
+        document.getElementById("opbtn").style.backgroundColor = "red";
+    }else{
+        document.getElementById("opbtn").style.backgroundColor = "white";
+    }
+}
+
+// retrieve memory
+function retrieveMemory(){
+    const x = parseFloat(output);
+
+    if(!isNaN(x)){
+        mem = x;
+    }
+
+    if(mem !== null){
+        output = mem.toString();
+        document.getElementById("print").value = output;
+    }
+}
+
+// clear memory
+function clearMemory(){
+    if(mem===null){
+        alert("Memory is empty");
+    }else{
+        mem = null;
+    }
+}
+
+// clear num
+function eraseNum(){
+    output = " ";
+    document.getElementById("print").value = " ";
+    document.getElementById("opbtn").style.backgroundColor = "white";
+}
+
+// display
+function print(){
+    try{
+        const res = eval(output);
+        document.getElementById("print").value = res;
+        output = res.toString();
+    }catch(error){
+        document.getElementById("print").value = "error";
+        output = "";
+    }
+}
--- a/calcu-main.html
+++ b/calcu-main.html
@ -0,0 +1,47 @@
+<!-- Programmer: Ana Alimurung 041425 -->
+
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=0.1">
+        <title>Calculator</title>
+        <link rel="stylesheet" href="calcu-styles.css">
+        <script src="calcu-js.js"></script>
+    </head>
+
+    <body>
+       <!-- div for buttons -->
+        <div class="calcu" id="opbtn">
+            <!-- display input/selected button value -->
+             <div class="con">
+                <input type="text" class="display" id="print"/>
+                <button class="opt" id="op" onclick="eraseNum()">C</button>
+            </div> <!--end of con-->
+            
+            <div class="opt-buttons">
+                <button class="opt" id="mr" onclick="retrieveMemory();">MR</button>
+                <button class="opt" id="mc" onclick="clearMemory();">MC</button>
+                <button class="opt" id="op" onclick="setVal('*');">*</button>
+                <button class="opt" id="op" onclick="setVal('/');">/</button>
+
+                <button class="onum" id="num" onclick="setVal('7');">7</button>
+                <button class="enum" id="num" onclick="setVal('8');">8</button>
+                <button class="onum" id="num" onclick="setVal('9');">9</button>
+                <button class="opt" id="op" onclick="setVal('+');">+</button>
+
+                <button class="enum" id="num" onclick="setVal('4');">4</button>
+                <button class="onum" id="num" onclick="setVal('5');">5</button>
+                <button class="enum" id="num" onclick="setVal('6');">6</button>
+                <button class="opt" id="op" onclick="setVal('-')">-</button>
+                
+                <button class="onum" id="num" onclick="setVal('1');">1</button>
+                <button class="enum" id="num" onclick="setVal('2');">2</button>
+                <button class="onum" id="num" onclick="setVal('3');">3</button>
+                <button class="opt" id="op" onclick="print();">=</button>
+
+                <button class="number" id="num" onclick="setVal('0');">0</button>
+            </div> <!--end of opt buttons-->
+        </div><!--end of calcu-->
+    </body>
+</html>
--- a/calcu-styles.css
+++ b/calcu-styles.css
@ -0,0 +1,86 @@
+*{
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+        font-family: Arial, Helvetica, sans-serif;
+    }
+    
+    body{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        background-color: black;
+    }
+    
+    /* full calcu div */
+    .calcu{
+        /* display: flex; */
+        justify-content: center;
+        align-items: center;
+        /* height: 200px; */
+        max-width: 400px;
+        width: 100%;
+        border-radius: 12px;
+        padding: 10px 20px 20px;
+        position: relative;
+        background-color: lightblue;
+    }
+    
+    /* input bar */
+    .display{
+        height: 40px;
+        width: 80%;
+        border: none;
+        outline: none;
+        text-align: right;
+        margin-bottom: 5px;
+        font-size: 20px;
+        pointer-events: none;
+        /* display: inline-block; */
+        /* align-items: center;
+        justify-content: center; */
+    }
+    
+    /* operator buttons */
+    .opt-buttons{
+        display: grid;
+        grid-gap: 10px;
+        grid-template-columns: repeat(4, 1fr);
+    }
+    
+    .opt-buttons button{
+        padding: 10px;
+        border-radius: 6px;
+        border: none;
+        font-size: 20px;
+        cursor: pointer;
+    }
+    
+    .opt-buttons button:active{
+        transform: scale(0.99);
+    }
+    
+    /* container: display and clear */
+    .con{
+        display: grid;
+        grid-gap: 10px;
+        grid-template-columns: repeat(2, 1fr);
+    }
+    
+    .con button{
+        padding: 10px;
+        margin-bottom: 5px;
+        border-radius: 6px;
+        border: none;
+        font-size: 20px;
+        cursor: pointer;
+    }
+    
+    .con button:active{
+        transform: scale(0.99);
+    }
+    
+    .opt, .clear{
+        color: grey;
+    }