HOW TO MAKE CALCULATOR USING HTML CSS JAVASCRIPT ?
HOW TO MAKE CALCULATOR USING HTML CSS JAVASCRIPT ?
HELLO
TODAY I MAKE CALCULATOR
USE TO HTML CSS JAVA SCRIPT
LET'S START
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<title>Calculator</title>
</head>
<body>
<div class="main">
<input type="text" id="res" placeholder="0">
<div class="btn">
<input type="button" value="C" onclick="Clear()">
<input type="button" value="%" onclick="Solve('%')">
<input type="button" value="DEL" onclick="Back('DEL')">
<input type="button" value="/" onclick="Solve('/')">
<br>
<input type="button" value="7" onclick="Solve('7')">
<input type="button" value="8" onclick="Solve('8')">
<input type="button" value="9" onclick="Solve('9')">
<input type="button" value="*" onclick="Solve('*')">
<br>
<input type="button" value="4" onclick="Solve('4')">
<input type="button" value="5" onclick="Solve('5')">
<input type="button" value="6" onclick="Solve('6')">
<input type="button" value="-" onclick="Solve('-')">
<br>
<input type="button" value="1" onclick="Solve('1')">
<input type="button" value="2" onclick="Solve('2')">
<input type="button" value="3" onclick="Solve('3')">
<input type="button" value="+" onclick="Solve('+')">
<br>
<input type="button" value="00" onclick="Solve('00')">
<input type="button" value="0" onclick="Solve('0')">
<input type="button" value="." onclick="Solve('.')">
<input type="button" value="=" onclick="Result()">
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS CODE
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,100&display=swap');
*{
margin: 0;
padding: 0;
font-family: 'poppins', sans-serif;
}
body{
background-color: gray;
display: grid;
height: 100vh;
place-items: center;
}
.main{
width: 400px;
height: 450px;
background: rgb(51, 48, 48);
position: absolute;
border: 5px solid black;
border-radius: 20px;
}
.main input[type='text']{
width: 88%;
position: relative;
height: 80px;
top: 5px;
text-align: right;
padding: 3px 6px;
outline: none;
font-size: 40px;
background: transparent;
border: 5px solid black;
display: flex;
margin: auto;
border-radius: 10px;
color: white;
}
.btn input[type='button']{
width: 90px;
padding: 2px;
margin: 2px 0px;
position: relative;
left: 13px;
top: 20px;
height: 60px;
cursor: pointer;
font-size: 18px;
transition: 0.5s;
background-color: #d0f0dc;
border-radius: 70%;
color: black;
}
.btn input[type='button']:hover{
background-color: black;
color: white;
}
JAVA SCRIPT CODE
function Solve(val){
var v = document.getElementById('res');
v.value += val;
}
function Result(){
var num1=
document.getElementById('res').value;
var num2 = eval(num1);
document.getElementById('res').value = num2;
}
function Clear(){
var inp = document.getElementById('res');
inp.value= '';
}
function Back(){
var ev = document.getElementById('res');
ev.value = ev.value.slice(0, -1);
}
Comments
Post a Comment