Calculator-UX

A responsive, multi-page calculator web application (built with Bootstrap) focused on enhanced user experience, accessibility, and visual theming. Calculator-UX provides multiple calculation tools (arithmetic, BMI, and geometric shapes) wrapped in a consistent, accessible UI with light/dark modes, responsive navigation, and modular JavaScript architecture.

Setup Instructions

1. Clone the Repository:

Enter the following in command line:

git clone https://github.com/vkumar-2/Calculator-UX.git
cd Calculator-UX

2. Open in VS Code:

Navigate to File > Open Folder in VS Code, and select the folder Calculator-UX. Then open the file index.html.

3. Optional - Live Server / Node.js:

Light and dark mode use modular JavaScript (by default, web browsers will block modular JS running). Install the VS Code Live Server extension or Node.js to enable preview mode of the project, including light/dark mode.

Features

Tech Stack:

• Bootstrap - main framework used for creating responsive layouts and consistent UI components.
• JavaScript - handles logic, DOM manipulation, performing calculations and parsing data validations.
• ES6 modules - use of import and export for accessibility and applying theme logic (light/dark mode).
• Font Awesome - enhanced UI/UX of the application, aesthetics and improves accessibility cues, e.g. icons.

UI/UX Designs:

• Arithmetics - performs basic mathematics - add, subtract, multiply, divide.
• Geometrics - calculate the area/perimeter of 2D shapes and the volume of 3D shapes.
• BMI - calculates and displays a chart of Body Mass Index.
• Accessibility - high contrast themes (light/dark mode) and keyboard-friendly navigation.

Images

Home - Desktop View:

Light Mode	Dark Mode

3D Shapes - Tablet View:

Light Mode	Dark Mode

BMI - Smartphone View:

Light Mode	Dark Mode