How to make calculator?
How to make calculator with css and html?
Halo friend this source code is calculator. Ya code do language ko Mila kar banaya ha
1) css
2) HTML
Let's start the code
<!-- Created by Satnam-->
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href="https://fonts.googleapis.com/css?family=Orbitron&display=swap" rel="stylesheet">
</head>
<body>
<div id="container" >
<form name="cal">
<input type="text" id="scr" name="scr" placeholder="0" readonly/>
<div id="cont">
<input type="button" id="btn1" name="b1" onclick="cal.scr.value=''" value="C">
<input type="button" id="btn1" name="b1" onclick="del()" value="←">
<input type="button" id="btn1" name="b1" onclick="cal.scr.value+='%'" value="%">
<input type="button" id="btn1" name="b1" onclick="cal.scr.value+='/'" value="/">
<input type="button" id="btn1" name="b1" onclick="cal.scr.value+='7'" value="7">
<input type="button" id="btn1" name="b1" onclick="cal.scr.value+='8'" value="8">
<input type="button" id="btn1" name="b1" onclick="cal.scr.value+='9'" value="9">
<input type="button" id="btn1" name="b1" onclick="cal.scr.value+='*'" value="*">
<input type="button" id="btn1" name="b1" onclick="cal.scr.value+='4'" value="4">
<input type="button" id="btn1" name="b1" onclick="cal.scr.value+='5'" value="5">
<input type="button" id="btn1" name="b1" onclick="cal.scr.value+='6'" value="6">
<input type="button" id="btn1" name="b1" onclick="cal.scr.value+='-'" value="-">
<input type="button" id="btn1" name="b1" onclick="cal.scr.value+='1'" value="1">
<input type="button" id="btn1" onclick="cal.scr.value+='2'" value="2">
<input type="button" id="btn1" name="b1" onclick="cal.scr.value+='3'" value="3">
<input type="button" id="btn1" name="b1" onclick="cal.scr.value+='+'" value="+">
<input type="button" id="btn1" name="b1" onclick="cal.scr.value+='0'" value="0">
<input type="button" id="btn1" name="b1" onclick="cal.scr.value+='00'" value="00">
<input type="button" id="btn1" name="b1" onclick="cal.scr.value+='.'" value=".">
<input type="button" id="btn1" name="b1" onclick="cal.scr.value =eval(cal.scr.value)" value="="/>
</form>
</div></div>
</body>j
</html>
/* Created by Satnam */
body {
/* background-color:black;*/
}
*{
outline:none;
margin:20px auto;
user-select:none;
}
:root{
--bg-color:grey;
--light-grey-color:#343840;
--light-color:#bcc2c4;
}
#container{
width:280px;
background-color:var(--bg-color);
padding:5px 10px 0px 10px;
border-radius:10px;
}
#scr{
height:45px;
width:90%;
border:none;
flex-grow:1;
background-color:var(--light-color);
font-family: 'Orbitron', sans-serif;
letter-spacing:2px;
font-weight:bolder;
border-radius:5px;
margin-left:7px;
text-align:right;
font-size:20px;
padding-right:15px;
}
#cont{
display:flex;
justify-content: space-between;
flex-wrap:wrap;
flex-basis:1;
}
input[type="button"]{
margin:left:5px;
margin-right:5px;
}
#btn1{
margin-top:-8px;
background-color: var(--light-grey-color);
font-size:18px;
border:none;
color:white;
padding:13px 25px;
border-radius:4px;
}
// Created by Satnam
let del = function(){
let num = document.getElementById("scr").value
document.getElementById("scr").value = num.substring(0,num.length-1)
}
0 Comments