build calculator with dom; use tailwind for design
CodexPremiera
3 months ago
parent
f108634294
commit
4bac106603
@ -0,0 +1,8 @@
|
||||
# Default ignored files
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# Editor-based HTTP Client requests
|
||||
/httpRequests/
|
||||
# Datasource local storage ignored files
|
||||
/dataSources/
|
||||
/dataSources.local.xml
|
||||
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="WEB_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$">
|
||||
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/temp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/tmp" />
|
||||
</content>
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/js-dom-calculator.iml" filepath="$PROJECT_DIR$/.idea/js-dom-calculator.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="$PROJECT_DIR$" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
||||
@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<title>Calculator</title>
|
||||
</head>
|
||||
|
||||
<body class="h-screen w-screen flex items-center justify-center">
|
||||
<div class="w-2/5 flex flex-col p-10 border rounded-lg">
|
||||
<!-- Header -->
|
||||
<div class="h-10 my-5 flex items-center justify-center">
|
||||
<h1 class="text-xl font-bold">JS Calculator</h1>
|
||||
</div>
|
||||
|
||||
<!-- Calculator wrapper -->
|
||||
<div class="w-full flex flex-col justify-center gap-4 mb-10">
|
||||
<!-- Inputs and operation buttons -->
|
||||
<div class="w-full flex flex-row gap-4">
|
||||
<div class="flex flex-col gap-4 w-3/5">
|
||||
<input id="firstNum" type="number" placeholder="First Number"
|
||||
class="w-full p-2 border rounded-lg h-10" />
|
||||
<input id="secondNum" type="number" placeholder="Second Number"
|
||||
class="w-full p-2 border rounded-lg h-10" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-4 w-2/5">
|
||||
<button id="add" value="addition" class="w-full h-10 border rounded-lg disabled:cursor-not-allowed"
|
||||
disabled>+</button>
|
||||
<button id="sub" value="subtraction" class="w-full h-10 border rounded-lg disabled:cursor-not-allowed"
|
||||
disabled>-</button>
|
||||
<button id="mult" value="multiplication" class="w-full h-10 border rounded-lg disabled:cursor-not-allowed"
|
||||
disabled>*</button>
|
||||
<button id="div" value="division" class="w-full h-10 border rounded-lg disabled:cursor-not-allowed"
|
||||
disabled>÷</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Memory buttons -->
|
||||
<div class="flex items-center justify-center gap-4">
|
||||
<button id="memStore" class="w-12 h-10 border rounded-lg">M+</button>
|
||||
<button id="memRecall" class="w-12 h-10 border rounded-lg">MR</button>
|
||||
<button id="memClear" class="w-12 h-10 border rounded-lg">MC</button>
|
||||
</div>
|
||||
|
||||
<!-- Result -->
|
||||
<div class="flex items-center justify-start">
|
||||
<h3 id="result">Result: </h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="mb-10" />
|
||||
|
||||
<!-- History -->
|
||||
<div class="flex flex-col">
|
||||
<h3 class="font-semibold">History</h3>
|
||||
<ul id="historyList" class="pl-5 pr-2 max-h-24 overflow-y-auto list-disc mt-2"></ul>
|
||||
<button id="clear" class="w-28 h-10 mt-4 border rounded-lg disabled:cursor-not-allowed" disabled>
|
||||
Clear History
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,127 @@
|
||||
// Get DOM elements
|
||||
const firstNum = document.getElementById('firstNum');
|
||||
const secondNum = document.getElementById('secondNum');
|
||||
const resultEl = document.getElementById('result');
|
||||
const historyList = document.getElementById('historyList');
|
||||
const clearHistoryBtn = document.getElementById('clear');
|
||||
|
||||
const opButtons = {
|
||||
add: document.getElementById('add'),
|
||||
sub: document.getElementById('sub'),
|
||||
mult: document.getElementById('mult'),
|
||||
div: document.getElementById('div'),
|
||||
};
|
||||
|
||||
const memStore = document.getElementById('memStore');
|
||||
const memRecall = document.getElementById('memRecall');
|
||||
const memClear = document.getElementById('memClear');
|
||||
|
||||
// Global state
|
||||
let history = [];
|
||||
let memory = null;
|
||||
|
||||
// Enable operation buttons only when both inputs are filled
|
||||
function validateInputs() {
|
||||
const hasValues = firstNum.value.trim() !== '' && secondNum.value.trim() !== '';
|
||||
Object.values(opButtons).forEach(btn => {
|
||||
btn.disabled = !hasValues;
|
||||
});
|
||||
}
|
||||
|
||||
// Update button state on input
|
||||
[firstNum, secondNum].forEach(input => {
|
||||
input.addEventListener('input', validateInputs);
|
||||
});
|
||||
|
||||
// Perform operation
|
||||
function calculate(operation) {
|
||||
const a = parseFloat(firstNum.value);
|
||||
const b = parseFloat(secondNum.value);
|
||||
if (isNaN(a) || isNaN(b)) {
|
||||
resultEl.textContent = 'Result: Invalid input';
|
||||
return;
|
||||
}
|
||||
|
||||
let res;
|
||||
let symbol;
|
||||
switch (operation) {
|
||||
case 'add':
|
||||
res = a + b;
|
||||
symbol = '+';
|
||||
break;
|
||||
case 'sub':
|
||||
res = a - b;
|
||||
symbol = '-';
|
||||
break;
|
||||
case 'mult':
|
||||
res = a * b;
|
||||
symbol = '*';
|
||||
break;
|
||||
case 'div':
|
||||
if (b === 0) {
|
||||
resultEl.textContent = 'Result: Cannot divide by zero';
|
||||
return;
|
||||
}
|
||||
res = a / b;
|
||||
symbol = '÷';
|
||||
break;
|
||||
}
|
||||
|
||||
resultEl.textContent = `Result: ${res}`;
|
||||
const historyItem = `${a} ${symbol} ${b} = ${res}`;
|
||||
history.push(historyItem);
|
||||
updateHistory();
|
||||
}
|
||||
|
||||
// Add click listeners to op buttons
|
||||
Object.entries(opButtons).forEach(([key, btn]) => {
|
||||
btn.addEventListener('click', () => calculate(key));
|
||||
});
|
||||
|
||||
// Update history list and clear history button state
|
||||
function updateHistory() {
|
||||
historyList.innerHTML = '';
|
||||
history.forEach(item => {
|
||||
const li = document.createElement('li');
|
||||
li.textContent = item;
|
||||
historyList.appendChild(li);
|
||||
});
|
||||
clearHistoryBtn.disabled = history.length === 0;
|
||||
}
|
||||
|
||||
// Clear history
|
||||
clearHistoryBtn.addEventListener('click', () => {
|
||||
history = [];
|
||||
updateHistory();
|
||||
});
|
||||
|
||||
// Memory buttons
|
||||
memStore.addEventListener('click', () => {
|
||||
const resText = resultEl.textContent;
|
||||
const value = parseFloat(resText.split(': ')[1]);
|
||||
if (!isNaN(value)) {
|
||||
memory = value;
|
||||
alert(`Memory Stored: ${memory}`);
|
||||
} else {
|
||||
alert('No valid result to store in memory.');
|
||||
}
|
||||
});
|
||||
|
||||
memRecall.addEventListener('click', () => {
|
||||
if (memory !== null) {
|
||||
firstNum.value = memory;
|
||||
validateInputs();
|
||||
alert(`Memory Recalled: ${memory}`);
|
||||
} else {
|
||||
alert('Memory is empty.');
|
||||
}
|
||||
});
|
||||
|
||||
memClear.addEventListener('click', () => {
|
||||
if (memory !== null) {
|
||||
memory = null;
|
||||
alert('Memory Cleared.');
|
||||
} else {
|
||||
alert('Memory is already empty.');
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue