Simple Calculator by using HTML, CSS and JavaScript
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Calculator</title>
</head>
<body>
<main>
<h1>Calculator</h1>
<div id="calculator">
<input id="cal-display" type="text" readonly>
<div id="cal-btn">
<button class="btn-clear btn-red" data-val="C">C</button>
<!-- <button class="btn-bracket btn-green" data-val="()">()</button> -->
<button class="btn-delete btn-red"><i class="fa-solid fa-delete-left"></i></button>
<button class="btn btn-green" data-val="%">%</button>
<button class="btn btn-green" data-val="/">/</button>
<button class="btn btn-white" data-val="7">7</button>
<button class="btn btn-white" data-val="8">8</button>
<button class="btn btn-white" data-val="9">9</button>
<button class="btn btn-green" data-val="*">X</button>
<button class="btn btn-white" data-val="4">4</button>
<button class="btn btn-white" data-val="5">5</button>
<button class="btn btn-white" data-val="6">6</button>
<button class="btn btn-green" data-val="-">-</button>
<button class="btn btn-white" data-val="1">1</button>
<button class="btn btn-white" data-val="2">2</button>
<button class="btn btn-white" data-val="3">3</button>
<button class="btn btn-green" data-val="+">+</button>
<button class="btn-change-sign btn-white" data-val="+/-">+/-</button>
<button class="btn btn-white" data-val="0">0</button>
<button class="btn btn-white" data-val=".">.</button>
<button class="btn-equal btn-bg-green" data-val="=">=</button>
</div>
</div>
</main>
<script src="./scripts/script.js"></script>
</body>
</html>
style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
main {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #00ff9833;
}
#calculator {
border: 2px solid black;
padding: 10px;
width: 27rem;
background-color: white;
border-radius: 8px;
box-shadow: 0px 0px 19px 6px black;
margin-top: 1rem;
}
#cal-display {
border: 2px solid black;
border-radius: 8px;
outline: none;
font-size: 2rem;
padding: 10px;
width: 100%;
}
#cal-btn {
margin-top: 1rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
button {
height: 5rem;
flex: 0 0 21%;
background-color: black;
border-radius: 50%;
font-size: 2rem;
font-weight: 900;
margin: 8px;
cursor: pointer;
}
.btn-red {
color: red;
}
.btn-green {
color: green;
}
.btn-white {
color: white;
}
.btn-bg-green {
background-color: green;
}
script.js
const btns = document.querySelectorAll('.btn');
const display = document.getElementById('cal-display');
const changeSign = document.querySelector('.btn-change-sign');
// const bracket = document.querySelector('.btn-bracket');
const deleteBtn = document.querySelector('.btn-delete');
const equal = document.querySelector('.btn-equal');
const clear = document.querySelector('.btn-clear');
btns.forEach((btn) => {
btn.addEventListener('click', (e) => {
const value = e.target.dataset.val;
display.value += value;
});
});
// bracket.addEventListener('click', (e) => {
// // Get the current value and handle empty input
// let currentValue = display.value;
// // Check if there are already closing brackets
// if (currentValue.endsWith(')')) {
// return; // Don't add another closing bracket if already present
// }
// // Update the display value
// display.value = currentValue === '' ? '(' : `(${currentValue})`;
// });
deleteBtn.addEventListener('click', (e) => {
const currentValue = display.value;
if (currentValue !== '') {
const newVal = currentValue.slice(0, currentValue.length - 1);
display.value = newVal;
}
});
changeSign.addEventListener('click', (e) => {
// Get the current value and handle empty input
let currentValue = display.value === '' ? 0 : parseFloat(display.value);
// Multiply by -1 to flip the sign
let newValue = currentValue * -1;
// Update the display value
display.value = newValue.toString();
});
equal.addEventListener('click', (e) => {
if (display.value === '') {
display.value = '';
}
else {
const result = eval(display.value);
display.value = result;
}
});
clear.addEventListener('click', (e) => {
display.value = '';
});
0 Comments