CALCULATOR PROJECT HTML, CSS & JAVASCRIPT
CALCULATOR PROJECT HTML, CSS & JAVASCRIPT
HTML CODE:-
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>Calculator</title>
<link rel=”stylesheet” href=”style.css” />
</head>
<body>
<div class=”main”>
<h1 class=”center”>Calculator</h1>
<div class=”container item-center flex flex-col mx-auto m-w-20″>
<div class=”row”>
<input type=”text”>
</div>
<div class=”row”>
<button class=”button”>C</button>
<button class=”button”>%</button>
<button class=”button”>M+</button>
<button class=”button”>M-</button>
</div>
<div class=”row”>
<button class=”button”>7</button>
<button class=”button”>8</button>
<button class=”button”>9</button>
<button class=”button”>*</button>
</div>
<div class=”row”>
<button class=”button”>4</button>
<button class=”button”>5</button>
<button class=”button”>6</button>
<button class=”button”>/</button>
</div>
<div class=”row”>
<button class=”button”>1</button>
<button class=”button”>2</button>
<button class=”button”>3</button>
<button class=”button”>+</button>
</div>
<div class=”row”>
<button class=”button”>0</button>
<button class=”button”>.</button>
<button class=”button”>=</button>
<button class=”button”>-</button>
</div>
</div>
</div>
<script src=”app.js”></script>
</body>
</html>
CSS CODE:-
html,body{
background-color: #454545;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
font-family: Georgia, ‘Times New Roman’, Times, serif;
}
.main{
background-color: grey;
width: 600px;
height:100vh;
border-radius: 10px;
}
.center{
text-align: center;
}
.bg-red{
background-color: red;
}
.mx-auto{
margin: auto;
}
.flex{
display: flex;
}
.flex-col{
flex-direction: column;
}
.button{
width: 66px;
padding: 20px;
margin: 0 12px;
border: 2px solid black;
cursor: pointer;
border-radius: 5px;
box-shadow: 1px 5px 10px black;
}
.item-center{
align-items: center;
}
.row{
margin: 8px 0px;
}
.row input{
font-size: 20px;
width: 300px;
margin: 0px;
padding: 10px 20px;
border: 2px solid black;
border-radius: 5px;
}
JAVASCRIPT CODE:-
// M+ M- not working
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;
}
});
});
html css,
html css calculator design,
make calculator using javascript,
javascript mini project,
calculator using javascript,
javascript projects for beginners,
javascipt calculator project
Thanks for reading this blog. Hope you get satisfied with the blog and definitely this blog must have valued your time and effort of reading.
Take a time to connect our other digital creations such as Instagram , Facebook and Youtube.
Social Media Links of Tech DCode :
YouTube : https://www.youtube.com/channel/UCjJnEdeugftBwQ3yMuD4B_A
Instagram : https://www.instagram.com/thetechdcode/
Facebook Page : https://www.facebook.com/thetechdcode
Twitter : https://twitter.com/thetechdcode
Telegram Channel : https://t.me/thetechdcode
Tech DCode Linktree : https://linktr.ee/thetechdcode
My Personal Handles : https://linktr.ee/virtualshivamin
Social Media Links of SHIVAM SINGH (OWNER) :
Instagram : https://www.instagram.com/virtualshivamin/
Facebook Page : https://www.facebook.com/virtualshivamin/
Twitter : https://twitter.com/virtualshivamin/
Personal Linktree : https://linktr.ee/virtualshivamin
