Maryyy_ux_Tasks for teenagers #40
Conversation
Updated Readme with the Netlify link and the instructions for the app.
There was a problem hiding this comment.
Hi María and congratulations on completing your first project using Zustand! Your store is well-structured and I particularly like that you've included localStorage. Your idea is also very fun 😄
However, your code is a bit messy and I made some comments that will hopefully help you clean this up. I'll specify a bit more below:
Changes Requested
- Clean up folder structure
- Remove duplicate files and unused files
- Move files to folders they belong, e.g. don't have json and JS files in the components folder (only components should go there)
- Clean up code
- Don't mix arrow functions with the function keyword approach
- Don't put CSS inline in JSX
- Utilise Zustand instead of passing props
PS. On another note, I see you're still uploading your files instead of committing from the terminal. Have you actively chosen this or are you still unsure of how to do it after the session we had a couple of weeks back? Working with git from the terminal is really the developer way, and I'm sure you can do it if you want to 💪
| 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. |
There was a problem hiding this comment.
Love this idea, so fun! 😄
| }; | ||
| // App.jsx | ||
|
|
||
| import React, { useState, useEffect } from "react"; |
There was a problem hiding this comment.
No need to import React
|
|
||
|
|
||
|
|
||
| function App() { |
There was a problem hiding this comment.
Don't mix the function keyword approach with arrow functions. Just pick one
| style={{ | ||
| background: darkMode | ||
| ? ` | ||
| linear-gradient( | ||
| rgba(0, 0, 0, 0.6), | ||
| rgba(0, 0, 0, 0.6) | ||
| ), | ||
| url('/Background.jpg')` | ||
| : `url('/Background.jpg')`, // Imagen normal en light mode | ||
| backgroundSize: "cover", | ||
| backgroundPosition: "center", | ||
| backgroundRepeat: "no-repeat", | ||
| minHeight: "100vh", | ||
| padding: "20px", | ||
| color: darkMode ? "#fff" : "#000", // Cambiar color del texto | ||
| }} |
There was a problem hiding this comment.
Try finding a way to keep the CSS to the CSS file since that's where you have the rest of your styling. Also, consider adding a shadow/blur of some sort because the text is hard to read.
There was a problem hiding this comment.
PS. On another note, I see you're still uploading your files instead of committing from the terminal. Have you actively chosen this or are you still unsure of how to do it after the session we had a couple of weeks back? Working with git from the terminal is really the developer way, and I'm sure you can do it if you want to. I Know how to do it but I prefer, if its possible, to work on local and upload the final version. This is because of my lack of time, I work mainly by nights and, sometimes, I am so tired that I prefer to save it on my local rather than to forget it and, do not save it and lost it (I have had this problem in the past). Hope this will be allowed, if its possible.
There was a problem hiding this comment.
Your app doesn't look so good on large devices, have a look at e.g. 1600px width and see if you can improve it.
There was a problem hiding this comment.
What is this file here for?
There was a problem hiding this comment.
Sorry, forgot to remove it. This is my second attempt, the first one was about an interactive recipe book but didnt like the layout, this was the API component.
|
|
||
| return ( | ||
| <form onSubmit={handleSubmit} style={{ marginBottom: "20px" }}> | ||
| <input |
| value={taskText} | ||
| onChange={(e) => setTaskText(e.target.value)} | ||
| placeholder="Enter a task" | ||
| style={{ marginRight: "10px" }} |
There was a problem hiding this comment.
Styling in the CSS file please
|
|
||
| <h1 className="title">Tasks for Teenagers</h1> | ||
| <TaskForm /> | ||
| <TaskList tasks={tasks} /> |
There was a problem hiding this comment.
No need to pass props when we have Zustand as a global state management tool
Netlify link
Add your Netlify link here: https://tasks-for-teenagers-app.netlify.app/
App for daily tasks as to-do's for teenagers. The parents enters the home tasks (i.e. Tiddy your room, make breackfast for your little siblings, etc) as pending state. When the task is approved by the parents, they click the checkbox and the teenagers gets a reward for each task correctly done (one extra hour on friends meetings, Select the pizza, etc). Is its not correctly done, just unclick and its pending again.