commit 4061bdd853e1cf7f0bd922464ad04977e74daebd Author: ana marie Date: Mon Apr 14 23:51:00 2025 +0800 made the base functions. not yet finished. diff --git a/calcu-js.js b/calcu-js.js new file mode 100644 index 0000000..1c47541 --- /dev/null +++ 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 = ""; + } +} \ No newline at end of file diff --git a/calcu-main.html b/calcu-main.html new file mode 100644 index 0000000..c340684 --- /dev/null +++ b/calcu-main.html @@ -0,0 +1,47 @@ + + + + + + + + Calculator + + + + + + +
+ +
+ + +
+ +
+ + + + + + + + + + + + + + + + + + + + + +
+
+ + \ No newline at end of file diff --git a/calcu-styles.css b/calcu-styles.css new file mode 100644 index 0000000..4e9538e --- /dev/null +++ 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; + } \ No newline at end of file