├── cal.js
├── README.md
├── cal.css
└── calc.html


/cal.js:
--------------------------------------------------------------------------------
 1 | 
 2 | function getRandomColor() {
 3 |     const letters = '0123456789ABCDEF';
 4 |     let color = '#';
 5 |     for (let i = 0; i < 6; i++) {
 6 |         color += letters[Math.floor(Math.random() * 16)];
 7 |     }
 8 |     return color;
 9 | }
10 | 
11 | 
12 | function changeBorderColor() {
13 |     const container = document.querySelector('.container');
14 |     setInterval(() => {
15 |         container.style.borderColor = getRandomColor(); 
16 |     }, 1000); 
17 | }
18 | 
19 | 
20 | document.addEventListener("DOMContentLoaded", function() {
21 |     changeBorderColor(); 
22 | });
23 | 
24 | 
25 | document.addEventListener("DOMContentLoaded", () => {
26 |     const inputField = document.querySelector(".input");
27 |     const buttons = document.querySelectorAll(".bttn");
28 | 
29 |     buttons.forEach(button => {
30 |         button.addEventListener("click", () => {
31 |             const value = button.textContent;
32 |             if (value === "=") {
33 |                 try {
34 |                    
35 |                     inputField.value = eval(inputField.value);
36 |                 } catch (error) {
37 |                     inputField.value = "Error";
38 |                 }
39 |             } else if (value === "C") {
40 |  
41 |                 inputField.value = "";
42 |             } else {
43 |              
44 |                 inputField.value += value;
45 |             }
46 |         });
47 |     });
48 | });
49 | 
50 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <img width="1887" height="894" alt="image" src="https://github.com/user-attachments/assets/8d0dcd1e-1b0f-480b-b452-fa5ad522b61a" />
 2 | 
 3 | <h1>🧮 SmartCalcx Calculator </h1>
 4 | 
 5 | A simple yet beautiful and responsive Calculator built using HTML, CSS, and JavaScript.
 6 | This project performs basic arithmetic operations with a modern design and smooth interactions.
 7 | 
 8 | 🚀 Features
 9 | 
10 | Perform Addition, Subtraction, Multiplication, and Division
11 | 
12 | Responsive Design (works on desktop, tablet, and mobile)
13 | 
14 | Attractive UI with transitions and animations
15 | 
16 | Keyboard Support for quick input
17 | 
18 | Clean and easy-to-use interface
19 | 
20 | 🛠️ Technologies Used
21 | 
22 | HTML5 → Structure of the calculator
23 | 
24 | CSS3 → Styling and layout
25 | 
26 | JavaScript (ES6) → Logic and functionality
27 | 
28 | 
29 | 📂 Project Structure
30 | awesome-calculator/
31 | │── cal.html        # Main HTML file  
32 | │── cal.css         # CSS styling  
33 | │── cal.js         # JavaScript logic  
34 | │── README.md         # Documentation  
35 | 
36 | ⚡ How to Run
37 | 
38 | Clone the repository
39 | 
40 | git clone https://github.com/AbdulRehmanBaig384/SmartCalcX
41 | 
42 | Open index.html in your browser
43 | 
44 | Start calculating 🧮
45 | 
46 | 🌍 Live Demo
47 | https://simplecalculator234.netlify.app/
48 | 
49 | 🤝 Contributing
50 | 
51 | Contributions are welcome! 🚀
52 | If you’d like to add new features (like dark mode, history, or scientific functions), feel free to fork this repository and create a pull request.
53 | 
54 | 📜 License
55 | 
56 | This project is licensed under the MIT License – free to use and modify.
57 | 
58 | ✨ Made with ❤️ by Abdul Rehman
59 | 


