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

Windows all version product key free

Product key for window vista : Vista | Ultimate | Acer | 3YDB8-YY3P4-G7FCW-GJMPG-VK48C Vista | Ultimate | Advent | 39MVW-K8KKQ-BGJ9B-24PMW-RYQMV Vista | Ultimate | Alienware | 7QVFM-MF2DT-WXJ62-XTYX3-P9YTT Vista | Ultimate | Asus | 6F2D7-2PCG6-YQQTB-FWK9V-932CC Vista | Ultimate | Dell | 2QBP3-289MF-9364X-37XGX-24W6P Vista | Ultimate | DixonsXP | 6JPQR-4G364-2B7P7-83FXW-DR8QC Vista | Ultimate | Gateway | 6P8XK-GDDTB-X9PJQ-PYF36-G8WGV Vista | Ultimate | Hedy | 7R2C3-DWCBG-C8G96-MPT8T-K37C7 Vista | Ultimate | HP | 23CM9-P7MYR-VFWRT-JGH7R-R933G Vista | Ultimate | Lenovo | 24J6Q-YJJBG-V4K4Q-2J8HY-8HBQQ Vista | Ultimate | OQO | C4QGV-XHYYT-9PW8R-DCFTQ-FBD6M Vista | Ultimate | Toshiba | 33G3W-JY3XQ-CQQ7C-TG96R-R6J6Q Vista | Ultimate | Sony | 2KKTK-YGJKV-3WMRR-3MDQW-TJP47 Vista | Ultimate | Stone | GVV4P-RQXD7-X9XKB-M2G9H-C93VM Vista | Ultimate | Velocity Micro | 9BKKK-7Y888-MHD67-HHXTB-332K9 Vista | Business | Acer | 2TJTJ-C72D7-7BCYH-FV3HT-JGD4F Vista | Bus...
1 comment
Read more

How to access Xampp or Wamp with Skype in one client system.

Xampp or Wamp with Skype in one computer system Note: many people tell me their problem that they can't use xampp or wamp with skype in same computer.  Problem is the port problem. in computer and device application software run with the help of OS port. xampp and skype run as default same port (80). the solution is if I change the skype or xampp application the both software run smoothe and the same time. Now steps here. open skype > go to tools > then Option > goto advance > connection Click to save and now you can use both applications in side by side on one computer.
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