how to make a simple Calculater :-
Hello friends in this article you can Learn about how to make a simple Calculater by using HTML CSS and JAVASCRIPT.
Here you can see html css and JavaScript code :-
<!DOCTYPE html>
<html>
<title> how to make a Simple Calculater by using HTML CSS and JavaScript</title>
<head><center><h1> Simple Calculater</h1></center></head>
<style>
#bt{
width:35px;
height:25px;
margin:2px 2px 2px 2px;
background-color: lightblue;
}
</style>
<script>
function show(val)
{
document.getElementById("result").value += val ;
}
function answer()
{
let x =document.getElementById("result").value
let y = eval (x)
document.getElementById("result").value = y
}
function clr()
{
document.getElementById("result").value = "" ;
}
</script>
<body>
<center> <div style=" width:200px; height:100%; border:2px solid black; background-color: lightgreen;"><br>
<input type ="text" id="result" style="width :160px;" disabled /> <br><br>
<input id="bt" type="button" onclick="show('1')" value="1"/>
<input id="bt" type="button" onclick="show('2')" value="2"/>
<input id="bt" type="button" onclick="show('3')" value="3"/>
<input id="bt" type="button" onclick="show('4')" value="4"/>
<br>
<input id="bt" type="button" onclick="show('5')" value="5"/>
<input id="bt" type="button" onclick="show('6')" value="6"/>
<input id="bt" type="button" onclick="show('7')" value="7"/>
<input id="bt" type="button" onclick="show('8')" value="8"/>
<br>
<input id="bt" type="button" onclick="show('9')" value="9"/>
<input id="bt" type="button" onclick="show('0')" value="0"/>
<input id="bt" type="button" onclick="show('*')" value="*"/>
<input id="bt" type="button" onclick="show('/')" value="/"/>
<br>
<input id="bt" type="button" onclick="show('+')" value="+"/>
<input id="bt" type="button" onclick="show('-')" value="-"/>
<input id="bt" type="button" onclick="show('.')" value="."/>
<input id="bt" type="button" onclick="answer()" value="="/>
<input id="bt" style="width:160px" type="button" onclick="clr()" value="Clear"/>
<br>
</br>
</div></center>
</body>
</html>
Live demo view :-
0 टिप्पणियाँ