ReactJS Activity: Todo List

Student Information:

• Name: John Mark C. Dela Cruz
• Section: BSIT 3A

Project Description

A Minecraft-themed Todo List application built with React and TypeScript. This project was created as part of a ReactJS activity, implementing a modern and interactive task management system with a unique gaming-inspired design.

Features

• Add, complete, and delete tasks
• Custom confirmation dialogs for task deletion
• Minecraft-style UI design
• Responsive layout
• Task timestamps
• Modern and clean interface

Technologies Used

• React
• TypeScript
• CSS3
• HTML5

Getting Started

1. Clone the repository:

git clone https://github.com/jjimuu/Dela_Cruz_To-Do_List.git

2. Install dependencies:

cd Dela_Cruz_To-Do_List
npm install

3. Run the development server:

npm start

4. Open http://localhost:3000 to view it in your browser.

Project Structure

src/
  ├── components/
  │   ├── TodoList.tsx     # Main Todo List component
  │   └── TodoList.css     # Styles for the Todo List
  ├── App.tsx             # Root component
  └── index.tsx          # Entry point

Features Implemented

1. Task Management

   • Add new tasks
   • Mark tasks as complete
   • Delete tasks with confirmation

2. User Interface

   • Minecraft-inspired design
   • Custom styled components
   • Responsive layout for all devices

3. Data Handling

   • Local state management
   • Timestamp for each task
   • Task persistence

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Academic Information

This project was submitted as part of the ReactJS activity requirements for BSIT 3A.