Technigo · zoe-lindqvist · Nov 22, 2024 · Nov 22, 2024 · Nov 22, 2024 · Nov 22, 2024
diff --git a/.gitignore b/.gitignore
@@ -1,18 +1,28 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# Node.js dependencies
+node_modules/
 
-# dependencies
-node_modules
+# Vite build output
+dist/
 
-# production
-build
-
-# misc
+# Miscellaneous
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+*.log
+*.env
+
+# Environment variable files
+.env
+.env.*.local
+
+# IDE-specific files
+.vscode/
+.idea/
 
+# Debug log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# TypeScript build artifacts (if any)
+*.tsbuildinfo
+
+
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "css.validate": false,
+  "postcss.validate": true
+}
diff --git a/README.md b/README.md
@@ -1,37 +1,18 @@
-<h1 align="center">
-  <a href="">
-    <img src="./src/assets/banner.svg" alt="Project Banner Image">
-  </a>
-</h1>
+# Create a Todo app ✅
 
-# 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.
-
-## 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
-```
+This week's assignment involved building a fully functional Todo app using Zustand for state management and TypeScript to ensure type safety and scalability. The app allows users to manage tasks efficiently, adhering to best practices in responsiveness, accessibility and clean code.
 
 ### 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?
+The challenge was to implement a Todo app that meets the following requirements:
 
-### View it live
+- List all tasks (completed and uncompleted).
+- Mark tasks as completed or revert them back to uncompleted.
+- Add and remove tasks dynamically.
+- Display task counts (all tasks or uncompleted tasks).
+- Ensure responsiveness across devices (320px to 1600px).
+- Follow accessibility guidelines (e.g., alt attributes, proper color contrast).
 
-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.
-
-## Instructions
+### View it live
 
-<a href="instructions.md">
-   See instructions of this project
-  </a>
+[https://tidy-task.netlify.app/](https://tidy-task.netlify.app/)
diff --git a/index.html b/index.html
@@ -1,12 +1,24 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Todos App Context API</title>
+    <title>TidyTask</title>
+    <!-- Light Mode Favicon -->
+    <link
+      rel="icon"
+      href="/assets/favicon-black.svg"
+      media="(prefers-color-scheme: light)"
+    />
+    <!-- Dark Mode Favicon -->
+    <link
+      rel="icon"
+      href="/assets/favicon-white.svg"
+      media="(prefers-color-scheme: dark)"
+    />
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>