wellcome to dazzlone.in !
Your animated calculator code as follows
Copy Text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
text-align: center;
background-color: #121212;
height: 100vh;
display: flex;
justify-content: center;
}
.row{
margin: 0;
padding: 0;
width: 200px;
}
.main{
margin: 35px;
padding: 0px 6px 0;
width: 200px;
height: 300px;
border: 1px solid #fbf7f7;
border-radius: 10px;
background-color: black;
box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2), 0 6px 20px 0 rgba(255, 255, 255, 0.19);
}
.button{
width: 46px;
height: 31px;
border: 1px solid #ff785a;
border-radius: 3px;
margin:4px 2px;
font-size: 15px;
padding: 2px;
background-color: #feefe5;
color: #2f0601;
font-weight: 700;
box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2);
}
#input{
height: 40px;
font-size: 35px;
width: 184px;
border: 1px solid #feefe5;
border-radius: 4px;
text-align: right;
margin-bottom: 10px;
margin-top: 10px;
padding-right: 2px;
background-color: #000;
color: #feefe5;
padding: 10px 4px;
}
#input::placeholder{
color: #feefe5;
}
.heading{
background-color: #fbf7f7;
width: 207px;
height: 50px;
margin-bottom: 10px;
padding: 8px 0 0;
margin-top: 0;
border-radius: 5px;
color: #130a59;
}
.btn-clear{
background-color: #ed7e23;
color: #feefe5;
border: 1px solid #feefe5;
}
.btn-equal{
background-color: #130a59;
color: #feefe5;
border: 1px solid #feefe5;
}
.btn-opr{
background-color: #009699;
color: #feefe5;
border: 1px solid #feefe5;
}
.button:hover{
opacity: 70%;
cursor: pointer;
}
.button:active{
opacity: 50%;
cursor: pointer;
}
.text-center{
text-align: center;
}
.bg-red{
background-color: red;
}
.flex{
display: flex;
justify-content: center;
align-items: center;
}
.flex-col{
flex-direction: column;
}
</style>
</head>
<body>
<div class="flex flex-col">
<h1 class="heading">Calculator</h1>
<div class="main flex flex-col">
<input type="text" id="input" placeholder="0" readonly>
<div class="row flex">
<button class="button btn-clear">AC</button>
<button class="button btn-clear">DEL</button>
<button class="button btn-opr">%</button>
<button class="button btn-opr">/</button>
</div>
<div class="row flex">
<button class="button">7</button>
<button class="button">8</button>
<button class="button">9</button>
<button class="button btn-opr">*</button>
</div>
<div class="row flex">
<button class="button">4</button>
<button class="button">5</button>
<button class="button">6</button>
<button class="button btn-opr">-</button>
</div>
<div class="row flex">
<button class="button">1</button>
<button class="button">2</button>
<button class="button">3</button>
<button class="button btn-opr">+</button>
</div>
<div class="row flex">
<button class="button">0</button>
<button class="button">00</button>
<button class="button">.</button>
<button class="button btn-equal">=</button>
</div>
</div>
</div>
<script src="script.js"></script>
<script>
// Initialize an empty string to store the input expression
let string = "";
// Select all elements with the class "button" and the input element by ID
let button = document.querySelectorAll(".button");
let input = document.getElementById("input");
// Convert the NodeList of buttons to an array for easier manipulation
let arr = Array.from(button);
// Iterate over each button in the array and attach a click event listener
arr.forEach(buttons => {
buttons.addEventListener('click', (e) => {
// Check if the clicked button is the "=" button and the string is not empty
if (e.target.innerHTML == "=" && string != ""){
try {
// Evaluate the expression, update the string, and display the result in the input
string = eval(string);
input.value = string;
} catch (error) {
// Handle errors by displaying "Error" in the input and clearing the string
input.value = "Error";
string = ""; // Clear the string in case of an error
}
}
// Check if the clicked button is the "AC" (All Clear) button
else if (e.target.innerHTML == "AC"){
// Clear the string and update the input value
string = "";
input.value = string;
}
// Check if the clicked button is the "DEL" (Delete) button
else if (e.target.innerHTML == "DEL"){
// Remove the last character from the string and update the input value
if (string.length > 0) {
string = string.substring(0, string.length - 1);
input.value = string;
}
}
// If none of the special buttons are clicked, append the button's value to the string
else {
string += e.target.innerHTML;
input.value = string;
}
})
});
</script>
</body>
</html>
