Skip to content

The Countdown App is a React-based project designed to practice Refs and Portals. It features a countdown timer where users can enter their name and participate in four different challenges. Users can start and stop any challenge, earning points based on how close they stop to the initial countdown time. If the time expires without stopping, the us

Notifications You must be signed in to change notification settings

AqibNiazi/countdown

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

⏳ Countdown App

A React-based countdown application designed to practice Refs and Portals. The app allows users to enter their name and participate in four different challenges, where they can start and stop timers to earn scores.

🚀 Features

User Input – Enter your name before starting the challenges.
🎯 Four Challenges – Users can start and stop any of the available challenges.
🏆 Scoring System:
    🔹 Stop the timer before it expires to earn points.
    🔹 Lose if the timer reaches zero.
    🔹 Maximize your score by stopping the timer as close as possible to the initial start time.
🔌 React Portals & Refs:
    📌 Portals – Render UI elements outside the main DOM hierarchy.
    📌 Refs – Efficiently handle timer functionality.

🛠️ Technologies Used

🔹 React (Functional components, Hooks, Refs, Portals)
🔹 JavaScript
🔹 CSS (for styling)

⚡ Getting Started

📌 Prerequisites

Ensure you have Node.js installed on your system.

📥 Installation

  1. Clone the repository:
    git clone https://github.com/AqibNiazi/countdown.git
  2. Navigate to the project directory:
    cd countdown
  3. Install dependencies:
    npm install
  4. Start the development server:
    npm run dev

🎮 Usage

  1. Enter your name in the input field.
  2. Start any of the four available challenges.
  3. Stop the timer manually before it expires to earn points.
  4. If the timer reaches zero, you lose.
  5. Maximize your score by stopping the timer as close as possible to the initial time.

🔮 Future Improvements

✨ Add difficulty levels.
🏆 Implement a leaderboard.
🎨 Enhance UI/UX.

📎 Attachments

Project Dashboard

About

The Countdown App is a React-based project designed to practice Refs and Portals. It features a countdown timer where users can enter their name and participate in four different challenges. Users can start and stop any challenge, earning points based on how close they stop to the initial countdown time. If the time expires without stopping, the us

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published