anamarie.alimurung
/
js-dom-calculator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

last changes

Browse Source
master
ana marie 2 months ago
parent 4061bdd853
commit 68581f8250
3 changed files with 325 additions and 178 deletions
Show Stats Download Patch File Download Diff File

216
calcu-js.js
Unescape Escape View File

@ -1,64 +1,180 @@
let output = ""; let num1 = document.getElementById("num1");
let mem = null; let num2 = document.getElementById("num2");
const printNums = document.querySelector("print");
let result = document.getElementById("result");
// set all values to the textbox
function setVal(value){ let btnAddition = document.getElementById("btn-addition");
output += value; let btnSubtraction = document.getElementById("btn-subtraction");
document.getElementById("print").value = output; let btnMultiplication = document.getElementById("btn-multiplication");
let btnDivision = document.getElementById("btn-division");
// set to zero idk how to sir sankyuu
// if(value===document.getElementById("print").value){ let history = document.getElementById("historyList");
// output = 0; let history_list = [];
// } let btnClearHistory = document.getElementById("clear-history");
if(value %2 === 0){ let btnStore = document.getElementById("store-result");
document.getElementById("opbtn").style.backgroundColor = "green"; let btnMemoryRecall = document.getElementById("memory-recall");
} else if(!isNaN(value)){ let btnMemoryClear = document.getElementById("memory-clear");
document.getElementById("opbtn").style.backgroundColor = "red";
}else{ let memory = null;
document.getElementById("opbtn").style.backgroundColor = "white";
let resultingValue;
class Operation {
constructor(num1, num2, result, operator) {
this.num1 = num1;
this.num2 = num2;
this.result = result;
this.operator = operator;
}
toString() {
return `${this.num1} ${this.operator} ${this.num2} = ${this.result}`;
} }
} }
// retrieve memory num1.addEventListener("keyup", function () {
function retrieveMemory(){ checkInputs();
const x = parseFloat(output); });
if(!isNaN(x)){ num2.addEventListener("keyup", function () {
mem = x; checkInputs();
} });
if(mem !== null){ function checkInputs() {
output = mem.toString(); if (num1.value == "" || num2.value == "") {
document.getElementById("print").value = output; btnAddition.disabled = true;
btnSubtraction.disabled = true;
btnMultiplication.disabled = true;
btnDivision.disabled = true;
return false;
} else {
btnAddition.disabled = false;
btnSubtraction.disabled = false;
btnMultiplication.disabled = false;
btnDivision.disabled = false;
return true;
} }
} }
// clear memory function checkHistory() {
function clearMemory(){ if (history.innerHTML != "") {
if(mem===null){ btnClearHistory.disabled = false;
alert("Memory is empty"); } else {
}else{ btnClearHistory.disabled = true;
mem = null;
} }
} }
// clear num function doOperation(operator) {
function eraseNum(){ if (checkInputs()) {
output = " "; let num1Value = parseFloat(num1.value);
document.getElementById("print").value = " "; let num2Value = parseFloat(num2.value);
document.getElementById("opbtn").style.backgroundColor = "white"; let resultValue;
try {
switch (operator) {
case "+":
resultValue = num1Value + num2Value;
break;
case "-":
resultValue = num1Value - num2Value;
break;
case "*":
resultValue = num1Value * num2Value;
break;
case "/":
if (num2Value === 0) {
throw new Error("Division by zero");
}
resultValue = num1Value / num2Value;
break;
}
result.innerHTML = `Result: ${resultValue}`;
history_list.push(
new Operation(num1Value, num2Value, resultValue, operator)
);
resultingValue = resultValue;
} catch (error) {
history_list.push(
new Operation(
num1Value,
num2Value,
`Result: Error: ${error.message}`,
operator
)
);
result.innerHTML = `Result: Error: ${error.message}`;
resultingValue = undefined;
} finally {
history.innerHTML =
history.innerHTML +
`<li>${history_list[history_list.length - 1].toString()}</li>`;
checkHistory();
}
}
} }
// display btnAddition.addEventListener("click", function () {
function print(){ doOperation("+");
try{ });
const res = eval(output);
document.getElementById("print").value = res; btnSubtraction.addEventListener("click", function () {
output = res.toString(); doOperation("-");
}catch(error){ });
document.getElementById("print").value = "error";
output = ""; btnMultiplication.addEventListener("click", function () {
doOperation("*");
});
btnDivision.addEventListener("click", function () {
doOperation("/");
});
btnStore.addEventListener("click", function () {
if (memory == null) {
memory = [];
}
if (resultingValue != undefined) {
memory.push(resultingValue);
alert(`Stored in memory: ${memory[memory.length - 1]}`);
}
});
btnMemoryRecall.addEventListener("click", function () {
if (memory != null && memory.length > 0) {
num1.value = memory.pop();
} else {
alert("Memory is empty.");
}
});
btnMemoryClear.addEventListener("click", function () {
memory = null;
alert("Memory cleared.");
});
btnClearHistory.addEventListener("click", function () {
history_list = [];
history.innerHTML = "";
checkHistory();
});
document.addEventListener("keyup", function (event) {
console.log(event.key);
if (checkInputs()) {
switch (event.key) {
case "+":
doOperation("+");
break;
case "-":
doOperation("-");
break;
case "*":
doOperation("*");
break;
case "/":
doOperation("/");
break;
}
} }
} });

