last changes
ana marie
2 months ago
parent
4061bdd853
commit
68581f8250
@ -1,64 +1,180 @@
|
||||
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";
|
||||
let num1 = document.getElementById("num1");
|
||||
let num2 = document.getElementById("num2");
|
||||
|
||||
let result = document.getElementById("result");
|
||||
|
||||
let btnAddition = document.getElementById("btn-addition");
|
||||
let btnSubtraction = document.getElementById("btn-subtraction");
|
||||
let btnMultiplication = document.getElementById("btn-multiplication");
|
||||
let btnDivision = document.getElementById("btn-division");
|
||||
|
||||
let history = document.getElementById("historyList");
|
||||
let history_list = [];
|
||||
let btnClearHistory = document.getElementById("clear-history");
|
||||
|
||||
let btnStore = document.getElementById("store-result");
|
||||
let btnMemoryRecall = document.getElementById("memory-recall");
|
||||
let btnMemoryClear = document.getElementById("memory-clear");
|
||||
|
||||
let memory = null;
|
||||
|
||||
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
|
||||
function retrieveMemory(){
|
||||
const x = parseFloat(output);
|
||||
num1.addEventListener("keyup", function () {
|
||||
checkInputs();
|
||||
});
|
||||
|
||||
if(!isNaN(x)){
|
||||
mem = x;
|
||||
}
|
||||
num2.addEventListener("keyup", function () {
|
||||
checkInputs();
|
||||
});
|
||||
|
||||
if(mem !== null){
|
||||
output = mem.toString();
|
||||
document.getElementById("print").value = output;
|
||||
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 memory
|
||||
function clearMemory(){
|
||||
if(mem===null){
|
||||
alert("Memory is empty");
|
||||
}else{
|
||||
mem = null;
|
||||
function checkHistory() {
|
||||
if (history.innerHTML != "") {
|
||||
btnClearHistory.disabled = false;
|
||||
} else {
|
||||
btnClearHistory.disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
// clear num
|
||||
function eraseNum(){
|
||||
output = " ";
|
||||
document.getElementById("print").value = " ";
|
||||
document.getElementById("opbtn").style.backgroundColor = "white";
|
||||
function doOperation(operator) {
|
||||
if (checkInputs()) {
|
||||
let num1Value = parseFloat(num1.value);
|
||||
let num2Value = parseFloat(num2.value);
|
||||
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
|
||||
function print(){
|
||||
try{
|
||||
const res = eval(output);
|
||||
document.getElementById("print").value = res;
|
||||
output = res.toString();
|
||||
}catch(error){
|
||||
document.getElementById("print").value = "error";
|
||||
output = "";
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -1,86 +1,112 @@
|
||||
*{
|
||||
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;
|
||||
}
|
||||
body {
|
||||
font-family: "Poppins", sans-serif;
|
||||
background: #f0f2f5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.result {
|
||||
height: 40px;
|
||||
padding: 15px;
|
||||
border-radius: 20px;
|
||||
border-color: black;
|
||||
border-width: 3px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
input {
|
||||
display: flex;
|
||||
width: 93%;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
flex: 1;
|
||||
padding: 0.75rem;
|
||||
font-size: 1.2rem;
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 10px;
|
||||
outline: none;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.operations,
|
||||
.memory-buttons,
|
||||
.history-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: "Poppins";
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
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;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
border-color: #007bff;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
Loading…
Reference in New Issue