Skip to main content

How to create a calculator using HTML, CSS & JavaScript

Create a Calculator Using HTML ,CSS & JavaScript

How to create a calculator using HTML, CSS & JavaScript


Source :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dynamic Calculator</title>
<style>
body
{
background:#ecf0f1;
font-family:arial;
}
#calBody
{
padding:10px;
background:#3498db;
width:300px;
height:310px;
margin:auto;
top:0px;
right:0px;
left:0px;
bottom:0px;
position:absolute;
-webkit-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.15);
box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.15);
}
#calBody h1
{
color:#ecf0f1;
font-weight:normal;
text-align:center;
}
#calBody input, #answer
{
padding:10px; width:270px;
border:none;
margin:auto;
display:block;
margin-bottom:10px;
font-size:24px;
color:#34495e;
background:#ecf0f1;
}
#buttons
{
width:230px;
margin:auto;
}
#buttons button
{
height:50px;
width:50px;
border:none;
background:#34495e;
margin:2px;
font-size:24px;
color:#ecf0f1;
}
#buttons button:hover
{
background:#CF000F;
}
</style>
</head>
<body>
<div id="calBody">
        <h1>Dynamic Calculator</h1>
        <input type="number" min="0" id="num1">
            <input type="number" min="0" id="num2">
            <div id="answer">
            0
            </div>
            <div id="buttons">
            <button onClick="addition()">+</button>
                <button onClick="subus()">-</button>
                <button onClick="multi()">x</button>
                <button onClick="devi()">/</button>
            </div>
        </div>
     
        <script>
function addition()
{
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var ans = num1+num2
document.getElementById('answer').innerHTML = ans;
}
function subus()
{
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var ans = num1-num2
document.getElementById('answer').innerHTML = ans;
}
function multi()
{
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var ans = num1*num2
document.getElementById('answer').innerHTML = ans;
}
function devi()
{
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var ans = num1/num2
document.getElementById('answer').innerHTML = ans;
}
</script>
</body>
</html>
Output : 


Labels:

Comments

Post a Comment

Popular posts from this blog

Data units and bits and bytes

Data units and bits and bytes A bit is smallest unit in data, 1 bit = one binary digit 0 or 1 For Processing or virtual 1 bit = One binary digit (0 or 1) 1 nibble = 4 bit 1 byte = 8 bit 1024  bytes = 1 KB (Kilobyte) 1024 KB = 1 MB (Megabyte) 1024 MB = 1 GB (Gigabyte) 1024 GB = 1 TB (Terabyte) 1024 TB = 1 PB (Petabyte) 1024 PB = 1 EB (Exabyte) 1024 EB = 1 ZB (Zettabyte) 1024 ZB = 1 YB (Yottabyte) 1024 YB = 1 BB (Brontobyte) 1024 BB = 1 GB (Geopbyte) For Storage 1 bit = One binary digit (0 or 1) 1 nibble = 4 bit 1 byte = 8 bit 1000 bytes = 1 KB (Kilobyte) 1000 KB = 1 MB (Megabyte) 1000 MB = 1 GB (Gigabyte) ...
Post a Comment
Read more

MYSQLI DELETE table data using Parameters Prepared Statements (PHP)

Select and delete data from MySQL table using PHP help of  Parameters Prepared Statements. The output will be this. Source of  the Main page: <?php @$conn = mysqli_connect('localhost','root','','testdb') or die("Please check your database username and password") ?> <!doctype html> <html> <head> <meta charset="utf-8"> <title>Insert into table</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> #myform { margin:20px; -webkit-box-shadow: 0px ...
Post a Comment
Read more

MYSQLI INSERT INTO table using Parameters Prepared Statements (PHP)

Insert data into mysql table using PHP help of  Parameters Prepared Statements. Why use parameters in your php applications? This is secure This is error less Faster then any others Source : <?php @$conn = mysqli_connect('localhost','root','','testdb') or die("Please check your database username and password") ?> <!doctype html> <html> <head> <meta charset="utf-8"> <title>Insert into table</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> #myfo...
Post a Comment
Read more