89
calcu-main.html
Unescape Escape View File

@ -2,46 +2,51 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="UTF-8"> <head>
<meta name="viewport" content="width=device-width, initial-scale=0.1"> <meta charset="utf-8">
<title>Calculator</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="calcu-styles.css"> <title> Calculator </title>
<script src="calcu-js.js"></script> <link rel="stylesheet" href="calcu-styles.css">
</head> </head>
<body> <body>
<!-- div for buttons --> <div class="container">
<div class="calcu" id="opbtn"> <h2 id="header">CALCULATOR</h2>
<!-- display input/selected button value --> <hr>
<div class="con"> <div>
<input type="text" class="display" id="print"/> <input type="number" name="" id="num1">
<button class="opt" id="op" onclick="eraseNum()">C</button> <input type="number" name="" id="num2">
</div> <!--end of con--> </div>
<div class="operations">
<div class="opt-buttons"> <button type="" id="btn-addition" disabled>+</button>
<button class="opt" id="mr" onclick="retrieveMemory();">MR</button> <button type="" id="btn-subtraction" disabled>-</button>
<button class="opt" id="mc" onclick="clearMemory();">MC</button> <button type="" id="btn-multiplication" disabled>*</button>
<button class="opt" id="op" onclick="setVal('*');">*</button> <button type="" id="btn-division" disabled>/</button>
<button class="opt" id="op" onclick="setVal('/');">/</button> </div>
<button class="onum" id="num" onclick="setVal('7');">7</button> <div class="memory-buttons">
<button class="enum" id="num" onclick="setVal('8');">8</button> <button id="store-result">M+</button>
<button class="onum" id="num" onclick="setVal('9');">9</button> <button id="memory-recall">MR</button>
<button class="opt" id="op" onclick="setVal('+');">+</button> <button id="memory-clear">MC</button>
</div>
<button class="enum" id="num" onclick="setVal('4');">4</button> <div>
<button class="onum" id="num" onclick="setVal('5');">5</button> <h3>Result:</h3>
<button class="enum" id="num" onclick="setVal('6');">6</button> <div id="result" class="result">
<button class="opt" id="op" onclick="setVal('-')">-</button>
</div>
<button class="onum" id="num" onclick="setVal('1');">1</button> </div>
<button class="enum" id="num" onclick="setVal('2');">2</button> <hr>
<button class="onum" id="num" onclick="setVal('3');">3</button> <h3 style="text-align: center;">HISTORY</h3>
<button class="opt" id="op" onclick="print();">=</button> <div id="historyList">
<button class="number" id="num" onclick="setVal('0');">0</button> </div>
</div> <!--end of opt buttons--> <div class="history-actions">
</div><!--end of calcu--> <button id="clear-history" disabled>Clear History</button>
</body> </div>
<script type="text/javascript" src="index.js"></script>
</body>
</html> </html>

