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{
document.getElementById("opbtn").style.backgroundColor = "white";
}
}
// retrieve memory let memory = null;
function retrieveMemory(){
const x = parseFloat(output);
if(!isNaN(x)){ let resultingValue;
mem = x;
class Operation {
constructor(num1, num2, result, operator) {
this.num1 = num1;
this.num2 = num2;
this.result = result;
this.operator = operator;
} }
if(mem !== null){ toString() {
output = mem.toString(); return `${this.num1} ${this.operator} ${this.num2} = ${this.result}`;
document.getElementById("print").value = output;
} }
} }
// clear memory num1.addEventListener("keyup", function () {
function clearMemory(){ checkInputs();
if(mem===null){ });
alert("Memory is empty");
}else{ num2.addEventListener("keyup", function () {
mem = null; checkInputs();
});
function checkInputs() {
if (num1.value == "" || num2.value == "") {
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 num function checkHistory() {
function eraseNum(){ if (history.innerHTML != "") {
output = " "; btnClearHistory.disabled = false;
document.getElementById("print").value = " "; } else {
document.getElementById("opbtn").style.backgroundColor = "white"; btnClearHistory.disabled = true;
}
} }
// display function doOperation(operator) {
function print(){ if (checkInputs()) {
try{ let num1Value = parseFloat(num1.value);
const res = eval(output); let num2Value = parseFloat(num2.value);
document.getElementById("print").value = res; let resultValue;
output = res.toString();
}catch(error){ try {
document.getElementById("print").value = "error"; switch (operator) {
output = ""; 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();
}
} }
} }
btnAddition.addEventListener("click", function () {
doOperation("+");
});
btnSubtraction.addEventListener("click", function () {
doOperation("-");
});
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>

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