📦 Boxed & Confused — Package Tracker

A playful yet functional package tracking web application that simulates real-world shipment tracking with a modern, interactive UI.

Built from scratch within my first week of college with zero prior technical experience, this project marks the beginning of my journey into web development.

---

🚀 Live Demo

🔗 https://playernightqueen16.github.io/BeginnerLevel-Package-Tracker/

---

🎯 Purpose

This project was built to:

• Understand core web development fundamentals (HTML, CSS, JavaScript)
• Simulate a real-world logistics use case
• Practice dynamic UI updates and structured data display
• Build something functional, visual, and user-friendly from day one

---

✨ Features

• 📥 Tracking Input System

  • Enter a tracking ID to fetch shipment details

• 📊 Tracking Summary

  • Displays key information:
    • Tracking number
    • Sender & recipient
    • Origin & destination
    • Courier service
    • Expected delivery date
    • Current status

• 🕒 Tracking History Timeline

  • Chronological updates with timestamps
  • Location-based shipment progress

• 🎨 Modern UI Design

  • Gradient backgrounds
  • Clean card-based layout
  • Fun, engaging theme ("Boxed & Confused")

• ⚡ Instant Feedback

  • Dynamic rendering of tracking data on user input

---

🛠️ Tech Stack

• HTML5 — Structure and layout
• CSS3 — Styling, gradients, responsive design
• JavaScript — Logic, interactivity, DOM manipulation

---

🧠 Key Concepts Used

• DOM manipulation (getElementById, querySelector)
• Event handling (button clicks, input handling)
• Dynamic content rendering
• Conditional UI updates
• Basic state simulation for tracking data
• UI/UX design fundamentals

---

📂 Project Structure

BeginnerLevel-Package-Tracker/
│
├── README.md
├── index.html
└── tracker.html

---

⚙️ How It Works

1. User enters a tracking ID
2. JavaScript processes the input
3. Mock tracking data is retrieved
4. UI updates dynamically with:
   • Tracking summary
   • Shipment timeline

---

🚀 How to Run Locally

1. Clone the repository

git clone https://github.com/PLayerNightQueen16/BeginnerLevel-Package-Tracker.git

2. Open the folder

cd BeginnerLevel-Package-Tracker

3. Run the app

Open index.html in your browser

---

🎨 Design Philosophy

• Fun + functional — learning doesn’t have to be boring
• Clarity first — information should be easy to read and understand
• Visual engagement — colors and layout enhance experience
• Beginner-built, thoughtfully designed

---

📌 Future Improvements

• 🔗 Integrate real courier APIs
• 🔍 Add validation for tracking IDs
• 📱 Improve mobile responsiveness
• 🌐 Add multi-shipment tracking
• 📦 Real-time tracking updates

---

🙌 Acknowledgements

Inspired by real-world logistics platforms and the idea that even simple tools can be made engaging.

---

👩‍💻 Author

Shreya Pal

---

📜 License

This project is open for personal and educational use.