https://github.com/caner-yesiltas/hogwarts-stop-watch

🧙‍♂️ A magical Hogwarts-themed stopwatch with music and animations! Features a flying wizard, responsive design, and built with JavaScript DOM manipulation and CSS animations ⚡️
https://github.com/caner-yesiltas/hogwarts-stop-watch

audioapi cssanimations dom-manipulation eventlisteners javascript-vanilla

Last synced: about 1 month ago
JSON representation

🧙‍♂️ A magical Hogwarts-themed stopwatch with music and animations! Features a flying wizard, responsive design, and built with JavaScript DOM manipulation and CSS animations ⚡️

• Host: GitHub
• URL: https://github.com/caner-yesiltas/hogwarts-stop-watch
• Owner: Caner-Yesiltas
• Created: 2024-08-15T04:15:23.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-11-18T14:56:57.000Z (2 months ago)
• Last Synced: 2024-12-10T10:10:22.107Z (about 1 month ago)
• Topics: audioapi, cssanimations, dom-manipulation, eventlisteners, javascript-vanilla
• Language: JavaScript
• Homepage: https://hogwarts-stop-watch.vercel.app
• Size: 32 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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

```css

.wizard {

  animation: fly 8s infinite linear;

}

```

- Flying path across the screen

- Continuous movement pattern

- Responsive scaling

### Floating Name Animation

```css

.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 - [email protected]

Project Link: [https://hogwarts-stop-watch.vercel.app/](https://hogwarts-stop-watch.vercel.app/)

---



  Made with ⚡️ by Caner Yesiltas