<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>calculetor by mohit</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=poppins:wght@500gdisplay=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppings',sans-serif;
}
body{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg, #0a0a0a, #3a4452);
}
.calculetor{
border: 1px solid #717377;
padding: 20px;
border-radius: 16px;
background: transparent;
box-shadow: 0px 3px 15px rgba(113,115,119,0.5);
}
input{
width: 320px;
border: none;
padding: 24px;
margin: 10px;
background: transparent;
box-shadow: 0px,3px 15px rgba(84, 84, 84, 0.1);
font-size: 40px;
text-align: right;
color: #ffffff;
background-color: #717377;
border-radius: 10px;
}
input::placeholder{
color: #ffffff;
}
button{
border: none;
width: 60px;
height: 60px;
margin: 10px;
border-radius: 50%;
background: transparent;
color: #ffffff;
font-size: 20px;
box-shadow: -8px -8px 15px rgba(38, 160, 99, 0.3);
cursor: pointer;
}
.equalBtn{
background-color: #fb7c14;
}
</style>
</head>
<body>
<div class="calculetor">
<input type="text" placeholder="0" id="inputBox">
<div>
<button>AC</button>
<button>DEL</button>
<button>%</button>
<button>*</button>
</div>
<div>
<button>7</button>
<button>8</button>
<button>9</button>
<button>/</button>
</div>
<div>
<button>4</button>
<button>5</button>
<button>6</button>
<button>+</button>
</div>
<div>
<button>1</button>
<button>2</button>
<button>3</button>
<button>-</button>
</div>
<div>
<button>00</button>
<button>0</button>
<button>.</button>
<button class="equalBtn">=</button>
</div>
</div>
<script>
let input = document.getElementById('inputBox');
let buttons = document.querySelectorAll('button');
let string = "";
let arr = Array.from(buttons);
arr.forEach(button =>{
button.addEventListener('click',(e) =>{
if(e.target.innerHTML == '='){
string = eval(string);
input.value = string;
}
else if(e.target.innerHTML == 'AC'){
string = ""
input.value = string;
}
else if(e.target.innerHTML == 'DEL'){
string = string.substring(0,string.length-1);
input.value = string;
}
else{
string += e.target.innerHTML;
input.value = string;
}
})
})
</script>
</body>
</html>