Skip to content

Commit fadec44

Browse files
coder-aditya90coder-aditya90
committed
initial commits
0 parents  commit fadec44

File tree

3 files changed

+135
-0
lines changed

3 files changed

+135
-0
lines changed

‎README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
📝 Overview
2+
This is a simple calculator built using HTML for structure and CSS for styling. It provides a basic, functional interface for performing standard arithmetic calculations.
3+
✨ Features
4+
Basic Arithmetic: Supports addition, subtraction, multiplication, and division.
5+
Clean Design: A responsive and easy-to-use interface styled with CSS.
6+
Pure Front-End: Built entirely with HTML and CSS (and usually a small amount of JavaScript for functionality, although you only mentioned HTML/CSS, the README assumes standard calculator functionality).

‎index.html‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
5+
<link rel="stylesheet" href="./style.css">
6+
<title>Document</title>
7+
</head>
8+
<body>
9+
<div id="calculator">
10+
<input type="text" id="display" readonly placeholder="....">
11+
<div class="button-conatiner">
12+
<button class="button" onclick="
13+
currentDisplay = '' ;
14+
document.querySelector('#display').value = currentDisplay;">
15+
c</button>
16+
<button class="button" onclick="
17+
currentDisplay = currentDisplay+ '1' ;
18+
document.querySelector('#display').value = currentDisplay;"
19+
>1</button>
20+
<button class="button" onclick="
21+
currentDisplay = currentDisplay+ '2' ;
22+
document.querySelector('#display').value = currentDisplay;"
23+
>2</button>
24+
<button class="button" onclick="
25+
currentDisplay = currentDisplay+ '+' ;
26+
document.querySelector('#display').value = currentDisplay;"
27+
>+</button>
28+
<button class="button" onclick="
29+
currentDisplay = currentDisplay+ '3' ;
30+
document.querySelector('#display').value = currentDisplay;
31+
">3</button>
32+
<button class="button" onclick="
33+
currentDisplay = currentDisplay+ '4' ;
34+
document.querySelector('#display').value = currentDisplay;"
35+
>4</button>
36+
<button class="button" onclick="
37+
currentDisplay = currentDisplay+ '-' ;
38+
document.querySelector('#display').value = currentDisplay;"
39+
>-</button>
40+
<button class="button" onclick="
41+
currentDisplay = currentDisplay+ '5' ;
42+
document.querySelector('#display').value = currentDisplay;"
43+
>5</button>
44+
<button class="button" onclick="
45+
currentDisplay = currentDisplay+ '6' ;
46+
document.querySelector('#display').value = currentDisplay;"
47+
>6</button>
48+
<button class="button" onclick="
49+
currentDisplay = currentDisplay+ '*' ;
50+
document.querySelector('#display').value = currentDisplay;"
51+
>*</button>
52+
<button class="button" onclick="
53+
currentDisplay = currentDisplay+ '7' ;
54+
document.querySelector('#display').value = currentDisplay;"
55+
>7</button>
56+
<button class="button" onclick="
57+
currentDisplay = currentDisplay+ '8' ;
58+
document.querySelector('#display').value = currentDisplay;"
59+
>8</button>
60+
<button class="button" onclick="
61+
currentDisplay = currentDisplay+ '/' ;
62+
document.querySelector('#display').value = currentDisplay;"
63+
>/</button>
64+
<button class="button" onclick="
65+
let result =
66+
currentDisplay = eval(currentDisplay); ;
67+
document.querySelector('#display').value = currentDisplay;" >=</button>
68+
<button class="button" onclick="
69+
currentDisplay = currentDisplay+ '9' ;
70+
document.querySelector('#display').value = currentDisplay;"
71+
>9</button>
72+
<button class="button" onclick="
73+
currentDisplay = currentDisplay+ '0' ;
74+
document.querySelector('#display').value = currentDisplay;"
75+
>0</button>
76+
<button class="button" onclick="
77+
currentDisplay = currentDisplay+ '.' ;
78+
document.querySelector('#display').value = currentDisplay;"
79+
>.</button>
80+
81+
82+
83+
</div>
84+
</div>
85+
86+
<script>
87+
let currentDisplay = '';
88+
document.querySelector('#display').value = currentDisplay;
89+
</script>
90+
</body>
91+
</html>

‎style.css‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
body{
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
6+
}
7+
8+
#calculator{
9+
border: 1px solid rgb(173, 60, 60);
10+
border-radius: 5px;
11+
width: 200px;
12+
background-color: rgb(185, 174, 231);
13+
14+
15+
16+
}
17+
#display{
18+
margin: 10px ;
19+
width: 85%;
20+
font-size: 25px;
21+
color: rgb(12, 12, 12);
22+
background-color: aquamarine;
23+
24+
25+
}
26+
.button{
27+
width: 45px;
28+
height: 45px;
29+
margin: 3px;
30+
color:black;
31+
background-color: rgb(165, 215, 215);
32+
cursor: pointer;
33+
}
34+
.button-conatiner{
35+
display: flex;
36+
justify-content: center;
37+
flex-wrap: wrap;
38+
}

0 commit comments

Comments
 (0)