任务管理应用开发指南

4.0

4/4/2025

编程与开发

HTML

CSS

JavaScript

任务管理

应用开发

Prompt

I want HTML, CSS, and JS code combined into a single code to create a task management app. This app is specifically designed for managing daily tasks.

The app allows you to enter the task name and date, and classify the task based on its importance (high, medium, or low). Each of these is highlighted in a different color.

There is also a rectangle containing the task name and icons next to it:

View task data

Edit task

Delete task

When you click on the View task data icon, the task data appears in a pop-up menu.

When you click on Edit task, the same menu appears, with the ability to edit and save changes.

When you click on the Delete task button, a pop-up message appears to confirm the deletion.

A sound is also added when the task is about to end, 30 to 60 minutes before it ends, so you know when the task is about to end or be completed.

The app must be professional.

Add a pop-up menu feature. Within this menu, you can select the application language, including all the world's languages, including Arabic. You can also choose a mode. The application is either sunny, black, or the same color as the device.

Generated Result

import React, { useState, useEffect } from 'react';
import './App.css';

const App = () => {
  const [tasks, setTasks] = useState([]);
  const [taskName, setTaskName] = useState('');
  const [taskDate, setTaskDate] = useState('');
  const [taskImportance, setTaskImportance] = useState('low');
  const [selectedTask, setSelectedTask] = useState(null);
  const [isEditing, setIsEditing] = useState(false);
  const [language, setLanguage] = useState('en');
  const [theme, setTheme] = useState('light');

  const addTask = () => {
    const newTask = {
      id: Date.now(),
      name: taskName,
      date: taskDate,
      importance: taskImportance,
    };
    setTasks([...tasks, newTask]);
    setTaskName('');
    setTaskDate('');
    setTaskImportance('low');
  };

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

  const viewTask = (task) => {
    setSelectedTask(task);
  };

  const editTask = (task) => {
    setSelectedTask(task);
    setIsEditing(true);
  };

  const saveTask = () => {
    setTasks(tasks.map(task => task.id === selectedTask.id ? selectedTask : task));
    setIsEditing(false);
    setSelectedTask(null);
  };

  const handleLanguageChange = (lang) => {
    setLanguage(lang);
  };

  const handleThemeChange = (th) => {
    setTheme(th);
  };

  useEffect(() => {
    const checkTaskTimes = () => {
      tasks.forEach(task => {
        const taskTime = new Date(task.date).getTime();
        const currentTime = new Date().getTime();
        const timeDifference = taskTime - currentTime;
        if (timeDifference > 0 && timeDifference <= 3600000) {
          alert(`Task ${task.name} is about to end!`);
        }
      });
    };
    const interval = setInterval(checkTaskTimes, 60000);
    return () => clearInterval(interval);
  }, [tasks]);

  return (
    <div className={`App ${theme}`}>
      <div className="header">
        <h1>Task Management App</h1>
        <div className="settings">
          <button onClick={() => handleLanguageChange('en')}>English</button>
          <button onClick={() => handleLanguageChange('ar')}>Arabic</button>
          <button onClick={() => handleThemeChange('light')}>Light</button>
          <button onClick={() => handleThemeChange('dark')}>Dark</button>
          <button onClick={() => handleThemeChange('system')}>System</button>
        </div>
      </div>
      <div className="task-form">
        <input
          type="text"
          placeholder="Task Name"
          value={taskName}
          onChange={(e) => setTaskName(e.target.value)}
        />
        <input
          type="datetime-local"
          value={taskDate}
          onChange={(e) => setTaskDate(e.target.value)}
        />
        <select value={taskImportance} onChange={(e) => setTaskImportance(e.target.value)}>
          <option value="high">High</option>
          <option value="medium">Medium</option>
          <option value="low">Low</option>
        </select>
        <button onClick={addTask}>Add Task</button>
      </div>
      <div className="task-list">
        {tasks.map(task => (
          <div key={task.id} className={`task ${task.importance}`}>
            <span>{task.name}</span>
            <div className="task-actions">
              <button onClick={() => viewTask(task)}>View</button>
              <button onClick={() => editTask(task)}>Edit</button>
              <button onClick={() => deleteTask(task.id)}>Delete</button>
            </div>
          </div>
        ))}
      </div>
      {selectedTask && (
        <div className="task-details">
          <h2>{isEditing ? 'Edit Task' : 'Task Details'}</h2>
          <input
            type="text"
            value={selectedTask.name}
            onChange={(e) => setSelectedTask({ ...selectedTask, name: e.target.value })}
            disabled={!isEditing}
          />
          <input
            type="datetime-local"
            value={selectedTask.date}
            onChange={(e) => setSelectedTask({ ...selectedTask, date: e.target.value })}
            disabled={!isEditing}
          />
          <select
            value={selectedTask.importance}
            onChange={(e) => setSelectedTask({ ...selectedTask, importance: e.target.value })}
            disabled={!isEditing}
          >
            <option value="high">High</option>
            <option value="medium">Medium</option>
            <option value="low">Low</option>
          </select>
          {isEditing && <button onClick={saveTask}>Save</button>}
          <button onClick={() => setSelectedTask(null)}>Close</button>
        </div>
      )}
    </div>
  );
};

export default App;

Open Sandbox

More Recommendations

View All

任务管理应用开发指南

Prompt

Generated Result

More Recommendations

30天投资赚$90

30天投资$10日赚$3

背景去除应用概念

One-Click Background Removal

照片排名系统

Water Delivery App