100 accessibilty score

.gitignore

@@ -23,3 +23,5 @@ package-lock.json
 *.njsproj
 *.sln
 *.sw?
+
+.env

README.md

@@ -1 +1,3 @@
-# Todo
+# Todo
+
+Todo App is a mobile-first task manager built with React, Styled Components and Zustand for global state. It lets you quickly add, toggle and remove tasks in a clean, responsive UI—no prop-drilling required.

package.json

@@ -10,8 +10,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/material": "^7.1.0",
+    "date-fns": "^4.1.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "styled-components": "^6.1.18",
+    "uuid": "^11.1.0",
+    "zustand": "^5.0.4"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",

pull_request_template.md

@@ -1 +1 @@
-Please include your Netlify link here.
+Netlify link here [zustandtodoapp.netlify.app]

src/App.jsx

@@ -1,5 +1,29 @@
+import Header from './components/Header';
+import TaskForm from './components/TaskForm';
+import TaskView from './components/TaskView';
+import styled, { ThemeProvider } from 'styled-components';
+import useTaskStore from './store/useTaskStore';
+import { GlobalStyle, lightTheme, darkTheme } from '../styles/globalStyles';
+
+const AppContainer = styled.div`
+  background: ${({ theme }) => theme.background};
+  color: ${({ theme }) => theme.text};
+  min-height: 100vh;
+  padding: 1rem;
+`;
+
 export const App = () => {
+  const themeMode = useTaskStore((s) => s.themeMode);
+  const theme = themeMode === 'light' ? lightTheme : darkTheme;
+
   return (
-    <h1>React Boilerplate</h1>
-  )
-}
+    <ThemeProvider theme={theme}>
+      <GlobalStyle />
+      <AppContainer>
+        <Header />
+        <TaskForm />
+        <TaskView />
+      </AppContainer>
+    </ThemeProvider>
+  );
+};

src/components/DateInputWithPicker.jsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+
+export default function DateInputWithPicker() {
+  const [textValue, setTextValue] = useState('');
+  const [dateValue, setDateValue] = useState('');
+  const [showCalendar, setShowCalendar] = useState(false);
+
+  const handleTextChange = (e) => {
+    setTextValue(e.target.value);
+  };
+
+  const handleDateChange = (e) => {
+    const val = e.target.value; // "2025-05-22"
+    setDateValue(val);
+    setTextValue(val);
+  };
+
+  const toggleCalendar = () => {
+    setShowCalendar((prev) => !prev);
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log('Datum skickas vidare:', textValue);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} style={{ padding: '20px', margin: '10px' }}>
+      <label
+        htmlFor='date-text-input'
+        style={{ display: 'block', marginBottom: '15px' }}
+      >
+        Date (YYYY-MM-DD):
+        <input
+          id='date-text-input'
+          type='text'
+          value={textValue}
+          onChange={handleTextChange}
+          placeholder='YYYY-MM-DD'
+          style={{
+            padding: '12px',
+            margin: '8px 0',
+            width: '100%',
+            boxSizing: 'border-box',
+          }}
+        />
+      </label>
+      <button
+        type='button'
+        onClick={toggleCalendar}
+        style={{ padding: '12px 24px', margin: '8px 5px' }}
+      >
+        öppna kalender
+      </button>
+      <button type='submit' style={{ padding: '12px 24px', margin: '8px 5px' }}>
+        välj datum
+      </button>
+
+      {showCalendar && (
+        <label
+          htmlFor='date-picker'
+          style={{ display: 'block', marginTop: '15px', marginBottom: '15px' }}
+        >
+          Select Date:
+          <input
+            id='date-picker'
+            type='date'
+            value={dateValue}
+            onChange={handleDateChange}
+            style={{
+              padding: '12px',
+              margin: '8px 0',
+              width: '100%',
+              boxSizing: 'border-box',
+            }}
+          />
+        </label>
+      )}
+    </form>
+  );
+}

src/components/EmtyState.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Message = styled.p`
+  text-align: center;
+  color: #666;
+  margin-top: 2rem;
+`;
+
+export default function EmptyState({ text }) {
+  return <Message>{text}</Message>;
+}

src/components/FilterBar.jsx

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+
+export const Bar = styled.nav``;
+
+export const FilterButton = styled.button`
+  background: ${({ $isActive, theme }) =>
+    $isActive ? theme.primary : theme.surface};
+  color: ${({ $isActive, theme }) => ($isActive ? '#fff' : theme.text)};
+`;
+
+export default function FilterBar({ filterMode, onChange }) {
+  const modes = [
+    { key: 'today', label: 'Today' },
+    { key: 'weekly', label: 'Weekly' },
+    { key: 'all', label: 'All Tasks' },
+  ];
+
+  return (
+    <Bar>
+      {modes.map(({ key, label }) => (
+        <FilterButton
+          key={key}
+          $isActive={filterMode === key}
+          onClick={() => onChange(key)}
+        >
+          {label}
+        </FilterButton>
+      ))}
+    </Bar>
+  );
+}

