Task Manager App

Learn and Build With a Stylish Task Manager in React

Introduction:

In today's fast-paced world, staying organized is crucial for productivity. Are you looking for an efficient way to manage your tasks and boost your workflow? Look no further! In this tutorial, we will guide you through building a sleek Task Manager application using React. With its user-friendly interface and powerful features, this task management solution will help you stay on top of your work and accomplish your goals effectively. Let's dive in and create your own stylish Task Manager!

Prerequisites:

To follow along with this tutorial, basic knowledge of HTML, CSS, and JavaScript is recommended. Familiarity with React fundamentals will be beneficial. Make sure you have Node.js and npm (Node Package Manager) installed on your machine before starting.

Step 1: Setting up the Project To get started, let's set up a new React project using Create React App. Open your terminal and run the following command:

npx create-react-app task-manager

This will create a new React project in a folder named "task-manager." Navigate to the project directory using cd task-manager.

Step 2: Creating the Task Component In the "src" folder, create a new file called "Task.js." This file will define the Task component responsible for rendering an individual task in the Task Manager application.

jsxCopy codeimport React from 'react';

const Task = ({ task, onDelete }) => {
  return (
    <div className="task">
      <h3>{task.title}</h3>
      <p>{task.description}</p>
      <button onClick={() => onDelete(task.id)}>Delete</button>
    </div>
  );
};

export default Task;

Step 3: Building the Task Manager Component Now, let's create the core component of our Task Manager application. In the "src" folder, create a new file called "TaskManager.js." This component will handle the state and functionality of the application.

jsxCopy codeimport React, { useState } from 'react';
import Task from './Task';
import './TaskManager.css';

const TaskManager = () => {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState({ title: '', description: '' });

  const addTask = () => {
    if (newTask.title.trim() !== '') {
      const updatedTasks = [...tasks, { ...newTask, id: Date.now() }];
      setTasks(updatedTasks);
      setNewTask({ title: '', description: '' });
    }
  };

  const deleteTask = (taskId) => {
    const updatedTasks = tasks.filter((task) => task.id !== taskId);
    setTasks(updatedTasks);
  };

  return (
    <div className="task-manager">
      <h2>Task Manager</h2>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          addTask();
        }}
      >
        <input
          type="text"
          placeholder="Task Title"
          value={newTask.title}
          onChange={(e) => setNewTask({ ...newTask, title: e.target.value })}
          required
        />
        <textarea
          placeholder="Task Description"
          value={newTask.description}
          onChange={(e) => setNewTask({ ...newTask, description: e.target.value })}
        ></textarea>
        <button type="submit">Add Task</button>
      </form>
      {tasks.length > 0 ? (
        <div className="task-list">
          {tasks.map((task) => (
            <Task key={task.id} task={task} onDelete={deleteTask} />
          ))}
        </div>
      ) : (
        <p>No tasks available.</p>
      )}
    </div>
  );
};

export default TaskManager;

Step 4: Styling the Task Manager Application Create a CSS file named "TaskManager.css" in the "src" folder. Add the following CSS code to style the Task Manager application:

/* Inside TaskManager.css */

body {
    background-color: #000000;
    color: #ffffff;
  }

  .task-manager {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #222222;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  .task-manager h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #ffffff;
  }

  .task-manager form {
    margin-bottom: 20px;
  }

  .task-manager form input,
  .task-manager form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #333333;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  .task-manager form textarea {
    resize: vertical;
  }

  .task-manager form button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #4caf50;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .task-manager form button:hover {
    background-color: #45a049;
  }

  .task-list {
    margin-top: 20px;
  }

  .task {
    background-color: #333333;
    padding: 20px;
    margin-bottom: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .task h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #ffffff;
  }

  .task p {
    margin-bottom: 20px;
    color: #cccccc;
  }

  .task button {
    padding: 5px 10px;
    background-color: #e74c3c;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .task button:hover {
    background-color: #c0392b;
  }

Step 5: Integrating the Task Manager Component Finally, let's integrate the Task Manager component into the main "App.js" file.

jsxCopy codeimport React from 'react';
import TaskManager from './TaskManager';

const App = () => {
  return (
    <div>
      <TaskManager />
    </div>
  );
};

export default App;

Save all the files and start the development server by running the following command in the terminal:

npm start

Conclusion:

Congratulations! You've successfully built a stylish Task Manager application using React. With its intuitive interface, you can effortlessly add and manage your tasks. Customize the design further by modifying the CSS code to match your preferences. Stay organized, boost your productivity, and accomplish your goals effectively with this Task Manager application.

Full source code: https://github.com/dev-keshav/task-manager-app

Remember to share this tutorial with others who might find it helpful. Happy task managing!