JS Simple Calculator

Project Overview

A simple calculator web application built with pure HTML, CSS, and JavaScript. It supports the four basic arithmetic operations — addition, subtraction, multiplication, and division — with a clear display showing the current expression. The interface is responsive and includes a dark mode for comfortable use in low-light environments.

Features

• ✓Basic arithmetic — addition, subtraction, multiplication, and division
• ✓Expression display showing the full current input and result
• ✓Clear (AC) and delete (⌫) controls for correcting input errors
• ✓Responsive design for optimal viewing on desktop and mobile
• ✓Dark mode for reduced eye strain during night-time use

Challenges

• •Handling edge cases like consecutive operators or division by zero gracefully
• •Displaying the running expression clearly without cluttering the UI
• •Keeping the implementation clean in pure JavaScript without relying on eval()

Solution

Built a simple expression parser that validates operator sequences and catches division by zero with a user-friendly error message. CSS custom properties handle the dark/light toggle. All logic is explicit JavaScript — no eval().

Architecture

Single-page vanilla JavaScript app. A state object holds the current operands and operator. Button event listeners update state and re-render the display. CSS custom properties control theming.

Results & Impact

• ✓Live demo available via GitHub Pages
• ✓Clean, readable pure JavaScript implementation without eval()
• ✓Handles common edge cases like division by zero gracefully