How To Create Calculator in HTML Using JavaScript
Hey friends, today in this blog you'll learn How To Create Calculator in HTML Using JavaScript.
In the earlier blog, I have shared Create an Analog Clock using JavaScript and now it's time to Create an Analog Clock using JavaScript.
Hello Friends, We will using HTML, CSS and JavaScript we will make it fun. Today we will learn How To Create Calculator in HTML Using JavaScript. So here is the code and my work. Hope you are gonna love this and share with your friends too.
You Can Also Read: How to create an Animated Search Bar with Toggle Button Using JavaScript.
You Can Also Read: How to create a Navigation Menu Bar in HTML, CSS and JavaScript.
Step 1) Open a any code Editor in any Devices
Step 2) Create a file and save it index.html with .html extension
Step 3) Paste these code on index.html file and save it (ctrl+s)
Add this Code in index.html Page
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <title>Calculator Using JavaScript</title>
5: <link rel="stylesheet" type="text/css" href="css/style.css">
6: </head>
7: <body>
8: <div class="container">
9: <form name="clac">
10: <input type="text" name="text" readonly>
11: <div class="btn">
12: <span onclick="document.clac.text.value += '('" class="opt">(</span>
13: <span onclick="document.clac.text.value += ')'" class="opt">)</span>
14: <span onclick="document.clac.text.value += '%'" class="opt">%</span>
15: <span onclick="document.clac.text.value = ''" class="active">C</span>
16: </div>
17: <div class="btn">
18: <span onclick="document.clac.text.value += '7'" class="num">7</span>
19: <span onclick="document.clac.text.value += '8'" class="num">8</span>
20: <span onclick="document.clac.text.value += '9'" class="num">9</span>
21: <span onclick="document.clac.text.value += '/'" class="opt">/</span>
22: </div>
23: <div class="btn">
24: <span onclick="document.clac.text.value += '4'" class="num">4</span>
25: <span onclick="document.clac.text.value += '5'" class="num">5</span>
26: <span onclick="document.clac.text.value += '6'" class="num">6</span>
27: <span onclick="document.clac.text.value += '*'" class="opt">*</span>
28: </div>
29: <div class="btn">
30: <span onclick="document.clac.text.value += '1'" class="num">1</span>
31: <span onclick="document.clac.text.value += '2'" class="num">2</span>
32: <span onclick="document.clac.text.value += '3'" class="num">3</span>
33: <span onclick="document.clac.text.value += '-'" class="opt">-</span>
34: </div>
35: <div class="btn">
36: <span onclick="document.clac.text.value += '0'" class="num">0</span>
37: <span onclick="document.clac.text.value += '.'" class="opt">.</span>
38: <span onclick="document.clac.text.value = eval(clac.text.value)" class="active">=</span>
39: <span onclick="document.clac.text.value += '+'" class="opt">+</span>
40: </div>
41: </form>
42: </div>
43: </body>
44: </html>
*<link rel="stylesheet" type="text/css" href="css/style.css"> This Code be must be added without these code stylesheet code not run.
Step 4) Again create a file name it style.css with .css extension
Step 5) Paste These Code on style.css Page and save it.
Add this Code in style.css Page
1: *{
2: padding: 0;
3: margin: 0;
4: box-sizing: border-box;
5: }
6: body{
7: font-family: sans-serif;
8: background-color: #03a9f4;
9: }
10: .container{
11: width: 40vw;
12: height: 40vw;
13: margin: 20px auto;
14: }
15: form{
16: width: 90%;
17: margin: 20px auto;
18: text-align: center;
19: }
20: input{
21: border: 2px solid #fff;
22: width: 99%;
23: height: 100px;
24: outline: none;
25: font-size: 22px;
26: }
27: .btn{
28: display: flex;
29: justify-content: center;
30: align-content: center;
31: }
32: span.active{
33: background-color: #0d7ff5eb;
34: }
35: span{
36: flex-basis: 25%;
37: height: 40px;
38: font-size: 25px;
39: margin: 2px 2px;
40: padding: 6px 0px;
41: cursor: pointer;
42: color: #fff;
43: border-radius: 5px;
44: }
45: .opt{
46: background-color: #999;
47: }
48: .num{
49: background-color: #000;
50: }
Step 6) Now Copy File Path and pate it any browser.
Step 7) See magic.....😊
Thank you...........
0 Comments