|
1 | | -# Utility Hub |
| 1 | +# JavaScript Utility Suite |
2 | 2 |
|
3 | | -A simple web-based application built for **CIS 111 – Introduction to Web Programming**. |
4 | | -Includes two utilities: |
| 3 | +A lightweight, browser-based toolset featuring a mathematical calculator and a NATO phonetic alphabet converter. Built with vanilla JavaScript to demonstrate core DOM manipulation, event handling, and algorithm implementation without external dependencies. |
5 | 4 |
|
6 | | -1. **Basic Calculator** – Performs addition, subtraction, multiplication, and division with history tracking. |
7 | | -2. **NATO Phonetic Converter** – Converts words or sentences into their NATO phonetic equivalent. |
| 5 | + |
8 | 6 |
|
9 | | -## Features |
| 7 | +## 🚀 Live Demo |
| 8 | +[View Live Demo](https://05ashton.github.io/JavaScript-Utility-Suite/) |
10 | 9 |
|
11 | | -- Input validation for calculator numbers |
12 | | -- Dynamic history of calculations |
13 | | -- Supports uppercase and lowercase letters for NATO conversion |
14 | | -- Clear buttons for both utilities |
| 10 | +## 🛠 Features |
15 | 11 |
|
16 | | -## Usage |
| 12 | +### 1. Mathematical Calculator |
| 13 | +* **Arithmetic Operations:** Supports addition, subtraction, multiplication, and division. |
| 14 | +* **Input Validation:** Prevents invalid inputs to ensure calculation stability. |
| 15 | +* **History Tracking:** Dynamically renders a history log of recent calculations using DOM manipulation. |
17 | 16 |
|
18 | | -Open `p4.html` in a browser to use the app. |
| 17 | +### 2. NATO Phonetic Converter |
| 18 | +* **Real-time Conversion:** Instantly translates input text into the NATO phonetic alphabet (e.g., "Hello" → "Hotel Echo Lima Lima Oscar"). |
| 19 | +* **Case Insensitivity:** robustly handles mixed uppercase and lowercase input. |
| 20 | +* **String Parsing:** specific algorithm to map characters to phonetic values. |
19 | 21 |
|
20 | | -## Technologies |
| 22 | + |
21 | 23 |
|
22 | | -- HTML |
23 | | -- CSS |
24 | | -- JavaScript |
| 24 | +## 💻 Technical Highlights |
| 25 | + |
| 26 | +This project was built to master the fundamentals of **Vanilla JavaScript**: |
| 27 | + |
| 28 | +* **DOM Manipulation:** interacting with the Document Object Model to update the UI without page reloads. |
| 29 | +* **Event Listeners:** handling user clicks and keystrokes efficiently. |
| 30 | +* **Logic Implementation:** writing custom algorithms for string parsing and mathematical logic. |
| 31 | +* **CSS Styling:** custom styling for a responsive and clean user interface. |
| 32 | + |
| 33 | +## 📂 Project Structure |
| 34 | + |
| 35 | +```text |
| 36 | +JavaScript-Utility-Suite/ |
| 37 | +├── index.html # Main entry point and UI structure |
| 38 | +├── styles.css # Custom styling for the interface |
| 39 | +└── script.js # Core logic for calculator and converter |
0 commit comments