🧮 Simple Calculator

A beginner-friendly web-based calculator built with HTML, CSS, and JavaScript. It supports basic arithmetic operations — addition, subtraction, multiplication, and division — with a clean, responsive interface.

✨ Features

• ➕ Addition - Add two numbers together
• ➖ Subtraction - Subtract the second number from the first
• ✖️ Multiplication - Multiply two numbers
• ➗ Division - Divide the first number by the second
• 🎨 Clean Interface - Simple, user-friendly design with bisque background
• 📱 Responsive Design - Works on desktop and mobile devices
• ⚡ Instant Results - Real-time calculation display

🚀 How to Use

1. Enter Numbers: Input two numbers in the provided text fields
2. Choose Operation: Click one of the four operation buttons (+, -, *, /)
3. View Result: The result will appear instantly below the buttons

📸 Demo

Example Usage

• Enter 10 in the first field and 5 in the second field
• Click the + button to get 15
• Click the - button to get 5
• Click the * button to get 50
• Click the / button to get 2

📂 Project Structure

simple-calculator/
├── index.html          # Main HTML structure
├── css/
│   └── style.css       # Styling and layout
├── images/
│   └── demo.png       # screenshot of project demo
├── js/
│   └── main.js         # JavaScript calculation logic
└── README.md           # This documentation

🛠️ Installation & Setup

1. Download or clone the project files
2. Open index.html in any modern web browser
3. Start calculating immediately - no additional setup required!

💻 Technical Implementation

HTML Structure

• Two input fields for number entry
• Four operation buttons with unique IDs
• Result display area using <h2> element
• Semantic form structure for better accessibility

CSS Styling

• Flexbox Layout: Centered, responsive design
• Color Scheme: Bisque background with azure input fields
• Typography: Large, readable fonts (60px heading, 20px inputs)
• Interactive Elements: Rounded corners and consistent spacing
• Responsive Design: Adapts to different screen sizes

JavaScript Functionality

• Event Listeners: Each button has its own click handler
• DOM Manipulation: Direct element selection and value updates
• Type Conversion: Automatic string-to-number conversion
• Modular Functions: Separate function for each operation
• Console Logging: Results logged for debugging purposes

🔧 Code Structure

Event Listeners

document.querySelector('#addition').addEventListener('click', add)
document.querySelector('#sub').addEventListener('click', sub)
document.querySelector('#mult').addEventListener('click', mult)
document.querySelector('#div').addEventListener('click', div)

Function Pattern

Each operation follows the same pattern:

1. Get values from both input fields
2. Convert strings to numbers
3. Perform the calculation
4. Display result in the DOM
5. Log result to console

🌐 Browser Compatibility

Works in all modern browsers:

• ✅ Chrome
• ✅ Firefox
• ✅ Safari
• ✅ Edge
• ✅ Opera

🚧 Known Limitations

• No input validation (accepts any text)
• Division by zero returns Infinity
• No decimal precision control
• No keyboard support
• No operation history

🔮 Future Enhancements

Potential improvements could include:

• Input validation and error handling
• Keyboard shortcuts for operations
• Decimal precision control
• Calculation history feature
• Memory functions (M+, M-, MR, MC)
• Scientific operations (square root, power, etc.)
• Clear/Reset functionality
• Keyboard accessibility improvements

🤝 Contributing

This is a beginner-friendly project perfect for learning web development fundamentals. Feel free to:

• Fork the repository
• Add new features
• Fix bugs or improve code
• Submit pull requests

📄 License

This project is open source and available under the MIT License.

🎓 Learning Objectives

This project demonstrates:

• Basic HTML form structure
• CSS Flexbox layout
• JavaScript DOM manipulation
• Event handling
• Function organization
• Responsive web design principles

Perfect for beginners learning web development fundamentals!