Wednesday, 3 August 2016

CREATE A SIMPLE HTML CALCULATOR(purely html and css no javascript)

           
  2 comments  
CREATE THE CSS FOR THE FILE(cal.css)

.container ul
{
  width:50%;
  height: auto;
   float: left;
margin-left: 22%;
margin-top: 5%;
list-style-type: none
}

ul li input
{
 width:100px;
}

ul li 
{
padding: 1%;
float: left
}
input
{
  width:400px;
 margin-top: 8%;
margin-left: 30%;
height: 50px;
 }
 body
{
 background-color:black;
}


CREATING THE HTML FOR THE FILE(calculator.html)
<html>
 <head>
 <link href="cal.css" rel="stylesheet">
</head>
 <body>
<div class="container">
<form name="calculator">
<input type="textfield" name="ans" value="" align="center">
<ul>
<li><input type="button" value="1" onclick="document.calculator.ans.value+='1' "></li>
<li><input type="button" value="2" onclick="document.calculator.ans.value+='2' "></li>
<li><input type="button" value="3" onclick="document.calculator.ans.value+='3' "></li>
<li><input type="button" value="4" onclick="document.calculator.ans.value+='4' "></li>
<li><input type="button" value="5" onclick="document.calculator.ans.value+='5' "></li>
<li><input type="button" value="6" onclick="document.calculator.ans.value+='6' "></li>
<li><input type="button" value="7" onclick="document.calculator.ans.value+='7' "></li>
<li><input type="button" value="8" onclick="document.calculator.ans.value+='8' "></li>
<li><input type="button" value="9" onclick="document.calculator.ans.value+='9' "></li>
<li><input type="button" value="0" onclick="document.calculator.ans.value+='0' "></li>
<li><input type="button" value="-" onclick="document.calculator.ans.value+='-' "></li>
<li><input type="button" value="*" onclick="document.calculator.ans.value+='*' "></li>
<li><input type="button" value="/" onclick="document.calculator.ans.value+='/' "></li>
<li><input type="button" value="+" onclick="document.calculator.ans.value+='+' "></li>
<li><input type="button" value="=" onclick="document.calculator.ans.value=eval(document.calculator.ans.value)"></li>
</ul>
</form>
</div>
</html>


here is what your preview should look like if your code is correct
 
Share:

2 comments:

  1. Unknown4 August 2016 at 03:35

    thanks this actually worked

    ReplyDelete
  2. Anonymous30 March 2022 at 03:07

    Create A Simple Html Calculator(Purely Html And Css No Javascript) ~ Itgist >>>>> Download Now

    >>>>> Download Full

    Create A Simple Html Calculator(Purely Html And Css No Javascript) ~ Itgist >>>>> Download LINK

    >>>>> Download Now

    Create A Simple Html Calculator(Purely Html And Css No Javascript) ~ Itgist >>>>> Download Full

    >>>>> Download LINK

    ReplyDelete