<html lang ='en'>
<head>
<meta charset="UTF-8"/>
<META http-equiv="X-UA-compatibal" content="IE=edge"/>
<meta name="viewport"content="width=device-width, initialscale=1"/>
<link rel="stylesheet" href="style.css"/>
<title> CALCULATOR - MADE BY ARYAN</title>
</head>
<body>
<div class="CALCULATOR">
<input type="text" placeholder="0" id="inputbox"/>
<div>
<button class="operator">AC</button>
<button class="operator">DEL</button>
<button class="operator">%</button>
<button class="operator">/</button>
</div>
<div>
<button>7</button>
<button>8</button>
<button>9</button>
<button class="operator">*</button>
</div>
<div>
<button>4</button>
<button>5</button>
<button>6</button>
<button class="operator">-</button>
</div>
<div>
<button>1</button>
<button>2</button>
<button>3</button>
<button class="operator">+</button>
</div>
<div>
<button>00</button>
<button>0</button>
<button>.</button>
<button class="EqualBtn">=</button>
</div>
<script src="calculator.js"></script>
</body>
</html>@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
* {
margin: auto;
padding: 0px;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
margin:auto;
width: 100%;
height: 100vh;
display:flex;
justify-self: center;
background-color: rgb(21, 23, 23);
}
.CALCULATOR{
border: 1px solid #0a0000;
padding: 20px;
border-radius: 16px;
background-color: transparent;
box-shadow: 0px 3px 15px rgba(113, 115, 119);
}
input{
width: 320px;
border: none;
padding: 24px;
margin: 10px;
background: transparent;
box-shadow: 0px 3px 15px rgbs(84, 84, 84, 0.1);
font-size: 40px;
text-align: right;
cursor: pointer;
color: aliceblue;
}
input::placeholder{
color: azure;
}
button{
border: none;
width: 60px;
height: 60px;
margin: 10px;border-radius: 50%;
background: transparent;
color:white;
font-size: 20px;
box-shadow:-8px -8px 15px rgba(225, 225, 225, 0.2) ;
cursor: pointer;
}
.EqualBtn{
background-color:orange;
}
.operator{
color:green;
}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;
}
})
})
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.