Project Description

A modern interactive calculator application designed with an elegant and user-friendly interface. The app allows performing basic and advanced mathematical operations quickly and with high accuracy. The project was built using pure HTML5, CSS3, and JavaScript without relying on any external libraries.

Key Features

• Modern and attractive user interface with smooth visual effects
• Support for basic arithmetic operations (addition, subtraction, multiplication, division)
• Support for advanced operations (percentage, square root, exponentiation)
• Interactive keypad with press effects
• Support for keyboard input from physical keyboard
• Temporary memory to save previous operations
• Responsive design that works on all devices (Desktop, Tablet, Mobile)
• Support for dark and light modes

Technologies Used

• HTML5: For basic structure and input elements
• CSS3: For advanced design using Grid and Flexbox
• JavaScript ES6+: For programming logic and interactivity
• Local Storage API: To save user preferences

Challenges and Solutions

I faced challenges in handling complex mathematical operations and ensuring result accuracy, especially with long decimal numbers. This was solved by using advanced mathematical functions and comprehensive error handling. User experience was also improved by adding visual and audio effects when pressing buttons.

Lessons Learned

Through this project, I learned the importance of good planning for code structure, how to effectively handle events in JavaScript, and how to improve application performance by reducing DOM manipulation operations.

Code Examples

Here are some examples of the code used in the project:

JavaScript - Handling Calculations

// Function to perform calculations
function calculate(num1, operator, num2) {
    switch(operator) {
        case '+':
            return num1 + num2;
        case '-':
            return num1 - num2;
        case '*':
            return num1 * num2;
        case '/':
            return num2 !== 0 ? num1 / num2 : 'Error';
        case '%':
            return (num1 / 100) * num2;
        default:
            return 0;
    }
}

// Event handling
document.querySelectorAll('.btn').forEach(button => {
    button.addEventListener('click', (e) => {
        const value = e.target.dataset.value;
        updateDisplay(value);
    });
});

CSS - Button Styling

.calculator-btn {
    padding: 1.5rem;
    font-size: 1.2rem;
    border: none;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.calculator-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.calculator-btn:active {
    transform: scale(0.98);
}

Links