calculator in html

Solutions on MaxInterview for calculator in html by the best coders in the world

showing results for - "calculator in html"

26 May 2019

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Calculator </title>
7  </head>
8
9  <!--CSS File-->
10
11  	* {
12  margin: 0;
13  padding: 0;
14  box-sizing: border-box;
15}
16body {
17  display: flex;
18  justify-content: center;
19  align-items: center;
20  min-height: 100vh;
21  background: #fffbd5; /* fallback for old browsers */
22  background: -webkit-linear-gradient(
23    to right,
24    #b20a2c,
25    #fffbd5
26  ); /* Chrome 10-25, Safari 5.1-6 */
27  background: linear-gradient(
28    to right,
29    #b20a2c,
30    #fffbd5
31  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
32}
33.container-first {
34  position: relative;
35  background: #0b8000;
36  border-radius: 6px;
37  overflow: hidden;
38  z-index: 10;
39}
40.container-first .calculator {
41  position: relative;
42  display: grid;
43}
44.container-first .calculator .value {
45  grid-column: span 4;
46  height: 140px;
47  width: 300px;
48
49  border: none;
50  padding-left: 1em;
51
52  font-size: 2.5em;
53
54  color: gold;
55}
56.container-first .calculator span {
57  display: grid;
58  height: 4.5em;
59  font-weight: 900;
60  color: rgb(255, 255, 255);
61  text-align: center;
62  align-items: center;
63
64  font-size: 20px;
65  user-select: none;
66  border-bottom: 4px solid rgba(255, 255, 255, 0.07);
67  border-right: 4px solid rgba(255, 255, 255, 0.07);
68}
69input[type="text"] {
70  color: rgb(255, 136, 0);
71  background-color: rgb(156, 40, 40);
72}
73  <body>
74    <div class="container-first">
75      <form name="val" class="calculator">
76        <input type="text" class="value" name="ans" />
77        <span onclick="document.val.ans.value+='4'">4</span>
78        <span onclick="document.val.ans.value+='5'">5</span>
79        <span onclick="document.val.ans.value+='6'">6</span>
80
81
82        <span onclick="document.val.ans.value =eval(document.val.ans.value)">
83          =
84        </span>
85
86
87        <span onclick="document.val.ans.value+='7'">7</span>
88        <span onclick="document.val.ans.value+='8'">8</span>
89        <span onclick="document.val.ans.value+='9'">9</span>
90        <span onclick="document.val.ans.value+='-'">-</span>
91
92        <span onclick="document.val.ans.value+='1'">1</span>
93        <span onclick="document.val.ans.value+='2'">2</span>
94        <span onclick="document.val.ans.value+='3'">3</span>
95
96        <span onclick="document.val.ans.value+='/'">/</span>
97
98        <span onclick="document.val.ans.value+='0'">0</span>
99        <span onclick="document.val.ans.value=''">C</span>
100        <span onclick="document.val.ans.value+='*'">*</span>
101
102        <span onclick="document.val.ans.value+='00'">00</span>
103
104        <span onclick="document.val.ans.value+='+'">+</span>
105      </form>
106    </div>
107  </body>
108</html>

Daryl

07 May 2018

1<!DOCTYPE HTML>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>Calculator Made by Sanjith </title>
6<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
7<style>
8    * {
9        font-family: 'Inconsolata', monospace;
10        color: rgb(0, 0, 0);
11    }
12    body {
13        background: linear-gradient(to right, rgb(24, 184, 168), rgb(118, 190, 50));;
14    }
15    .container {
16        width: 320px;
17        background: linear-gradient(to right, rgb(173, 58, 173), rgb(184, 63, 26));;
18        margin: 120px auto;
19    }
20    table {
21        width: 100%;
22        border-color: #09646407;
23        background: linear-gradient(to right, rgb(184, 24, 37), rgb(78, 13, 230));;
24    }
25    td {
26        width: 25%;
27        border-color: rgba(0, 0, 0, 0.363);
28    }
29    button {
30        width: 100%;
31        height: 70px;
32        font-size: 24px;
33        background: linear-gradient(to right, rgb(151, 11, 151), rgb(190, 94, 50));;      
34        border: none;
35    }
36    #inputLabel {
37        height: 120px;
38        font-size: 40px;
39        vertical-align: bottom;
40        text-align: right;
41        padding-right: 16px;
42        background: linear-gradient(to right, rgb(4, 65, 88), rgb(226, 68, 47));;
43    }
44</style>
45</head>
46<body>
47<div class="container">
48    <table border="1" cellspacing="0">
49        <tr>
50            <td colspan="4" id="inputLabel">0</td>
51        </tr>
52        <tr>
53            <td colspan="3"><button onclick="pushBtn(this);">AC</button></td>
54            <td><button onclick="pushBtn(this);">/</button></td>
55        </tr>
56        <tr>
57            <td><button onclick="pushBtn(this);">7</button></td>
58            <td><button onclick="pushBtn(this);">8</button></td>
59            <td><button onclick="pushBtn(this);">9</button></td>
60            <td><button onclick="pushBtn(this);">*</button></td>
61        </tr>
62        <tr>
63            <td><button onclick="pushBtn(this);">4</button></td>
64            <td><button onclick="pushBtn(this);">5</button></td>
65            <td><button onclick="pushBtn(this);">6</button></td>
66            <td><button onclick="pushBtn(this);">-</button></td>
67        </tr>
68        <tr>
69            <td><button onclick="pushBtn(this);">1</button></td>
70            <td><button onclick="pushBtn(this);">2</button></td>
71            <td><button onclick="pushBtn(this);">3</button></td>
72            <td><button onclick="pushBtn(this);">+</button></td>
73        </tr>
74        <tr>
75            <td colspan="2"><button onclick="pushBtn(this);">0</button></td>
76            <td><button onclick="pushBtn(this);">.</button></td>
77            <td><button onclick="pushBtn(this);">=</button></td>
78        </tr>
79    </table>
80</div>
81 
82<script>
83    var inputLabel = document.getElementById('inputLabel');
84     
85    function pushBtn(obj) {
86         
87        var pushed = obj.innerHTML;
88         
89        if (pushed == '=') {
90            // Calculate
91            inputLabel.innerHTML = eval(inputLabel.innerHTML);
92             
93        } else if (pushed == 'AC') {
94            // All Clear
95            inputLabel.innerHTML = '0';
96             
97        } else {
98            if (inputLabel.innerHTML == '0') {
99                inputLabel.innerHTML = pushed;
100                 
101            } else {
102                inputLabel.innerHTML += pushed;   
103            }
104        }
105    }
106</script>
107</body>
108</html>

