ElinorCoding · Copilot · Oct 25, 2025 · Oct 25, 2025 · Oct 25, 2025
diff --git a/README.md b/README.md
@@ -1 +1,55 @@
-# web_se_ex1
+# Web SE Exercise 1 - Simple Calculator
+
+A simple, interactive calculator web application built with HTML, CSS, and JavaScript.
+
+## Features
+
+- Basic arithmetic operations (addition, subtraction, multiplication, division)
+- Clear and delete functions
+- Keyboard support for easy input
+- Responsive design with gradient background
+- Error handling for invalid expressions
+
+## How to Use
+
+1. **Open the Application**
+   - Simply open `index.html` in your web browser
+   - No installation or build process required
+
+2. **Using the Calculator**
+   - Click on the number and operator buttons to build your calculation
+   - Press `=` or `Enter` to calculate the result
+   - Use `C` or `Escape` to clear the display
+   - Use `DEL` or `Backspace` to delete the last character
+
+3. **Keyboard Shortcuts**
+   - Numbers: `0-9`
+   - Operators: `+`, `-`, `*`, `/`
+   - Decimal: `.`
+   - Calculate: `Enter` or `=`
+   - Clear: `Escape` or `C`
+   - Delete: `Backspace`
+
+## File Structure
+
+```
+web_se_ex1/
+├── index.html    # Main HTML structure
+├── style.css     # CSS styling
+├── script.js     # JavaScript functionality
+└── README.md     # This file
+```
+
+## Technologies Used
+
+- HTML5
+- CSS3 (with Grid layout and gradients)
+- Vanilla JavaScript (ES6+)
+
+## Browser Compatibility
+
+Works on all modern browsers including:
+- Chrome
+- Firefox
+- Safari
+- Edge
diff --git a/index.html b/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Simple Calculator - Web SE Exercise 1</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Simple Calculator</h1>
+        <div class="calculator">
+            <input type="text" id="display" class="display" readonly aria-label="Calculator display" role="textbox">
+            <div class="buttons">
+                <button class="btn" onclick="clearDisplay()">C</button>
+                <button class="btn" onclick="deleteLast()">DEL</button>
+                <button class="btn operator" onclick="appendToDisplay('/')">/</button>
+                <button class="btn operator" onclick="appendToDisplay('*')">*</button>
+
+                <button class="btn" onclick="appendToDisplay('7')">7</button>
+                <button class="btn" onclick="appendToDisplay('8')">8</button>
+                <button class="btn" onclick="appendToDisplay('9')">9</button>
+                <button class="btn operator" onclick="appendToDisplay('-')">-</button>
+
+                <button class="btn" onclick="appendToDisplay('4')">4</button>
+                <button class="btn" onclick="appendToDisplay('5')">5</button>
+                <button class="btn" onclick="appendToDisplay('6')">6</button>
+                <button class="btn operator" onclick="appendToDisplay('+')">+</button>
+
+                <button class="btn" onclick="appendToDisplay('1')">1</button>
+                <button class="btn" onclick="appendToDisplay('2')">2</button>
+                <button class="btn" onclick="appendToDisplay('3')">3</button>
+                <button class="btn equals" onclick="calculate()" style="grid-row: span 2;">=</button>
+
+                <button class="btn" onclick="appendToDisplay('0')" style="grid-column: span 2;">0</button>
+                <button class="btn" onclick="appendToDisplay('.')">.</button>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,57 @@
+// Get the display element
+const display = document.getElementById('display');
+
+// Function to append values to display
+function appendToDisplay(value) {
+    display.value += value;
+}
+
+// Function to clear the display
+function clearDisplay() {
+    display.value = '';
+}
+
+// Function to delete the last character
+function deleteLast() {
+    display.value = display.value.slice(0, -1);
+}
+
+// Function to calculate the result
+function calculate() {
+    try {
+        // Note: Using eval() for simplicity in this educational example.
+        // In production, use a proper math expression parser for security.
+        const result = eval(display.value);
+        display.value = result;
+    } catch (error) {
+        // If there's an error, show "Error"
+        display.value = 'Error';
+        setTimeout(() => {
+            clearDisplay();
+        }, 1500);
+    }
+}
+
+// Add keyboard support
+document.addEventListener('keydown', function(event) {
+    const key = event.key;
+
+    // Numbers and operators
+    if ((key >= '0' && key <= '9') || key === '.' || key === '+' || key === '-' || key === '*' || key === '/') {
+        appendToDisplay(key);
+    }
+    // Enter or equals for calculation
+    else if (key === 'Enter' || key === '=') {
+        event.preventDefault();
+        calculate();
+    }
+    // Backspace for delete
+    else if (key === 'Backspace') {
+        event.preventDefault();
+        deleteLast();
+    }
+    // Escape or 'c' for clear
+    else if (key === 'Escape' || key.toLowerCase() === 'c') {
+        clearDisplay();
+    }
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,88 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Arial', sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+
+.container {
+    background: white;
+    border-radius: 20px;
+    padding: 30px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+h1 {
+    text-align: center;
+    color: #333;
+    margin-bottom: 20px;
+    font-size: 24px;
+}
+
+.calculator {
+    width: 300px;
+}
+
+.display {
+    width: 100%;
+    height: 60px;
+    font-size: 24px;
+    text-align: right;
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 2px solid #ddd;
+    border-radius: 10px;
+    background-color: #f8f9fa;
+}
+
+.buttons {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+}
+
+.btn {
+    padding: 20px;
+    font-size: 18px;
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    background-color: #f0f0f0;
+    transition: all 0.3s ease;
+}
+
+.btn:hover {
+    background-color: #e0e0e0;
+    transform: translateY(-2px);
+}
+
+.btn:active {
+    transform: translateY(0);
+}
+
+.btn.operator {
+    background-color: #667eea;
+    color: white;
+}
+
+.btn.operator:hover {
+    background-color: #5568d3;
+}
+
+.btn.equals {
+    background-color: #764ba2;
+    color: white;
+}
+
+.btn.equals:hover {
+    background-color: #653a8b;
+}