Technigo · sofia-grunditz · May 26, 2025
diff --git a/index.html b/index.html
@@ -1,16 +1,32 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="./vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Todo</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script
-      type="module"
-      src="./src/main.jsx">
-    </script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link
+    rel="icon"
+    type="image/svg+xml"
+    href="./vite.svg"
+  />
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1.0"
+  >
+  <title>Todo</title>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+    rel="stylesheet"
+  >
+
+</head>
+
+<body>
+  <div id="root"></div>
+  <script
+    type="module"
+    src="./src/main.jsx"
+  >
+  </script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -10,8 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "date-fns": "^4.1.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0",
+    "zustand": "^5.0.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,5 +1,17 @@
-export const App = () => {
-  return (
-    <h1>React Boilerplate</h1>
-  )
-}
+import React from 'react';
+import TaskForm from './components/TaskForm';
+import TaskList from './components/TaskList';
+import TaskStats from './components/TaskStats';
+import ThemeToggle from './components/ThemeToggle';
+
+const App = () => (
+  <main>
+    <ThemeToggle />
+    <h1>PlainTasks</h1>
+    <TaskForm />
+    <TaskStats />
+    <TaskList />
+  </main>
+);
+
+export default App;
diff --git a/src/components/EmptyState.jsx b/src/components/EmptyState.jsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const EmptyState = () => (
+  <p>No tasks yet. Add one above to get started.</p>
+);
+
+export default EmptyState;
diff --git a/src/components/TaskForm.jsx b/src/components/TaskForm.jsx
@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import { useTaskStore } from '../store/taskStore';
+
+const TaskForm = () => {
+  const [input, setInput] = useState('');
+  const addTask = useTaskStore((state) => state.addTask);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (input.trim()) {
+      addTask(input.trim());
+      setInput('');
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input
+        type="text"
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        placeholder="Enter a task"
+        aria-label="New task"
+      />
+      <button type="submit">Add</button>
+    </form>
+  );
+};
+
+export default TaskForm;
diff --git a/src/components/TaskItem.jsx b/src/components/TaskItem.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { useTaskStore } from '../store/taskStore';
+import { formatDate } from '../utils/formatDate';
+
+const TaskItem = ({ task }) => {
+  const toggleTask = useTaskStore((state) => state.toggleTask);
+  const removeTask = useTaskStore((state) => state.removeTask);
+
+  return (
+    <li>
+      <div className="task-header">
+        <label className={`task-title ${task.isCompleted ? 'completed' : ''}`}>
+          <input
+            type="checkbox"
+            checked={task.isCompleted}
+            onChange={() => toggleTask(task.id)}
+            aria-label={`Toggle task "${task.title}"`}
+            style={{ marginRight: '0.5rem' }}
+          />
+          {task.title}
+        </label>
+        <button
+          className="delete"
+          onClick={() => removeTask(task.id)}
+          aria-label={`Delete task "${task.title}"`}
+        >
+          ×
+        </button>
+      </div>
+      <div className="task-meta">
+        {task.isCompleted ? 'Completed' : 'Ongoing'} • {formatDate(task.createdAt)}
+      </div>
+    </li>
+  );
+};
+
+export default TaskItem;
diff --git a/src/components/TaskList.jsx b/src/components/TaskList.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { useTaskStore } from '../store/taskStore';
+import TaskItem from './TaskItem';
+
+const TaskList = () => {
+  const tasks = useTaskStore((state) => state.tasks);
+
+  if (tasks.length === 0) {
+    return <p className="stats">No tasks yet. Add one!</p>;
+  }
+
+  return (
+    <ul>
+      {tasks.map((task) => (
+        <TaskItem key={task.id} task={task} />
+      ))}
+    </ul>
+  );
+};
+
+export default TaskList;
diff --git a/src/components/TaskStats.jsx b/src/components/TaskStats.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { useTaskStore } from '../store/taskStore';
+
+const TaskStats = () => {
+  const tasks = useTaskStore((state) => state.tasks);
+  const clearCompleted = useTaskStore((state) => state.clearCompleted);
+  const remaining = tasks.filter((task) => !task.isCompleted).length;
+
+  return (
+    <div className="stats">
+      <p>Tasks left: {remaining}</p>
+      <button
+        onClick={clearCompleted}
+        style={{
+          backgroundColor: 'var(--soft-danger)',
+          color: '#ffffff',
+          padding: '0.5rem 1rem',
+          border: 'none',
+          borderRadius: 'var(--radius)',
+          cursor: 'pointer',
+          transition: 'background-color 0.2s ease'
+        }}
+        onMouseOver={(e) => e.target.style.backgroundColor = 'var(--soft-danger-hover)'}
+        onMouseOut={(e) => e.target.style.backgroundColor = 'var(--soft-danger)'}
+      >
+        Clear completed
+      </button>
+    </div>
+  );
+};
+
+export default TaskStats;
diff --git a/src/components/ThemeToggle.jsx b/src/components/ThemeToggle.jsx
@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from 'react';
+
+const ThemeToggle = () => {
+  const [theme, setTheme] = useState(() => localStorage.getItem('theme') || 'light');
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  return (
+    <button
+      onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+      aria-label="Toggle dark mode"
+      style={{
+        alignSelf: 'flex-end',
+        background: 'none',
+        border: '1px solid var(--border)',
+        padding: '0.5rem 1rem',
+        borderRadius: 'var(--radius)',
+        fontSize: '0.9rem',
+        color: 'var(--text)',
+        cursor: 'pointer',
+      }}
+    >
+      {theme === 'light' ? '🌙 Dark mode' : '☀️ Light mode'}
+    </button>
+  );
+};
+
+export default ThemeToggle;
diff --git a/src/main.jsx b/src/main.jsx
@@ -1,12 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-
-import { App } from './App.jsx'
-
-import './index.css'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './styles/global.css';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
-)
+);
diff --git a/src/store/taskStore.js b/src/store/taskStore.js
@@ -0,0 +1,47 @@
+import { create } from 'zustand';
+
+const getStoredTasks = () => {
+  const stored = localStorage.getItem('tasks');
+  return stored ? JSON.parse(stored) : [];
+};
+
+export const useTaskStore = create((set) => ({
+  tasks: getStoredTasks(),
+
+  addTask: (title) => {
+    const newTask = {
+      id: Date.now(),
+      title,
+      isCompleted: false,
+      createdAt: new Date().toISOString(),
+    };
+    set((state) => {
+      const updatedTasks = [newTask, ...state.tasks];
+      localStorage.setItem('tasks', JSON.stringify(updatedTasks));
+      return { tasks: updatedTasks };
+    });
+  },
+
+  toggleTask: (id) =>
+    set((state) => {
+      const updatedTasks = state.tasks.map((task) =>
+        task.id === id ? { ...task, isCompleted: !task.isCompleted } : task
+      );
+      localStorage.setItem('tasks', JSON.stringify(updatedTasks));
+      return { tasks: updatedTasks };
+    }),
+
+  removeTask: (id) =>
+    set((state) => {
+      const updatedTasks = state.tasks.filter((task) => task.id !== id);
+      localStorage.setItem('tasks', JSON.stringify(updatedTasks));
+      return { tasks: updatedTasks };
+    }),
+
+  clearCompleted: () =>
+    set((state) => {
+      const updatedTasks = state.tasks.filter((task) => !task.isCompleted);
+      localStorage.setItem('tasks', JSON.stringify(updatedTasks));
+      return { tasks: updatedTasks };
+    }),
+}));