Technigo · Anna2024WebDev · Nov 20, 2024 · Nov 21, 2024 · Nov 21, 2024 · Nov 21, 2024
diff --git a/README.md b/README.md
@@ -6,32 +6,18 @@
 
 # Todo - useContext Project
 
-Replace this readme with your own information about your project.
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+This week we learned about global state management and using Zustand to store information.
 
 ## Getting Started with the Project
 
-### Dependency Installation & Startup Development Server
-
-Once cloned, navigate to the project's root directory and this project uses npm (Node Package Manager) to manage its dependencies.
-
-The command below is a combination of installing dependencies, opening up the project on VS Code and it will run a development server on your terminal.
-
-```bash
-npm i && code . && npm run dev
-```
+I started with planning for my to do list. I wanted to have a post it like to do list. At first I did the same layout for desktop, tablet and mobile with a grid of cards but changed the mobile version to flexbox and slimmer, wider cards stacking on each other.
 
 ### The Problem
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+I had difficulties understanding what to put in the store and which functions to add but I looked a lot at Matildas live sessions and tried to follow that together with help from chatGPT. I also looked a lot at the happy thoughts project to get some inspiration and used some functions and conditionals from there. I found out after asking chat GPT about storage, that Zustand had a built in storage function called persist similar to locale.storage, so I used that.
 
-### View it live
-
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+If I had more time I would go for another layout on mobile but I like the color switch and line trough that I have when a task is completed and that works best when having separate task boxes.
 
-## Instructions
+### View it live
 
-<a href="instructions.md">
-   See instructions of this project
-  </a>
+https://my-todo-postits.netlify.app/
diff --git a/index.html b/index.html
@@ -3,7 +3,15 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Todos App Context API</title>
+    <meta name="icon-attribution" content="Empty icons created by Freepik - Flaticon">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="icon" type="image/png" href="./src/assets/favicon.png" />
+    <link href="https://fonts.googleapis.com/css2?family=Anton&family=Inconsolata:[email protected]&family=Indie+Flower&family=Kosugi+Maru&family=Montserrat:ital,wght@0,100..900;1,100..900&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=Reenie+Beanie&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <title>My todo list</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,9 +10,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "font-awesome": "^4.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.18.0"
+    "react-router-dom": "^6.18.0",
+    "styled-components": "^6.1.13",
+    "zustand": "^5.0.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,3 +1,14 @@
+import { Header } from "./components/Header"
+import { AddTask } from "./components/AddTask"
+import { Tasklist } from "./components/Tasklist"
+
+
 export const App = () => {
-  return <div>Find me in App.jsx!</div>;
-};
+  return (
+    <div>
+      <Header />
+      <AddTask />
+      <Tasklist />
+    </div>
+  )
+}
diff --git a/src/assets/check-solid.svg b/src/assets/check-solid.svg
diff --git a/src/assets/favicon.png b/src/assets/favicon.png
diff --git a/src/assets/no-task.png b/src/assets/no-task.png