├── Claculator
    ├── index.js
    ├── style.css
    └── index.html
├── style.css
├── script.js
├── README.md
└── index.html


/Claculator/index.js:
--------------------------------------------------------------------------------
 1 | const display = document.getElementById("display");
 2 | function appendToDisplay(input){
 3 |     display.value += input;
 4 | }
 5 | function clearDisplay(){
 6 |     display.value = "";
 7 | }
 8 | function calculate(){
 9 |     try{
10 |         display.value = eval(display.value);
11 |     }
12 |     catch(error){
13 |         display.value = "Error";
14 |     }
15 | }


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | .calculator{
 2 |     width: 300px;
 3 |     background-color: black;
 4 |     color: white;
 5 |     border-radius: 5px;
 6 |     padding: 15px;
 7 |     display: felx;
 8 |     flex-wrap: wrap;
 9 | }
10 | input{
11 |     width: 100%;
12 |     padding: 5px;
13 | }
14 | .btn{
15 |     border-radius: 100%;
16 |     width: 50px;
17 |     height: 50px;
18 |     margin: 10px;
19 | }


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
 1 | function displayvalue(val){
 2 |     document.getElementById("display").value= document.getElementById("display").value + val
 3 | }
 4 | function clearscreen(){
 5 |     document.getElementById("display").value = " "
 6 | }  
 7 | function calculate(){
 8 |     var userinput = document.getElementById("display").value
 9 |     var result = eval(userinput)
10 |     document.getElementById("display").value = result
11 | }
12 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 🧮 Calculator Web App
 2 | 
 3 | A basic and responsive calculator web app that performs standard arithmetic operations.
 4 | 
 5 | ## ✨ Features
 6 | 
 7 | - Addition, Subtraction, Multiplication, Division
 8 | - Clear and Delete functionality
 9 | - Responsive design for all screen sizes
10 | 
11 | ## 🔗 Live Demo
12 | 
13 | Check it out here: [akash-calc.netlify.app](https://akash-calc.netlify.app/)
14 | 
15 | ## 🛠️ Tech Used
16 | 
17 | - **HTML**
18 | - **CSS**
19 | - **JavaScript**
20 | 
21 | 
22 | 
23 | 


--------------------------------------------------------------------------------
/Claculator/style.css:
--------------------------------------------------------------------------------
 1 | 
 2 | body{
 3 |     margin: 0;
 4 |     display: flex;
 5 |     justify-content: center;
 6 |     align-items: center;
 7 |     height: 100vh;
 8 |     background-color: hsl(0, 0%, 85%);
 9 | }
10 | #calculator{
11 |     font-family: Arial, sans-serif;
12 |     background-color: hsl(0, 0%, 15%);
13 |     border-radius: 20px;
14 |     max-width: 500px;
15 |     overflow: hidden;
16 | }
17 | 
18 | #display{
19 |     width: 100%;
20 |     padding: 20px;
21 |     font-size: 5rem;
22 |     text-align: left;
23 |     border: none;
24 |     background-color: hsl(0, 0%, 20%);
25 |     color: white;
26 | }
27 | 
28 | #keys{
29 |     display: grid;
30 |     grid-template-columns: repeat(4,1fr);
31 |     gap: 10px;
32 |     padding: 25px;
33 | }
34 | 
35 | button{
36 |     width: 100px;
37 |     height: 100px;
38 |     border-radius: 100%;
39 |     border: none;
40 |     background-color: hsl(0, 0%, 30%);
41 |     color: white;
42 |     font-weight: bold;
43 |     font-size: 3rem;
44 |     cursor: pointer;
45 | }
46 | 
47 | button:hover{
48 |     background-color: hsl(0, 0%, 45%);
49 | }
50 | button:active{
51 |     background-color: hsl(0, 0%, 55%);
52 | }
53 | .btn{
54 |     background-color: hsl(35, 100%, 55%);
55 | }
56 | .btn:hover{
57 |     background-color: hsl(35, 100%, 65%);
58 | }
59 | .btn:active{
60 |     background-color: hsl(35, 100%, 75%);
61 | }


--------------------------------------------------------------------------------
/Claculator/index.html:
--------------------------------------------------------------------------------
 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 |     <link rel="stylesheet" href="style.css">
 8 | </head>
 9 | <body>
10 |     <div id="calculator">
11 |         <input type="text" id="display" readonly>
12 |         <div id="keys">
13 |             <button onclick="appendToDisplay('+')" class="btn">+</button>
14 |             <button onclick="appendToDisplay('7')">7</button>
15 |             <button onclick="appendToDisplay('8')">8</button>
16 |             <button onclick="appendToDisplay('9')">9</button>
17 |             <button onclick="appendToDisplay('-')" class="btn">-</button>
18 |             <button onclick="appendToDisplay('4')">4</button>
19 |             <button onclick="appendToDisplay('5')">5</button>
20 |             <button onclick="appendToDisplay('6')">6</button>
21 |             <button onclick="appendToDisplay('*')" class="btn">*</button>
22 |             <button onclick="appendToDisplay('1')">1</button>
23 |             <button onclick="appendToDisplay('2')">2</button>
24 |             <button onclick="appendToDisplay('3')">3</button>
25 |             <button onclick="appendToDisplay('/')" class="btn">/</button>
26 |             <button onclick="appendToDisplay('0')">0</button>
27 |             <button onclick="appendToDisplay('.')">.</button>
28 |             <button onclick="calculate()">=</button>
29 |             <button onclick="clearDisplay()" class="btn">C</button>
30 |         </div>
31 |     </div>
32 |    <script  src="index.js"></script>
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 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 |     <link rel="stylesheet" href="style.css">
 8 | </head>
 9 | <body>
10 |     <script src="script.js"></script>
11 |     <div class="calculator">
12 |         <h1>BASIC CALCULATOR</h1>
13 |         <input type="text" id="display">
14 |         <div class="buttons">
15 |             <button class="btn" onclick="clearscreen()">C</button>
16 |             <div class="button-wrap">
17 |                 <button class="btn" onclick="displayvalue(7)">7</button>
18 |                 <button class="btn" onclick="displayvalue(8)">8</button>
19 |                 <button class="btn" onclick="displayvalue(9)">9</button>
20 |                 <button class="btn" onclick="displayvalue('/')">/</button>
21 |             </div>
22 |             <div class="button-wrap">
23 |                 <button class="btn" onclick="displayvalue(4)">4</button>
24 |                 <button class="btn" onclick="displayvalue(5)">5</button>
25 |                 <button class="btn" onclick="displayvalue(6)">6</button>
26 |                 <button class="btn" onclick="displayvalue('*')">*</button>
27 |             </div>
28 |             <div class="button-wrap">
29 |                 <button class="btn" onclick="displayvalue(1)">1</button>
30 |                 <button class="btn" onclick="displayvalue(2)">2</button>
31 |                 <button class="btn" onclick="displayvalue(3)">3</button>
32 |                 <button class="btn" onclick="displayvalue('+')">+</button>
33 |             </div>
34 |             <div class="button-wrap">
35 |                 <button class="btn" onclick="displayvalue('.')">.</button>
36 |                 <button class="btn" onclick="displayvalue(0)">0</button>
37 |                 <button class="btn" onclick="calculate()">=</button>
38 |                 <button class="btn" onclick="displayvalue('-')">-</button>
39 |             </div>
40 |         </div>
41 |     </div>
42 | </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------