React Practice Projects

This repository contains several small React practice projects, including:

• Color Picker
• Digital Clock
• To-Do List
• Screen Size Checker
• Stop Watch

Each project is implemented as a separate component and navigable via React Router v6.

Table of Contents

• Demo
• Technologies Used
• Project Structure
• Installation
• Usage
• Components

Demo

This project is designed to run locally. Once installed and running, navigate through the Home Page to access different practice components.

• Color Picker: Select and preview colors.
• Digital Clock: Real-time clock with a background image.
• To-Do List: Add, delete, and reorder tasks.
• Screen Size Checker: Displays current window width and height.
• Stop Watch: Start, stop, and reset a stopwatch.

Technologies Used

• React 18
• React Router v6
• Tailwind CSS for styling
• Day.js for handling time in Digital Clock

Project Structure

React-FullCourse/
├─ src/
│ ├─ components/
│ │ ├─ Home.jsx
│ │ ├─ ColorPicker.jsx
│ │ ├─ TodoList.jsx
│ │ ├─ DigitalClock.jsx
│ │ ├─ ScreenSize.jsx
│ │ └─ StopWatch.jsx
│ ├─ assets/
│ │ └─ clock-bg.jpg
│ ├─ RootLayout.jsx
│ └─ App.jsx
├─ package.json
└─ tailwind.config.js

Installation

1. Clone the repository:

git clone https://github.com/YajaDev/React-Practice-Repo.git

2. Navigate to the project directory:

cd React-FullCourse

Install dependencies:

npm install

Usage

Start the development server:

npm run dev

The app will run at http://localhost:5173

Use the Home Page to navigate between different practice components.

Components

RootLayout.jsx

• Provides a layout for all routes.
• Uses Outlet from React Router.
• Passes a BackButton component for navigation.

Home.jsx

• Main landing page.
• Links to all individual practice components.

ColorPicker.jsx

• Allows selection of a color.
• Shows the selected color visually and as text.

DigitalClock.jsx

• Displays current time using Day.js.
• Updates every second.
• Shows a background image.

ScreenSize.jsx

• Displays the current screen width and height.
• Updates on window resize.

TodoList.jsx

• Manage a list of tasks.
• Add, delete, and reorder tasks.

StopWatch.jsx

• Basic stopwatch functionality: Start, Stop, Reset.