A dynamic single-page timer game built with React, designed to test your ability to stop the timer before it reaches a specified time. This project demonstrates the use of refs and React portals for creating dynamic and responsive web applications.

• Dynamic Timer: Test your reflexes by stopping the timer before it hits zero.
• Player Name Input: Enter your name to personalize the game experience.
• React Refs: Utilized to manage timer control and user input.
• React Portals: Used for rendering modals and overlays, enhancing dynamic UI capabilities.
• Mobile Responsive: Fully responsive design to ensure a seamless experience across different devices.

• Node.js
• npm or yarn

1. Clone the repository:

   git clone https://github.com/Origina-sudo/Timer-Game.git

2. Navigate to the project directory:

   cd 01-starting-project

3. Install the dependencies:

   npm install # or yarn install

1. Start the development server:

   npm start or npm run dev # or yarn start

2. Open your browser and go to http://localhost:3000 to play the game.

1. Enter your name in the input field.
2. Press "Start" to begin the timer.
3. Try to stop the timer before it reaches zero by clicking the "Stop" button.

• App.jsx: The main component that holds the game logic.
• Player.jsx: A component for entering the player's name.
• ResultModal.jsx: A reusable modal component rendered using React portals.

• React Refs & forwardRefs: Used to directly access and manipulate DOM elements, such as the timer.
• React Portals: Enable rendering of components outside the main DOM hierarchy, useful for modals and overlays.

import { useState,useRef } from "react"; export default function Player() { const playeName = useRef() const [enteredPlayerName , setEnteredPlayerName] = useState(null) function handleClick (){ setEnteredPlayerName(playeName.current.value); playeName.current.value = ""; } return ( <section id="player"> <h2>Welcome {enteredPlayerName ? enteredPlayerName : 'unknown entity'}</h2> <p> <input ref={playeName} type="text" /> <button onClick={handleClick}>Set Name</button> </p> </section> ); } export default App;