# Hogwarts Stopwatch ⚡️

👉 Live Demo 👈

📌 About The Project

A magical Harry Potter themed stopwatch application with flying animations and themed music. Perfect for timing your potion brewing sessions!

✨ Key Features

• ⏱️ Precise stopwatch with minutes, seconds, and milliseconds
• 🎵 Harry Potter theme music during countdown
• 🧙‍♂️ Animated flying wizard
• 🏰 Hogwarts-themed UI elements
• 📱 Fully responsive design
• 🎨 Custom animations and visual effects

🛠️ Built With

• HTML5
• CSS3
• JavaScript
• Custom Audio API Integration
• CSS Animations

🪄 Core Functionality

• Start Timer: Initiates the stopwatch and plays theme music
• Stop Timer: Pauses both the stopwatch and music
• Reset Timer: Returns stopwatch to zero and resets music
• Continuous Display: Updates every 10 milliseconds for precise timing

💫 Animation Details

Wizard Animation

.wizard {
  animation: fly 8s infinite linear;
}

• Flying path across the screen
• Continuous movement pattern
• Responsive scaling

Floating Name Animation

.floating-name {
  animation: floatVertical 12s infinite ease-in-out;
}

• Vertical floating motion
• Smooth easing effects
• Infinite loop

📱 Responsive Design

• Adaptive timer display size
• Flexible button layouts
• Scaled animations for mobile devices
• Background image optimization

🎯 Technical Implementation

Timer Logic

• Uses Date.now() for precise timing
• setInterval for continuous updates
• Separate tracking for minutes, seconds, and milliseconds

Audio Integration

• Background music loop functionality
• Synchronized with timer controls
• Automatic reset on stop

📫 Contact

Caner Yesiltas - caner_yesiltas1@gmail.com

Project Link: https://hogwarts-stop-watch.vercel.app/

---

Made with ⚡️ by Caner Yesiltas