--------------------------------------------------------------------------------
/cal.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     background: linear-gradient(to bottom right, #6a11cb, #2575fc);
 4 |     color: white;
 5 |     text-align: center;
 6 |     margin: 0;
 7 |     padding: 0;
 8 | }
 9 | h1 {
10 |     margin: 20px 0;
11 |     font-size: 2.5rem;
12 |     color: #fff;
13 |     text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
14 | }
15 | .container {
16 |     background: #222;
17 |     margin: auto;
18 |     padding: 20px;
19 |     width: 300px;
20 |     border-radius: 15px;
21 |     box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);
22 |     text-align: center;
23 |     border: 5px solid white; 
24 | }
25 | .inputs .input {
26 |     width: 90%;
27 |     height: 50px;
28 |     font-size: 1.5rem;
29 |     margin: 10px 0;
30 |     padding: 10px;
31 |     border-radius: 10px;
32 |     border: none;
33 |     text-align: right;
34 |     background: #333;
35 |     color: white;
36 |     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
37 | }
38 | button.bttn {
39 |     width: 65px;
40 |     height: 65px;
41 |     margin: 5px;
42 |     font-size: 1.2rem;
43 |     font-weight: bold;
44 |     border: none;
45 |     border-radius: 10px;
46 |     background: linear-gradient(to bottom, #444, #222);
47 |     color: white;
48 |     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
49 |     cursor: pointer;
50 |     transition: all 0.3s ease;
51 | }
52 | button.bttn:hover {
53 |     background: linear-gradient(to bottom, #666, #444);
54 |     transform: scale(1.1);
55 | }
56 | button.bttn:active {
57 |     background: #000;
58 |     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
59 | }
60 | 
61 | button.bttn[style*="background-color"] {
62 |     color: black !important;
63 |     box-shadow: 0 4px 6px rgba(0, 255, 0, 0.5);
64 | }
65 | button.bttn[style*="background-color"]:hover {
66 |     color: white !important;
67 | }
68 | .row,.row2,.row3,.row4 {
69 |     display: flex;
70 |     justify-content: center;
71 | }
72 | 


--------------------------------------------------------------------------------
/calc.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE html>
 3 | <html lang="en">
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Calculator</title>
 8 |     <link rel="stylesheet" href="utils.css">
 9 |     <link rel="stylesheet" href="cal.css">
10 |    
11 | </head>
12 | <body>
13 |     <h1>Calculator</h1>
14 |     <div class="container">
15 |         <div class="inputs">
16 |             <input class="input" type="text">
17 |         </div>
18 |         <div class="row">
19 |             <button class="bttn">C</button>
20 |             <button class="bttn">()</button>
21 |             <button class="bttn">%</button>
22 |             <button class="bttn" style="background-color: rgb(0, 255, 0)" >/</button>
23 |         </div>
24 |         <div class="row">
25 |             <button class="bttn">7</button>
26 |             <button class="bttn">8</button>
27 |             <button class="bttn">9</button>
28 |             <button class="bttn" style="background-color: rgb(0, 255, 0);">*</button>
29 |         </div>
30 |         <div class="row2">
31 |             <button class="bttn">4</button>
32 |             <button class="bttn">5</button>
33 |             <button class="bttn">6</button>
34 |             <button class="bttn" style="background-color: rgb(22, 255, 22)">-</button>
35 |         </div>
36 |         <div class="row3">
37 |             <button class="bttn">1</button>
38 |             <button class="bttn">2</button>
39 |             <button class="bttn">3</button>
40 |             <button class="bttn" style="background-color: rgb(0, 255, 0);">+</button>
41 |         </div>
42 |         <div class="row4">
43 |             <button class="bttn">0</button>
44 |             <button class="bttn">.</button>
45 |             <button class="bttn">+/-</button>
46 |             <button class="bttn" style="background-color: rgb(19, 252, 19);">=</button>
47 |         </div>
48 |     </div>
49 | 
50 |     <script src="cal.js"></script> <!-- Linking external JS file -->
51 | </body>
52 | </html>
53 | 


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