198
calcu-styles.css
Unescape Escape View File

@ -1,86 +1,112 @@
*{ body {
margin: 0; font-family: "Poppins", sans-serif;
padding: 0; background: #f0f2f5;
box-sizing: border-box; display: flex;
font-family: Arial, Helvetica, sans-serif; justify-content: center;
} padding: 2rem;
}
body{
display: flex; .container {
justify-content: center; background: #fff;
align-items: center; border-radius: 20px;
height: 100vh; padding: 2rem;
background-color: black; width: 100%;
} max-width: 420px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
/* full calcu div */ }
.calcu{
/* display: flex; */ h1,
justify-content: center; h2,
align-items: center; h3 {
/* height: 200px; */ text-align: center;
max-width: 400px; margin-bottom: 1rem;
width: 100%; color: #333;
border-radius: 12px; }
padding: 10px 20px 20px;
position: relative; .result {
background-color: lightblue; height: 40px;
} padding: 15px;
border-radius: 20px;
/* input bar */ border-color: black;
.display{ border-width: 3px;
height: 40px; border-style: solid;
width: 80%; }
border: none;
outline: none; input {
text-align: right; display: flex;
margin-bottom: 5px; width: 93%;
font-size: 20px; gap: 1rem;
pointer-events: none; margin-bottom: 1rem;
/* display: inline-block; */ }
/* align-items: center;
justify-content: center; */ input[type="number"] {
} flex: 1;
padding: 0.75rem;
/* operator buttons */ font-size: 1.2rem;
.opt-buttons{ border: 2px solid #ddd;
display: grid; border-radius: 10px;
grid-gap: 10px; outline: none;
grid-template-columns: repeat(4, 1fr); transition: border-color 0.3s;
} }
.opt-buttons button{ .operations,
padding: 10px; .memory-buttons,
border-radius: 6px; .history-actions {
border: none; display: flex;
font-size: 20px; flex-wrap: wrap;
cursor: pointer; justify-content: center;
} gap: 0.75rem;
margin-bottom: 1rem;
.opt-buttons button:active{ margin-top: 2rem;
transform: scale(0.99); }
}
button {
/* container: display and clear */ font-family: "Poppins";
.con{ width: 60px;
display: grid; height: 60px;
grid-gap: 10px; font-size: 1.4rem;
grid-template-columns: repeat(2, 1fr); font-weight: bold;
} background: linear-gradient(145deg, #e6e6e6, #ffffff);
border: 2px solid #ccc;
.con button{ border-radius: 50%;
padding: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
margin-bottom: 5px; cursor: pointer;
border-radius: 6px; transition: all 0.2s ease;
border: none; color: #333;
font-size: 20px; }
cursor: pointer;
} button:hover:not(:disabled) {
background: #007bff;
.con button:active{ color: white;
transform: scale(0.99); border-color: #007bff;
} transform: scale(1.05);
}
.opt, .clear{
color: grey; button:disabled {
} background: #f0f0f0;
color: #aaa;
border-color: #ddd;
cursor: not-allowed;
}
.memory-buttons button,
.history-actions button {
width: auto;
height: 45px;
padding: 0 1rem;
font-size: 1rem;
border-radius: 12px;
}
#result {
text-align: center;
font-size: 1.5rem;
font-weight: bold;
margin: 1rem 0;
color: #222;
}
#historyList {
padding-left: 1.5rem;
color: #444;
}
Write Preview
Loading…
Cancel
Save