📅 JavaScript Date Formatter 🗓️

Welcome to JavaScript Date Formatter — a sleek, interactive web application that demonstrates the power of JavaScript's Date Object! This project was built as part of the JavaScript Algorithms and Data Structures curriculum on freeCodeCamp, showcasing dynamic date manipulation and real-time UI updates.

---

🎓 Certification

Course: JavaScript Algorithms and Data Structures

Complete Your Certificate:

• ✅ This project (Date Formatter) fulfills one requirement

Full Project Suite: 25+ hands-on projects from Pyramid Generator to Final Certification Projects

• 🎓 Complete all projects to earn your certification

This repository contains the complete portfolio of projects needed to demonstrate JavaScript proficiency and earn the freeCodeCamp certificate.

---

📸 Application Preview

Live Demo: https://acheronx0577.github.io/JavaScript-Building-a-Date-Formatter

---

🗓️ Features

1. 📅 Multiple Date Formats

   • Day-Month-Year (DD-MM-YYYY)
   • Year-Month-Day (YYYY-MM-DD)
   • Month-Day-Year with Time (MM-DD-YYYY HH:MM)
   • Full Date with Day Name
   • Relative Time Display

2. ⏰ Real-time Updates

   • Live clock functionality updates every second
   • Smooth animations on date changes
   • Automatic timezone handling

3. 🎨 Modern UI/UX

   • Responsive design for all devices
   • Gradient backgrounds and smooth transitions
   • Interactive dropdown with custom styling
   • Visual feedback on selections

4. ⌨️ User Experience

   • Intuitive format selection
   • Clear visual hierarchy
   • Accessible form controls
   • Mobile-optimized layout

---

🧰 Installation & Usage

1️⃣ Clone this repo

git clone git@github.com:acheronx0577/JavaScript-Building-a-Date-Formatter.git

2️⃣ Open the project folder

cd JavaScript-Building-a-Date-Formatter

3️⃣ Run the file

Just open index.html in your favorite browser 🌐 and start playing!

---

🎯 Key JavaScript Concepts

• new Date() object creation and manipulation
• getDate(), getMonth(), getFullYear() methods
• getHours(), getMinutes(), getSeconds() for time
• getDay() for day of week
• setInterval() for continuous updates
• addEventListener() for user interactions
• classList manipulation for CSS animations
• Template literals for dynamic string creation

---

🎨 Color Scheme

• Primary: Dark Grey (#0a0a23)
• Secondary: Blue (#3a86ff)
• Accent: Yellow (#f1be32)
• Highlight: Green (#4cc9f0)
• Background: Light Grey (#2a2a40)

---

🤝 Contributing

Want to enhance this date formatter?

• Fork the repo 🍴
• Add new features (timezone support, calendar view, date calculations, etc.) ✍️
• Submit a Pull Request ✅

---

📜 License

This project is open-source under the MIT License.

---

⭐ If you find this date formatter useful, don't forget to give it a star! ⭐

---

Happy coding! 🚀