Code Detail

Prompt

2025年3月26日 15:11

i want to build a web appl with all these features : Features • Customizable rules - it allows you to modify the default Pomodoro configuration based on your personal preferences. • Built-in task list - it allows you to create a simple list of todos and mark the items done when it's done. • Desktop notification - once enabled, you will get desktop notifications from time to time depending on the notification type you selected. Supported notification types are the following; o None - no notification will be shown. default o Normal - will show notification in every break. • Special breaks - a special feature that enables you to set specific times to take important breaks like lunch, snack, dinner and etc.. without updating the Pomodoro configuration. • Always on top - once enabled, the app will always be on top of other apps running on your Operating System. • Progress animation - by default, you will get a smooth timer progress animation but if you're worried about the app's memory consumption on your computer, you can disable it by the way. • Auto-start work time - once enabled, you will no longer need to manually start the work timer again after the break ends, it will automatically start for you. • Voice assistance - once enabled, your desktop notification will include a male voice to inform you of things related to your Pomodoro session. Useful sometimes especially when you're away from your computer during break time. • Dark theme - it allows you to use dark mode and helps you reduce eye strain and improves visibility if you are the type of person with low vision and high sensitivity to bright light. • Compact Mode - once enabled, the app will occupy less space on your screen and it will be useful if you're using a small-screen device.

Generated Result

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

const App = () => {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');
  const [pomodoroConfig, setPomodoroConfig] = useState({
    workTime: 25,
    breakTime: 5,
    specialBreaks: [],
    notifications: 'None',
    alwaysOnTop: false,
    progressAnimation: true,
    autoStart: false,
    voiceAssistance: false,
    darkTheme: false,
    compactMode: false
  });

  const addTask = () => {
    if (newTask.trim()) {
      setTasks([...tasks, { id: Date.now(), text: newTask, done: false }]);
      setNewTask('');
    }
  };

  const toggleTaskDone = (id) => {
    setTasks(tasks.map(task => task.id === id ? { ...task, done: !task.done } : task));
  };

  return (
    <div className={`App ${pomodoroConfig.darkTheme ? 'dark' : ''} ${pomodoroConfig.compactMode ? 'compact' : ''}`}>
      <header className="header">
        <h1>Pomodoro Timer</h1>
        <nav>
          <button>Settings</button>
        </nav>
      </header>
      <main className="main-content">
        <section className="pomodoro-timer">
          <div className="timer">25:00</div>
          <button className="start-button">Start</button>
        </section>
        <section className="task-list">
          <h2>Tasks</h2>
          <div className="task-input">
            <input
              type="text"
              value={newTask}
              onChange={(e) => setNewTask(e.target.value)}
              placeholder="Add a new task"
            />
            <button onClick={addTask}>Add</button>
          </div>
          <ul>
            {tasks.map(task => (
              <li key={task.id} className={task.done ? 'done' : ''}>
                <span>{task.text}</span>
                <button onClick={() => toggleTaskDone(task.id)}>{task.done ? 'Undo' : 'Done'}</button>
              </li>
            ))}
          </ul>
        </section>
      </main>
      <footer className="footer">
        <p>© 2025 Pomodoro Timer. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;

Open Sandbox