HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="calculator.css">
</head>
<body>
<div class="calculator">
<input type="text" placeholder="0" id="inputBtn">
<div>
<button class="button">C</button>
<button class="button">%</button>
<button class="button">M+</button>
<button class="button">M-</button>
</div>
<div>
<button class="button">7</button>
<button class="button">8</button>
<button class="button">9</button>
<button class="button">*</button>
</div>
<div>
<button class="button">4</button>
<button class="button">5</button>
<button class="button">6</button>
<button class="button">/</button>
</div>
<div>
<button class="button">1</button>
<button class="button">2</button>
<button class="button">3</button>
<button class="button">+</button>
</div>
<div>
<button class="button equlBtn">=</button>
<button class="button">0</button>
<button class="button">.</button>
<button class="button ">-</button>
</div>
</div>
<script src="cal.js"></script>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
body{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg , #0a0a0a , #3a4452);
}
.calculator{
border: 1px solid #177377;
padding: 20px;
border-radius: 16px;
background: transparent;
box-shadow: 0 3px 15px rgb(113 , 115, 119 , 0.5);
}
input{
color: white;
width: 320px;
border: none;
padding: 24px;
margin: 10px;
background: transparent;
box-shadow: 0 3px 15px rgb(84 , 84, 84 , 0.1);
font-size: 40px;
text-align: right;
cursor: pointer;
}
input::placeholder{
color: #ffffff;
}
button{
border: none;
width: 60px;
height: 60px;
margin: 10px;
border-radius: 50%;
background: transparent;
font-size: 20px;
box-shadow: -8px -8px 15px rgb(255, 255, 255 , 0.1);
cursor: pointer;
color: #ffffff;
}
.equlBtn{
background-color: #fb7c14;
}
JAVASCRIPT
let string = "";
let buttons = document.querySelectorAll('.button');
Array.from(buttons).forEach((button) =>{
button.addEventListener('click',(e)=>{
if(e.target.innerHTML == '='){
string = eval(string) ;
document.querySelector('input').value = string ;
}
else if(e.target.innerHTML == 'C'){
string = " " ;
document.querySelector('input').value = string ;
}
else {
console.log(e.target)
string = string + e.target.innerHTML ;
document.querySelector('input').value = string ;
}
})
})
No comments:
Post a Comment