project-todos-context-vite

README.md

@@ -1,37 +1,26 @@
-<h1 align="center">
-  <a href="">
-    <img src="./src/assets/banner.svg" alt="Project Banner Image">
-  </a>
-</h1>
 
-# Todo - useContext Project
-
-Replace this readme with your own information about your project.
+## Getting Started with the 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
+This weeks project was to do an To-Do App. In the app you can add tasks to a list, I've set a maximum of 10 tasks at a time. Once completed you check the box and the task will be overlined, you can also choose to remove a task.
 
-Once cloned, navigate to the project's root directory and this project uses npm (Node Package Manager) to manage its dependencies.
+### The Problem
 
-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.
+How did you plan? 
+It was fun to have free hands on this weeks project. Although, that made it quite difficult to decide on what to do. Decided to go simple and went for a To-Do list design/approach that I personally could use as a weekly planner. 
 
-```bash
-npm i && code . && npm run dev
-```
+If you had more time, what would be next?
+With more time I would have added date/time to the To-Do tasks. I would have added a component for notes were the user can write down information more freely. Also would have liked to add a "complete all-button" to the To-Do list that targets all tasks.
 
-### The Problem
+What technologies did you use? 
+State hooks such as useState were used to manage data within each component, such as to-do tasks, reminder text, workout days, etc.
+Event handling functions were implemented to handle user interactions like adding/removing tasks, toggling task completion, setting reminders, etc.
 
-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?
+Setting the date in ListName.jsx and ReminderBlock.jsx might not be showing as it should on phone views.
 
 ### 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.
+https://majestic-moxie-414767.netlify.app/
 
-## Instructions
 
-<a href="instructions.md">
-   See instructions of this project
-  </a>

src/App.jsx

@@ -1,3 +1,32 @@
+import { TodoProvider } from "./Components/TodoContext/TodoContext.jsx";
+import { ListName } from "./Components/ListName/ListName.jsx";
+import { TodoList } from "./Components/TodoList/TodoList.jsx";
+import { WorkoutBlock } from "./Components/Workout/WorkoutBlock.jsx";
+import { ReminderBlock } from "./Components/Reminder/ReminderBlock.jsx";
+import "./index.css";
+
 export const App = () => {
-  return <div>Find me in App.jsx!</div>;
+  return (
+    <TodoProvider>
+      <div>
+        <h1>To-Do App</h1>
+      </div>
+      <div className="container">
+        <div className="left-block">
+          <TodoList />
+        </div>
+        <div className="right-block">
+          <div className="first-block">
+            <ListName />
+          </div>
+          <div className="second-block">
+            <WorkoutBlock />
+          </div>
+          <div className="third-block">
+            <ReminderBlock />
+          </div>
+        </div>
+      </div>
+    </TodoProvider>
+  );
 };

src/Components/ListName/ListName.css

@@ -0,0 +1,41 @@
+.listname-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.listname-container h2 {
+  font-family: "Poltawski Nowy", sans-serif;
+  font-size: 25px;
+  color: #382e2c;
+  margin: auto;
+  margin-top: 10px;
+}
+
+.listname-container input {
+  font-family: "Raleway", sans-serif;
+  font-size: 18px;
+  color: #695853;
+  margin-left: 10px;
+  cursor: pointer;
+  border: 1px solid #9a9086;
+  border-radius: 10px;
+  padding: 6px 10px;
+}
+
+.listname-container input:focus {
+  outline: 1px solid #695853;
+}
+
+/* Media Query */
+@media (max-width: 480px) {
+  .listname-container h2 {
+    font-size: 18px;
+  }
+
+  .listname-container input {
+    font-size: 14px;
+  }
+}

src/Components/ListName/ListName.jsx

@@ -0,0 +1,54 @@
+import { useState } from "react";
+import "./ListName.css";
+
+export const ListName = () => {
+  // State to store the list name and date
+  const [listName, setListName] = useState("Weekly planner");
+  const [date, setDate] = useState("");
+
+  // Handler to update the list name
+  const handleListNameChange = (event) => {
+    setListName(event.target.value);
+  };
+
+  // Handler to update the date
+  const handleDateChange = (event) => {
+    setDate(event.target.value);
+  };
+
+  // Function to clear default text when input is clicked
+  const clearDefaultText = (stateSetter, defaultText) => {
+    if (stateSetter === listName) {
+      if (listName === defaultText) {
+        setListName("");
+      }
+    } else if (stateSetter === date) {
+      if (date === defaultText) {
+        setDate("");
+      }
+    }
+  };
+
+  return (
+    <div className="listname-container">
+      <h2>
+        List name:
+        <input
+          type="text"
+          value={listName}
+          onChange={handleListNameChange}
+          onClick={() => clearDefaultText(listName, "Weekly planner")}
+        />
+      </h2>
+      <h2>
+        Date:
+        <input
+          type="week"
+          value={date}
+          onChange={handleDateChange}
+          onClick={() => clearDefaultText(date, "")}
+        />
+      </h2>
+    </div>
+  );
+};

src/Components/Reminder/ReminderBlock.css

@@ -0,0 +1,101 @@
+.reminder-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.reminder-container h2 {
+  font-family: "Poltawski Nowy", sans-serif;
+  font-size: 25px;
+  color: #382e2c;
+  margin-top: -5px;
+}
+
+.add-reminder input[type="text"],
+.add-reminder input[type="datetime-local"] {
+  font-family: "Raleway", sans-serif;
+  font-size: 14px;
+  color: #695853;
+  padding: 6px 10px;
+  border: 1px solid #9a9086;
+  border-radius: 10px;
+  margin-bottom: 10px;
+  margin-right: 10px;
+}
+
+.add-reminder input:focus {
+  outline: 1px solid #695853;
+}
+
+.add-reminder input[type="text"]::placeholder {
+  color: #695853;
+}
+
+.add-reminder button {
+  padding: 8px 16px;
+  background-color: #9a9086;
+  font-family: "Raleway", sans-serif;
+  font-size: 14px;
+  color: #382e2c;
+  border: none;
+  border-radius: 20px;
+  cursor: pointer;
+}
+
+.add-reminder button:hover {
+  background-color: #382e2c;
+  color: #ffffff;
+}
+
+@keyframes jump {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.reminder-item {
+  animation: jump 0.5s ease-in-out infinite;
+}
+
+.reminder-item > div {
+  font-family: "Raleway", sans-serif;
+  font-size: 18px;
+  font-weight: bold;
+  color: #695853;
+  margin-top: 5px;
+  margin-left: -25px;
+}
+
+.reminder-item.overdue > div {
+  color: #ff0000;
+}
+
+/* Media Queries */
+@media (max-width: 480px) {
+  .reminder-container h2 {
+    font-size: 18px;
+  }
+
+  .add-reminder input[type="text"],
+  .add-reminder input[type="datetime-local"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 90%;
+  }
+
+  .add-reminder button {
+    align-items: center;
+  }
+
+  .reminder-item > div {
+    font-family: "Raleway", sans-serif;
+    font-size: 14px;
+  }
+}