Lara

24 Apr 2018

1x = input("first number")
2y = input("second number")
3z = input("do you want to multiply, minus, divide or add? (x,-,/,+)")
4
5y = int(y)
6x = int(x)
7
8if z == "+":
9    print (x + y)
10
11if z == "/":
12    print (x / y)
13
14if z == "x":
15    print (x * y)
16
17if z == "-":
18    print (x - y)
19
20else:
21    print("use x,-,/ or + next time!")

Roscoe

25 Nov 2016

1<body>
2  
3   <center>
4    <h1 class="text-danger">Calculator</h1> 
5    <p class="q">Type in the numbers to be added, separate them with commas (,). If 'Invalid' shows, you have not used a number, please clear the box and type numbers</p>
6   </center>
7
8    <center>
9    <h3 style="font-family: Lucida Sans; color: lightseagreen">Add</h3>
10    <input class="addinput" type="text">
11   <button class="add" style="font-family: Lucida Sans; background-color: lightsalmon">ADD</button>
12   <p class="p" style="background-color:lightpink">Sum is <span class="result"></span></p>
13   </center>
14 
15<center>
16    <h3 style="font-family: Lucida Sans; color: lightseagreen">Multiply</h3>
17  <input class="multiplyinput" type="text">
18  <button class="multiply" style="font-family: Lucida Sans; background-color: lightsalmon">MULTIPLY</button>
19   <p class="p" style="background-color:lightpink"></p>>Product is <span class="product"></span></p>
20</center>
21
22<center>
23        <h3 style="font-family: Lucida Sans; color: lightseagreen">Subtract</h3>
24    <input class="subtractinput" type="text">
25    <button class="subtract" style="font-family: Lucida Sans; background-color: lightsalmon">SUBTRACT</button>
26     <p class="p" style="background-color:lightpink"></p>>Difference is <span class="difference"></span></p>
27  </center>
28
29  <center>
30        <h3 style="font-family: Lucida Sans; color: lightseagreen">Divide</h3>
31    <input class="divideinput" type="text">
32    <button class="divide" style="font-family: Lucida Sans; background-color: lightsalmon">DIVIDE</button>
33     <p class="p" style="background-color:lightpink"></p>>Quotient is <span class="quotient"></span></p>
34  </center>
35  
36   <script src="calculator.js"></script>
37
38</body>

similar questions

html code for scientific calculator how to make a scientific calculator in html and css how to create a simple calculator in html calculator

queries leading to this page