Hallo guys My name is MUDASIR SIDDIQUI And today we will learn that how to make calculator using Html and CSS language so friends ma calculator Ka code like raha ho phala html Ka code ho ga or bad ma CSS Ka code ho ga or sath ma ma heading Bhai da do ga let's start the code
 |
| how to make calculator using only Html and CSS language |
Html 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>
CSS code
/* 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)
}
Thanks for see this post
0 Comments