Life Timer

Life Timer is a dynamic webpage built using HTML, CSS, and JavaScript technologies. It allows users to enter their Date of Birth and see their age displayed as a continuously updating timer, making every second count!

🚀 Project Description

Life Timer is designed to provide a live display of a user's age, down to the second, by calculating the time elapsed since their birth. This project showcases fundamental web development skills and features a clean, responsive design.

Features

1. Dynamic Age Timer: Enter your Date of Birth, and watch your age (in Years, Months, Days, Hours, Minutes, and Seconds) update every second.
2. Responsive Design: Utilizes CSS FlexBox, Grid, and Media Queries to ensure a seamless experience across all device sizes.
3. Interactive UI: Includes a settings icon that toggles the visibility of the DOB input field and the Add-DOB button, complete with a smooth rotating animation.
4. Background Video: Features a beautiful background video that changes to an rotating-earth video upon submitting the DOB.
5. GitHub Integration: A GitHub icon that links directly to the project's repository.

Technologies Used

• HTML: Structure of the webpage.
• CSS: Styling and layout using FlexBox, Grid, and Media Queries for responsiveness.
• JavaScript: Logic to calculate and display the age, handle form submission, and update the timer.

Learnings

1. Background Video Change: Implemented video background changes based on user interaction.
2. Age Calculation: Developed logic to calculate age using DOB and the current time.
3. Page Refresh: Utilized window.location.reload() to refresh the webpage when needed.
4. Code Optimization: Improved code efficiency by reducing repetitiveness and using functions.
5. Code Documentation: Added comments to explain important parts of the program for better understanding and maintenance.

🎥 Demo

Check out the live demo of the Life Timer here.

🛠 How to Install and Run Locally

1. Clone the repository:

   git clone https://github.com/VinayNoogler000/Life-Timer.git

2. Navigate to the project directory:

   cd Life-Timer

3. Open index.html in your preferred web browser:

   open index.html

📂 Project Structure

├── index.html
├── styles.css
├── app.js
└── assets
    ├── bg-video.mp4
    ├── bg-video-2.mp4

🤝 Contributions

Contributions are welcome! Feel free to open issues or submit pull requests.

📝 Feeback

If you have any feedback, please reach out to me at [email protected].

📜 License

This project is licensed under the MIT License. See the LICENSE file for more details.

🌐 Connect with Me

• LinkedIn
• Twitter/X
• Instagram