Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

import { useState } from 'react';

let nextId = 4;

function TaskManager() {
  const [tasks, setTasks] = useState([
    { id: 1, text: 'Design wireframes', done: false },
    { id: 2, text: 'Write tests',       done: true  },
    { id: 3, text: 'Deploy to staging', done: false },
  ]);
  const [input, setInput] = useState('');

// Add
  const addTask = () => {
    if (!input.trim()) return;
    setTasks(prev => [...prev, { id: nextId++, text: input.trim(), done: false }]);
    setInput('');
  };

// Toggle done
  const toggle = (id) =>
    setTasks(prev => prev.map(t => t.id === id ? { ...t, done: !t.done } : t));

// Remove
  const remove = (id) =>
    setTasks(prev => prev.filter(t => t.id !== id));

const pending   = tasks.filter(t => !t.done);
  const completed = tasks.filter(t =>  t.done);

return (
    <div style={{ maxWidth: 400 }}>
      <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
        <input
          value={input}
          onChange={e => setInput(e.target.value)}
          onKeyDown={e => e.key === 'Enter' && addTask()}
          placeholder="New task…"
          style={{ flex: 1 }}
        />
        <button onClick={addTask}>Add</button>
      </div>

<h4>Pending ({pending.length})</h4>
      <ul>
        {pending.map(t => (
          <li key={t.id}>
            <button onClick={() => toggle(t.id)}>✓</button>
            {' '}{t.text}{' '}
            <button onClick={() => remove(t.id)}>✕</button>
          </li>
        ))}
      </ul>

<h4>Done ({completed.length})</h4>
      <ul style={{ color: '#888' }}>
        {completed.map(t => (
          <li key={t.id} style={{ textDecoration: 'line-through' }}>
            {t.text}{' '}
            <button onClick={() => remove(t.id)}>✕</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TaskManager;