Unit Conversion Tool

A lightweight web app that converts between common length, volume, mass, temperature, and digital storage units in real-time.

Preview UI • Usage • FAQ • Contact

📔 Table of Contents

• About the Project
  • Screenshots
  • Tech Stack
  • Features
  • Color Reference
  • Environment Variables
• Getting Started
  • Prerequisites
  • Installation
  • Running Tests
  • Run Locally
  • Deployment
• Usage
• Roadmap
• Contributing
  • Code of Conduct
• FAQ
• License
• Contact
• Acknowledgements

🌟 About the Project

The Unit Conversion Tool is a single-page site intended for students, travelers, and makers who need quick conversions without hunting for multiple calculators. The UI focuses on clarity: choose a category, enter a value, and instantly see the converted results for the most common unit pairings. Everything is handled client-side so it works offline once loaded.

📷 Screenshots

👾 Tech Stack

Client

• HTML5
• CSS3
• Vanilla JavaScript

Tooling

• Git
• Visual Studio Code

🎯 Features

• Instant conversions for length, temperature, volume, mass, and digital storage.
• Category-aware unit lists that prevent invalid combinations.
• Responsive layout that adapts from phones to large screens.
• Offline-friendly: pure client-side logic without dependencies.
• Copy-to-clipboard shortcut for quickly sharing results (planned).

🎨 Color Reference

Color	Hex
Ink Plum	#2D232E
Slate Accent	#474448
Warm Canvas	#E0DDCF
Deep Mauve	#534B52
Soft Ivory	#F1F0EA

🔑 Environment Variables

This project does not require environment variables. Everything runs directly in the browser.

🧰 Getting Started

Follow the steps below to run a local copy of the project.

‼️ Prerequisites

• A modern web browser (Chrome, Firefox, Safari, or Edge).
• (Optional) A local web server such as Live Server for hot reloading during development.

⚙️ Installation

Download or clone the repository:

git clone https://github.com/Calen-Ray/unit-conversion-tool

Move into the project directory:

cd unit-conversion-app/unit-conversion-tool

If you prefer serving over HTTP, start your favorite static server (example using npx):

npx serve .

🧪 Running Tests

Tests are not yet in place. Contributions with unit or end-to-end tests are welcome.

🏃 Run Locally

Open the project in your browser:

# Windows
start main.html

# macOS
open main.html

# Linux
xdg-open main.html

Or, if you prefer a local dev server with auto reload and have live-server installed:

npx live-server .

🚩 Deployment

Any static host works (Netlify, GitHub Pages, Vercel). Upload the contents of unit-conversion-tool or point your hosting provider at the directory root.

👀 Usage

1. Choose a category (e.g., Temperature).
2. Enter the value you want to convert.
3. Pick the source and destination units from the dropdowns.
4. Review the converted result instantly below the form.
5. Use the "Reset" action to clear the current conversion and start fresh.

🧭 Roadmap

• Static layout and responsive styling.
• Conversion logic for length, volume, mass, temperature, and storage units.
• Add copy-to-clipboard button for converted values.
• Persist most recent conversions with localStorage.
• Add keyboard shortcuts for faster navigation.

👋 Contributing

Contributions are always welcome! To get started:

1. Fork the repository.
2. Create a feature branch (git checkout -b feature/your-feature).
3. Commit your changes (git commit -m 'Add your feature').
4. Push the branch (git push origin feature/your-feature).
5. Open a Pull Request describing the motivation and screenshots if relevant.

📜 Code of Conduct

Please read the Code of Conduct before contributing.

❔ FAQ

• Will currency conversion be supported?

  Currency conversion relies on live exchange rates, so it is out of scope for this static tool.

• Can I add custom units?

  Sure, submit a pull request for your desired changes or submit a feature request if you need assistance.

⚠️ License

Distributed under the MIT License. See LICENSE for more information.

🤝 Contact

Calen - @calen_dev

Project Link: https://github.com/Calen-Ray/unit-conversion-tool

💎 Acknowledgements

Useful references while assembling this project:

• Shields.io for custom badges.
• MDN Web Docs for HTML, CSS, and JavaScript guidance.
• Emoji Cheat Sheet for accessible emoji codes.
• Awesome README for structural inspiration.