Hello 😀 !
I developed a simple calculator using HTML, css and JavaScript after my 2nd year 1st semester final examinations.I am writing this post to my blog at the beginning of my 3rd year 1st semester in university after creating my blog.
Only for the self-study purpose.
Code :
<html>
<head>
<script>
function insert(num)
{
document.form.textView.value = document.form.textView.value + num
}
function equal()
{
var exp = document.form.textView.value;
if(exp)
{
document.form.textView.value = eval(exp)
}
}
function clean()
{
document.form.textView.value ="";
}
</script>
<style>
.button{
width : 50;
height : 50;
font-size : 25;
cursor:pointer;
}
.textView
{
width : 215;
margin : 5;
font-size:25;
padding : 5;
}
.main
{
position:absolute;
top:20%;
left:40%;
transform:translateX(-50%)traslateY(-50%);
}
.background
{
background:linear-gradient(to right,red , blue);
height:100%;
}
</style>
</head>
<body>
<div class="background">
</div>
<div class="main">
<form name = "form">
<input type = "text" class="textView" name="textView">
<table>
<tr>
<td colspan=2><input type="button" style="width:
106" class = "button" value="C" onclick="clean()"></td>
<td><input type="button" class="button" value="/" onclick="insert('/')"></td>
<td><input type="button" class="button" value="*" onclick="insert('*')"></td>
</tr>
<tr>
<td><input type="button" class="button" value="1" onclick="insert(1)"></td>
<td><input type="button" class="button" value="2" onclick="insert(2)"></td>
<td><input type="button" class="button" value="3" onclick="insert(3)"></td>
<td><input type="button" class="button" value="-" onclick="insert('-')"></td>
</tr>
<tr>
<td><input type="button" class="button" value="4" onclick="insert(4)"></td>
<td><input type="button" class="button" value="5" onclick="insert(5)"></td>
<td><input type="button" class="button" value="6" onclick="insert(6)" ></td>
<td><input type="button" class="button" value="+" onclick="insert('+')"></td>
</tr>
<tr>
<td><input type="button" class = "button" value="7" onclick="insert(7)"></td>
<td><input type="button" class = "button" value="8" onclick="insert(8)"></td>
<td><input type="button" class = "button"value="9" onclick="insert(9)"></td>
<td rowspan=5 ><input type="button" class =
"button" style="height: 106" value="=" onclick="equal()"></td>
</tr>
<tr>
<td colspan=2 ><input type="button" style="width:
106" class = "button" value="0" onclick="insert(0)"></td>
<td><input type="button" class = "button" value="." onclick="insert('.')"></td>
</tr>
</table>
</div>
</form>
<footer>
<label>Connect with me through youtube,instagram,facebook ,linkedIN |>>>> SathsaRa</label><br>
<label>Warnings : Unauthorized copyings may be subjects to copy rights</label><br>
<label>Developed by ThathsaraHewage2020 | June15</label><br>
</footer>
</body>
</html>
Thank you for visiting my blog !
Comments
Post a Comment