Maryyy_ux_Tasks for teenagers

.gitignore

@@ -1,18 +1,18 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-node_modules
-
-# production
-build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# production
+build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -1,37 +1,23 @@
-<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.
-
-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
-```
-
-### 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.
-
-## Instructions
-
-<a href="instructions.md">
-   See instructions of this project
-  </a>
+
+# Todo - useContext Project
+
+Week 15th project. build a "to-do" app, with Global State Management and particularly, Zustand (external state management library). 
+
+The app is intended to be a helpful tool for parents with teenagers. 
+The parents enters the home tasks (i.e. Tiddy your room, Walk the dog, Empty the dishwasher, etc) that tenagers "loves so much to do". And a list of pending tasks is shown on the teenagers cell. When each task is completed, just click on the check box under the parents approval. If its not done or not correctly done, unclick and the task is shown as pending again. 
+
+When the task is approved (one or all of them)  by click on the checkbox, the teenager will get a reward for each task satisfactorily achieved. 
+
+This total credits will be exchanged for extra benefits (previously agreed like: 1 reward = 1 hour video games; 2 rewards = 1 extra hour on friends meeting; 3 rewards = 10 $ extra to your week pocket money, etc. 
+
+
+
+### View it live
+
+https://tasks-for-teenagers-app.netlify.app/
+
+## Instructions
+
+<a href="instructions.md">
+   See instructions of this project
+  </a>

eslint.config.js

@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]

index.html

@@ -1,12 +1,12 @@
-<!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>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</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>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

instructions.md

@@ -1,43 +1,43 @@
-# Instructions
-In this week's project, it's time to flex your muscles and build a to-do app that uses Zustand for Global State management.
-
-## Getting started 🤓
-In your to-do app, you should be able to add tasks, list tasks, and toggle whether a task is done or not. You're free to style your to-do app however you'd like but try to keep it simple and clean — remember, prospective employers will probably be interested in seeing this project!
-
-
-### Hints and tips to complete the project
-As always, start by sketching out how your app will look and what components you'll need. Break down the UI into smaller components. Once you have your sketch, think about how the data in your store should look. What data does a task contain? Sketch it out and get it clear in your head. You'll need React for building components.
-
-When writing your code, try working on the project in small chunks rather than taking on too much at once. For example, you could start by making a new store for your tasks and use a hardcoded list of tasks to get up and running with.
-
-Once you have your to-dos listed, a good next step is to implement some form of `addTask` function and a form to add a new task to the array of hardcoded tasks.
-
-Another challenge is giving your checkboxes a custom look. Feel free to check out [this video about custom checkboxes](https://www.youtube.com/watch?v=NfW_5Y1RZQ4) and [this video about custom radio buttons](https://www.youtube.com/watch?v=BT7FZooiqWw) to boost your knowledge!
-
-## Requirements
-- Your app should list all tasks - completed or uncompleted.
-- You should be able to mark an uncompleted task as complete (and change it back to uncompleted).
-- You should be able to add and remove tasks.
-- Your app should show a count of the tasks. Either all tasks or all uncompleted tasks (or both).
-- Make your app responsive (it should look good on devices from 320px width up to 1600px)
-- Your project should be following accessibility guidelines to ensure your website is usable by a diverse range of users:
-  - You should have a score of at least 95 in Lighthouse
-  - All images should have alt attributes and proper sizes
-  - All contrasts should be OK
-- Follow the guidelines on how to write clean code
-
-## Stretch Goals
-
-### Intermediate Stretch Goals
-
-- Add a timestamp for each task indicating when it was created. The timestamp should be displayed as a formatted date but stored as a raw date. You can use a third-party library, such as date-fns or Moment.js for this.
-- Add a **complete all** button to set all tasks as completed. You could also use this opportunity to make your app look nice when there's no data. See [empty states UX design](https://www.toptal.com/designers/ux/empty-state-ux-design) for some ideas.
-- Add a button to switch dark/light mode.
-- Implement local storage
-
-### Advanced Stretch Goals
-
-- Add a date input to your new task form to set a due date on a task. It could be required, or optional - it's up to you. You could then display this in the list and style it differently when a task is overdue.
-- Add filters to display completed/uncompleted tasks, tasks created after a given date or anything else you consider important.
-- Create categories/tags for tasks so they can be grouped - for example, 'Housework', 'Shopping', etc.
-- Create projects for tasks → A project could be a group of tasks which all need to be completed and when they are completed, the project is marked as complete.
+# Instructions
+In this week's project, it's time to flex your muscles and build a to-do app that uses Zustand for Global State management.
+
+## Getting started 🤓
+In your to-do app, you should be able to add tasks, list tasks, and toggle whether a task is done or not. You're free to style your to-do app however you'd like but try to keep it simple and clean — remember, prospective employers will probably be interested in seeing this project!
+
+
+### Hints and tips to complete the project
+As always, start by sketching out how your app will look and what components you'll need. Break down the UI into smaller components. Once you have your sketch, think about how the data in your store should look. What data does a task contain? Sketch it out and get it clear in your head. You'll need React for building components.
+
+When writing your code, try working on the project in small chunks rather than taking on too much at once. For example, you could start by making a new store for your tasks and use a hardcoded list of tasks to get up and running with.
+
+Once you have your to-dos listed, a good next step is to implement some form of `addTask` function and a form to add a new task to the array of hardcoded tasks.
+
+Another challenge is giving your checkboxes a custom look. Feel free to check out [this video about custom checkboxes](https://www.youtube.com/watch?v=NfW_5Y1RZQ4) and [this video about custom radio buttons](https://www.youtube.com/watch?v=BT7FZooiqWw) to boost your knowledge!
+
+## Requirements
+- Your app should list all tasks - completed or uncompleted.
+- You should be able to mark an uncompleted task as complete (and change it back to uncompleted).
+- You should be able to add and remove tasks.
+- Your app should show a count of the tasks. Either all tasks or all uncompleted tasks (or both).
+- Make your app responsive (it should look good on devices from 320px width up to 1600px)
+- Your project should be following accessibility guidelines to ensure your website is usable by a diverse range of users:
+  - You should have a score of at least 95 in Lighthouse
+  - All images should have alt attributes and proper sizes
+  - All contrasts should be OK
+- Follow the guidelines on how to write clean code
+
+## Stretch Goals
+
+### Intermediate Stretch Goals
+
+- Add a timestamp for each task indicating when it was created. The timestamp should be displayed as a formatted date but stored as a raw date. You can use a third-party library, such as date-fns or Moment.js for this.
+- Add a **complete all** button to set all tasks as completed. You could also use this opportunity to make your app look nice when there's no data. See [empty states UX design](https://www.toptal.com/designers/ux/empty-state-ux-design) for some ideas.
+- Add a button to switch dark/light mode.
+- Implement local storage
+
+### Advanced Stretch Goals
+
+- Add a date input to your new task form to set a due date on a task. It could be required, or optional - it's up to you. You could then display this in the list and style it differently when a task is overdue.
+- Add filters to display completed/uncompleted tasks, tasks created after a given date or anything else you consider important.
+- Create categories/tags for tasks so they can be grouped - for example, 'Housework', 'Shopping', etc.
+- Create projects for tasks → A project could be a group of tasks which all need to be completed and when they are completed, the project is marked as complete.