Technigo · Lillebrorgroda · May 22, 2025 · May 22, 2025 · May 22, 2025 · May 23, 2025
diff --git a/README.md b/README.md
@@ -1 +1 @@
-# Todo
+https://lillebrorgrodatodos.netlify.app/
diff --git a/index.html b/index.html
@@ -1,16 +1,22 @@
 <!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" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap"
+    rel="stylesheet">
+  <title>Todo</title>
+</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,14 +10,22 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "styled-components": "^6.1.18",
+    "zustand": "^5.0.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^4.4.1",
+    "babel-plugin-styled-components": "^2.1.4",
     "eslint": "^9.21.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,5 +1,18 @@
+import TodoList from "./components/TodoList"
+import TodoListCount from "./components/TodoListCount"
+import ClearTodos from "./components/ClearTodos"
+import GlobalStyle from "./styles/GlobalStyle"
+
+
 export const App = () => {
   return (
-    <h1>React Boilerplate</h1>
+    <>
+      <GlobalStyle />
+      <TodoList />
+      <TodoListCount />
+      <ClearTodos />
+
+
+    </>
   )
 }
diff --git a/src/components/ClearTodos.jsx b/src/components/ClearTodos.jsx
@@ -0,0 +1,27 @@
+import useTodoStore from "../store/todoStore"
+import styled from "styled-components"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faTrashCan } from "@fortawesome/free-solid-svg-icons"
+
+const ClearContainer = styled.div`
+
+  bottom: 20px;
+  left: 20px;
+
+  @media (min-width: 601px) {
+    position: fixed;
+    z-index: 1000;
+  }
+  `
+
+const ClearTodos = () => {
+  const clearTodos = useTodoStore((state) => state.clearTodos)
+
+  return (
+    <ClearContainer>
+      <button onClick={clearTodos}><FontAwesomeIcon icon={faTrashCan} /> All Todos</button>
+    </ClearContainer>
+  )
+}
+
+export default ClearTodos
diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
@@ -0,0 +1,100 @@
+import { useState } from "react"
+import useTodoStore from "../store/todoStore"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faTrashCan, faPlus, faClipboardList } from "@fortawesome/free-solid-svg-icons"
+import MobileBox from "../styles/MobileCount.jsx"
+import { TodoListContainer, StyledInput, StyledFilterButtons, FilterButton, TodoListStyled, TodoItem, EmptyState } from "../styles/TodoList.styles"
+
+
+const formatDateFancy = (isoString) => {
+  const date = new Date(isoString)
+  const day = date.getDate();
+  const month = date.toLocaleString("en-EN", { month: "long" })
+  const hour = date.getHours().toString().padStart(2, "0");
+  const minute = date.getMinutes().toString().padStart(2, "0");
+  return `${day} ${month} kl.${hour}:${minute} `
+}
+
+const TodoList = () => {
+  const { todos, addTodo, removeTodo, toggleTodo, markAllComplete } = useTodoStore()
+  const [newTodo, setNewTodo] = useState("")
+  const [filter, setFilter] = useState("all")
+
+  const handleAddTodo = () => {
+    if (newTodo.trim()) {
+      addTodo(newTodo)
+      setNewTodo("")
+    }
+  }
+
+  return (
+    <TodoListContainer>
+      <h1>Todo List</h1>
+
+      <StyledInput>
+        <input
+          type="text"
+          value={newTodo}
+          onChange={(event) => setNewTodo(event.target.value)}
+          placeholder="Add a new todo"
+          aria-label="add a new todo" />
+        <button aria-label="add todo" onClick={handleAddTodo}><FontAwesomeIcon icon={faPlus} /></button>
+      </StyledInput>
+
+      <StyledFilterButtons>
+        <FilterButton
+          aria-label="show all todos"
+          $active={filter === "all"}
+          onClick={() => setFilter("all")}>All</FilterButton>
+        <FilterButton
+          aria-label="show completed todos"
+          $active={filter === "completed"}
+          onClick={() => setFilter("completed")}>Completed</FilterButton>
+        <FilterButton
+          aria-label="show incomplete todos"
+          $active={filter === "incomplete"}
+          onClick={() => setFilter("incomplete")}>Incomplete</FilterButton>
+      </StyledFilterButtons>
+
+      <MobileBox>
+        📝 Todo: {todos.length}
+      </MobileBox>
+
+      <TodoListStyled>
+        {todos.filter((todo) => {
+          if (filter === "completed") return todo.completed
+          if (filter === "incomplete") return !todo.completed
+          return true
+        }).length === 0 && (
+            <EmptyState role="presentation">
+              <FontAwesomeIcon role="presentation" icon={faClipboardList} />
+              <p>Your todo list is empty – time to add something!</p>
+            </EmptyState>
+          )}
+
+        {todos.filter((todo) => {
+          if (filter === "completed") return todo.completed
+          if (filter === "incomplete") return !todo.completed
+          return true
+        })
+
+          .map((todo) => (
+            <TodoItem key={todo.id} $completed={todo.completed}>
+              <input
+                type="checkbox"
+                checked={todo.completed}
+                onChange={() => toggleTodo(todo.id)}
+                aria-label="todo checkbox"
+              />
+              <span> {todo.text} - {formatDateFancy(todo.createdAt)}</span>
+              <button aria-label="delete todo" onClick={() => removeTodo(todo.id)}><FontAwesomeIcon icon={faTrashCan} /></button>
+            </TodoItem>
+          ))}
+      </TodoListStyled>
+
+      <button aria-label="mark all todos complete" onClick={markAllComplete}>All Todos done!</button>
+
+    </TodoListContainer>
+  )
+}
+export default TodoList
diff --git a/src/components/TodoListCount.jsx b/src/components/TodoListCount.jsx
@@ -0,0 +1,50 @@
+import useTodoStore from "../store/todoStore"
+import styled from "styled-components"
+
+const CountContainer = styled.div`
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 20px 30px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  text-align: left;
+
+    @media (max-width: 600px) {
+    display: none;
+  }
+`
+
+const Heading = styled.h2`
+  margin-bottom: 15px;
+  color: #333;
+`
+
+const CountText = styled.p`
+  margin: 5px 0;
+  font-size: 16px;
+  color: #444;
+  font-weight: 500;
+`
+
+const TodoListCount = () => {
+  const todos = useTodoStore((state) => state.todos)
+  const todoCount = todos.length
+  const completedCount = todos.filter((todo) => todo.completed).length
+  const incompleteCount = todoCount - completedCount
+
+  return (
+
+    <CountContainer>
+      <Heading>Stats</Heading>
+      <CountText>Total: {todoCount}</CountText>
+      <CountText>✔ Done: {completedCount}</CountText>
+      <CountText>⏳ Left: {incompleteCount}</CountText>
+    </CountContainer>
+  )
+}
+
+export default TodoListCount
+
diff --git a/src/store/todoStore.jsx b/src/store/todoStore.jsx
@@ -0,0 +1,39 @@
+import { create } from "zustand"
+import { persist } from "zustand/middleware"
+
+const useTodoStore = create(persist((set) => ({
+  todos: [],
+
+  addTodo: (todo) => set((state) => ({
+    todos: [...state.todos, {
+      id: Date.now(),
+      text: todo,
+      completed: false,
+      createdAt: new Date().toISOString(),
+    }],
+  })),
+
+  removeTodo: (id) => set((state) => ({
+    todos: state.todos.filter((todo) => todo.id !== id),
+  })),
+
+  toggleTodo: (id) => set((state) => ({
+    todos: state.todos.map((todo) =>
+      todo.id === id ? { ...todo, completed: !todo.completed } : todo,
+    ),
+  })),
+  markAllComplete: () => set((state) => ({
+    todos: state.todos.map((todo) => ({ ...todo, completed: true })),
+  })),
+  clearTodos: () => set(() => ({
+    todos: [],
+  })),
+
+}),
+
+  {
+    name: "todo-storage",
+  }
+
+))
+export default useTodoStore
diff --git a/src/styles/GlobalStyle.jsx b/src/styles/GlobalStyle.jsx
@@ -0,0 +1,49 @@
+
+import { createGlobalStyle } from "styled-components"
+
+
+const GlobalStyle = createGlobalStyle`
+
+  * {
+    box-sizing: border-box;
+
+  }
+
+  body {
+    font-family: "Poppins", sans-serif;
+    background-color: #ddfff7;
+    color: #333;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    /* line-height: 1.6; */
+  }
+
+  h1, h2 {
+    color: #333;
+  }
+
+  button {
+    background-color: #ffa69e;
+    color: #242424;
+    border: none;
+    padding: 10px 10px;
+    cursor: pointer;
+    border-radius: 5px;
+    font-size: 16px;
+
+    &:hover {
+      background-color: #ff5546;
+    }
+  }
+
+  input[type="text"] {
+    padding: 10px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+  } 
+
+
+
+`
+export default GlobalStyle
diff --git a/src/styles/MobileCount.jsx b/src/styles/MobileCount.jsx
@@ -0,0 +1,21 @@
+
+import styled from 'styled-components'
+
+
+const MobileBox = styled.div`
+  background-color: #ffa69e;
+  color: #242424;
+  border-radius: 50px;
+  padding: 10px 20px;
+  font-size: 16px;
+
+  z-index: 1000;
+
+
+  @media (min-width: 601px) {
+    display: none;
+
+  }
+`
+
+export default MobileBox