src/components/Header.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import useTaskStore from '../store/useTaskStore';
+import styled from 'styled-components';
+
+const HeaderContainer = styled.header`
+  background: ${({ theme }) => theme.surface};
+  color: ${({ theme }) => theme.text};
+`;
+
+const ToggleButton = styled.button`
+  background: none;
+  border: none;
+  color: ${({ theme }) => theme.primary};
+  cursor: pointer;
+`;
+
+export default function Header() {
+  const totalCount = useTaskStore((state) => state.selectors.getTotalCount());
+  const clearCompleted = useTaskStore((state) => state.actions.clearCompleted);
+  const notCompleted = useTaskStore((state) =>
+    state.selectors.getRemainingCount()
+  );
+
+  const toggleTheme = useTaskStore((state) => state.actions.toggleTheme);
+  const themeMode = useTaskStore((state) => state.themeMode);
+
+  return (
+    <HeaderContainer>
+      <h1>My Zustand Todo App</h1>
+      <p>Totalt: {totalCount} uppgifter</p>
+      <p>Remaining: {notCompleted} uppgiofter</p>
+      <button onClick={clearCompleted}>Rensa avklarade</button>
+      <ToggleButton
+        onClick={() => {
+          console.log('Toggle clicked!'); // ← ska synas i konsolen
+          toggleTheme();
+        }}
+      >
+        {themeMode === 'light' ? 'Dark mode' : 'Light mode'}
+      </ToggleButton>
+    </HeaderContainer>
+  );
+}

src/components/TaskForm.jsx

@@ -0,0 +1,90 @@
+import useTaskStore from '../store/useTaskStore';
+import { useState } from 'react';
+
+export default function TaskForm() {
+  const [inputText, setInputText] = useState('');
+  const [dueDate, setDueDate] = useState('');
+  const addTask = useTaskStore((state) => state.actions.addTask);
+
+  const handleChange = (event) => {
+    setInputText(event.target.value);
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+
+    const text = inputText.trim();
+
+    // 1) Ingen text alls?
+    if (!text) {
+      alert('Please enter a task');
+      return;
+    }
+
+    // 2) För kort?
+    if (text.length < 3) {
+      alert('Task is too short (min 3 characters)');
+      return;
+    }
+
+    // 3) För långt?
+    if (text.length > 100) {
+      alert('Task is too long (max 100 characters)');
+      return;
+    }
+
+    addTask(text, dueDate);
+    setInputText('');
+    setDueDate('');
+  };
+
+  /* 
+  User skriver → onChange → handleChange → setInputText → React-state uppdateras → input.value ändras
+  */
+
+  return (
+    <form onSubmit={handleSubmit} style={{ padding: '20px', margin: '10px' }}>
+      <label
+        htmlFor='task-input'
+        style={{ display: 'block', marginBottom: '15px' }}
+      >
+        Task Description:
+        <input
+          id='task-input'
+          value={inputText}
+          type='text'
+          placeholder='Write a task'
+          onChange={handleChange}
+          style={{
+            padding: '12px',
+            margin: '8px 0',
+            width: '100%',
+            boxSizing: 'border-box',
+          }}
+        />
+      </label>
+      <label
+        htmlFor='due-date'
+        style={{ display: 'block', marginBottom: '15px' }}
+      >
+        Due Date:
+        <input
+          id='due-date'
+          type='date'
+          value={dueDate} // en useState‐variabel, t.ex. [dueDate, setDueDate]
+          onChange={(e) => setDueDate(e.target.value)}
+          min={new Date().toISOString().split('T')[0]} // förhindra datum i det förflutna
+          style={{
+            padding: '12px',
+            margin: '8px 0',
+            width: '100%',
+            boxSizing: 'border-box',
+          }}
+        />
+      </label>
+      <button type='submit' style={{ padding: '12px 24px', margin: '10px 0' }}>
+        Add Task
+      </button>
+    </form>
+  );
+}

src/components/TaskItem.jsx

@@ -0,0 +1,33 @@
+import useTaskStore from '../store/useTaskStore';
+
+export default function TaskItem({ task }) {
+  const toggleTask = useTaskStore((state) => state.actions.toggleTask);
+  const removeTask = useTaskStore((state) => state.actions.removeTask);
+
+  const handleToggle = () => {
+    toggleTask(task.id);
+  };
+
+  const handleRemove = () => {
+    removeTask(task.id);
+  };
+
+  return (
+    <li>
+      <input
+        id={`task-${task.id}`} //for conneting to the label
+        type='checkbox'
+        checked={task.done}
+        onChange={handleToggle}
+      ></input>
+      <label htmlFor={`task-${task.id}`}>{task.text}</label>
+      <button
+        type='button'
+        onClick={handleRemove}
+        aria-label={`Remove task ${task.text}`}
+      >
+        🗑️
+      </button>
+    </li>
+  );
+}