project-15-to-dos-zustand-vite

README.md

@@ -6,29 +6,25 @@
 
 # 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.
+Todo app where you list your todos, delete when finished.
 
 ## 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.
+Zustand, useContext
 
 ```bash
 npm i && code . && npm run dev
 ```
 
 ### 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?
+
 
 ### 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.
+Netlify: https://mytodos-erika.netlify.app/ 
 
 ## Instructions
 

package.json

@@ -12,7 +12,9 @@
   "dependencies": {
     "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",

pull_request_template.md

@@ -1,6 +1,5 @@
 ## Netlify link
-Add your Netlify link here.
-PS. Don't forget to add it in your readme as well.
+https://mytodos-erika.netlify.app/ 
 
 ## Collaborators
-Add any collaborators here.
+-

src/App.jsx

@@ -1,3 +1,28 @@
+import React from "react";
+import { useTheme } from "./context/ThemeContext";
+import { GlobalStyle } from "./styles/GlobalStyle";
+import Header from "./components/Header";
+import TodoList from "./components/TodoList";
+import AddTodoPopup from "./components/AddTodoPopup";
+import AddTodoButton from "./components/AddTodoButton";
+
+
 export const App = () => {
-  return <div>Find me in App.jsx!</div>;
+  const { isDarkMode } = useTheme();
+  const [isPopupOpen, setIsPopupOpen] = React.useState(false);
+
+
+
+  return (
+    <>
+      <GlobalStyle theme={{ isDarkMode }} />
+      <div>
+        <Header theme={{ isDarkMode }} togglePopup={() => setIsPopupOpen(true)} />
+        <TodoList />
+        {isPopupOpen && <AddTodoPopup onClose={() => setIsPopupOpen(false)} />}
+        <AddTodoButton onClick={() => setIsPopupOpen(true)} /> 
+      </div>
+    </>
+  )
 };
+

src/components/AddTodoButton.jsx

@@ -0,0 +1,30 @@
+import styled from "styled-components";
+
+const FloatingButton = styled.button`
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 60px;
+  height: 60px;
+  background-color: #6c63ff; /* Lila färg */
+  color: #fff;
+  border: none;
+  border-radius: 50%;
+  font-size: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+
+  &:hover {
+    background-color: #5a54e3; /* Lite mörkare lila vid hover */
+  }
+`;
+
+const AddTodoButton = ({ onClick }) => {
+  return <FloatingButton onClick={onClick}>+</FloatingButton>;
+};
+
+export default AddTodoButton;