Developer Calculator Dashboard

Overview

The Developer Calculator Dashboard is a web-based application that combines multiple useful developer utilities into a single interface. Instead of a basic calculator, this project provides tools commonly used by developers such as arithmetic calculations, number base conversions, unit conversions, and JSON formatting.

The goal of this project is to demonstrate practical JavaScript programming, DOM manipulation, and clean, modular CSS design while building a functional and developer-friendly tool.

---

Features

Calculator

A fully functional calculator designed for quick arithmetic operations with a retro-terminal aesthetic.

Features

• Supports basic operations: +, -, *, /, %
• Visual "AC" (Clear) and "DEL" (Delete) functionality
• Calculation history display
• Results formatted for readability (intelligent decimal rounding)
• Error handling for invalid expressions

Example

Input: 12 + 6 * 3
Output: 30

---

Number Base Converter

Convert numbers between different number systems commonly used in programming in real-time.

Supported Bases

• Decimal: Base 10
• Binary: Base 2
• Hexadecimal: Base 16

Example

Input: 25 (Decimal)
Binary: 11001
Hexadecimal: 19

---

Unit Converter

Quickly convert between a wide range of measurement units used in physics and engineering.

Supported Categories

• Length: Meters, Kilometers, Centimeters, Millimeters, Miles, Feet
• Weight: Grams, Kilograms, Milligrams, Pounds, Ounces
• Temperature: Celsius, Fahrenheit, Kelvin

---

JSON Formatter

A utility tool for cleaning up messy JSON data or compressing it for production use.

Features

• Format: Pretty-print JSON with 4-space indentation
• Minify: Remove all whitespace for a compact structure
• Copy: One-click copy to clipboard with visual feedback
• Validation: Real-time error reporting for invalid JSON syntax

---

User Interface

The application features a dashboard-style layout for seamless switching between developer tools.

UI Features

• Simplified Design: High-contrast, easy-to-read CSS structure.
• Dark / Light Theme: Dynamic theme switching with consistent variable mapping.
• Retro Aesthetics: A classic black terminal-style screen for the calculator.
• Responsive Sidebar: Categorized navigation for easy access.

---

Technologies Used

• HTML5 – Semantic structure and layout
• CSS3 – Custom properties (variables), Flexbox, and Grid
• JavaScript (ES6) – Core logic, unit formulas, and JSON parsing

---

Learning Objectives

This project project covers:

• DOM Manipulation: Updating tool content dynamically without page reloads.
• Event Handling: Handling input triggers, button clicks, and window loading.
• Mathematical Logic: Implementing base-X conversions and temperature offsets.
• Data Sanitization: Handling eval() safely and validating JSON input.
• Theming: Implementing a robust dark/light mode system using CSS variables.

---

How to Run

1. Download the project files to your local machine.
2. Open the index.html file in any modern web browser.
3. Use the sidebar to switch between the Calculator, Base Converter, Unit Converter, and JSON Formatter.