How to make a calculator using HTML, css, javaScript
Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript.
Let's learn through this video how to develop a web based simple calculator using these things.
HTML, css, javaScript භාවිතයෙන් සරල කැල්කියුලේටර් එකක් develope කරන හැටි
Watch the video now :
https://youtu.be/DHEjJW_Tx0U
Check out my youtube channel :
https://www.youtube.com/channel/UCLD_EGJOhzPx4qu1OhOfeJg
Outcome :
Here is the 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>
Join with me to do programming tutorials in java, c, c++ and many other programming languages.
ප්රෝගැමින් කරන්න මාත් එක්ක එකතු වෙන්න.
https://www.youtube.com/playlist?list=PL9bX56YkynoJtNngfs-7G5kxklzfO14no
We will meet again.
Thank You!
Unauthorized things may be subject to copy rights.
@thathsarahewage | SriLanka2020
Comments
Post a Comment