任务管理应用开发

4.0

4/4/2025

Web开发

HTML

CSS

JavaScript

任务管理

Web开发

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 [newTask, setNewTask] = useState({ name: '', date: '', importance: 'medium' });
  const [editTask, setEditTask] = useState(null);
  const [deleteTaskId, setDeleteTaskId] = useState(null);
  const [viewTask, setViewTask] = useState(null);
  const [language, setLanguage] = useState('English');
  const [mode, setMode] = useState('light');

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setNewTask({ ...newTask, [name]: value });
  };

  const addTask = () => {
    if (newTask.name && newTask.date) {
      setTasks([...tasks, { ...newTask, id: Date.now() }]);
      setNewTask({ name: '', date: '', importance: 'medium' });
    }
  };

  const toggleMode = () => {
    setMode(mode === 'light' ? 'dark' : 'light');
  };

  const handleEdit = (task) => {
    setEditTask(task);
  };

  const saveEdit = () => {
    setTasks(tasks.map(t => t.id === editTask.id ? editTask : t));
    setEditTask(null);
  };

  const confirmDelete = (id) => {
    setTasks(tasks.filter(t => t.id !== id));
    setDeleteTaskId(null);
  };

  return (
    <div className={`App ${mode}`}>
      <header>
        <h1>Task Management</h1>
        <button onClick={toggleMode}>Toggle Mode</button>
      </header>
      <div>
        <input name="name" value={newTask.name} onChange={handleInputChange} placeholder="Task Name" />
        <input type="date" name="date" value={newTask.date} onChange={handleInputChange} />
        <select name="importance" value={newTask.importance} onChange={handleInputChange}>
          <option value="high">High</option>
          <option value="medium">Medium</option>
          <option value="low">Low</option>
        </select>
        <button onClick={addTask}>Add Task</button>
      </div>
      <div>
        {tasks.map(task => (
          <div key={task.id} className={`task ${task.importance}`}>
            <span>{task.name}</span>
            <div>
              <button onClick={() => setViewTask(task)}>View</button>
              <button onClick={() => handleEdit(task)}>Edit</button>
              <button onClick={() => setDeleteTaskId(task.id)}>Delete</button>
            </div>
          </div>
        ))}
      </div>
      {viewTask && (
        <div className="popup">
          <h3>{viewTask.name}</h3>
          <p>Date: {viewTask.date}</p>
          <p>Importance: {viewTask.importance}</p>
          <button onClick={() => setViewTask(null)}>Close</button>
        </div>
      )}
      {editTask && (
        <div className="popup">
          <h3>Edit Task</h3>
          <input value={editTask.name} onChange={(e) => setEditTask({ ...editTask, name: e.target.value })} />
          <input type="date" value={editTask.date} onChange={(e) => setEditTask({ ...editTask, date: e.target.value })} />
          <select value={editTask.importance} onChange={(e) => setEditTask({ ...editTask, importance: e.target.value })}>
            <option value="high">High</option>
            <option value="medium">Medium</option>
            <option value="low">Low</option>
          </select>
          <button onClick={saveEdit}>Save</button>
          <button onClick={() => setEditTask(null)}>Cancel</button>
        </div>
      )}
      {deleteTaskId && (
        <div className="popup">
          <h3>Are you sure you want to delete this task?</h3>
          <button onClick={() => confirmDelete(deleteTaskId)}>Yes</button>
          <button onClick={() => setDeleteTaskId(null)}>No</button>
        </div>
      )}
      <footer>
        <p>© 2025 Task Management App</p>
      </footer>
    </div>
  );
};

export default App;

Open Sandbox

More Recommendations

View All

任务管理应用开发

Prompt

Generated Result

More Recommendations

Build ChatGPT-Like Web Interface

Flutter 产品列表页

Flutter产品列表页

Build XO App with AI

Generate YouTube Subscribers

YouTube Subscribers App