diff --git a/README.md b/README.md index 1d3ae29..f745c24 100644 --- a/README.md +++ b/README.md @@ -1 +1,55 @@ -# web_se_ex1 \ No newline at end of file +# 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 \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..346e6a6 --- /dev/null +++ b/index.html @@ -0,0 +1,42 @@ + + + + + + Simple Calculator - Web SE Exercise 1 + + + +
+

Simple Calculator

+
+ +
+ + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..4b00617 --- /dev/null +++ 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 new file mode 100644 index 0000000..982f778 --- /dev/null +++ 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; +}