Here we didn't have a single challenge, but a set of little ones. So, going one by one:
1. Set the project icon as the two letters of the name
Great! The project icon is taking the first two letters of the name.
|
<p style="background-color: #ca8134; padding: 10px; border-radius: 8px; aspect-ratio: 1; text-transform: uppercase;">${this.name.split(" ").map((n) => n[0]).join("")}</p> |
I have noticed you worked in the case where the name has two words. Just one thing: you have used String.split to have an array with the words in the project name. While that is ok in most cases, there are situations in which won't work; for example, if the user includes two spaces between the words (it happens more than we want). In such case, would be better to use regex to split the name taking into consideration it can have more than one single space. Also, for situations where there is a space at the start/end of the word, it will be nice to use String.trim to get rid of them before processing the name further.
Lastly, it won't be a bad idea if you take the first two letters of the name if it's just one word.
2. Set a random color to the icon background
Is it me or this one is missing? Is not complicated though! A simple array with some fixed HEX colors and a function to get a random one from there will be more than enough to set the background-color of the icon.
3. Don’t create the project if the name is less than 5 characters long
Great! Easily implemented. I see you created a method in the ProjectsManager:
|
checkNameLength(data: IProject) { |
It's worth mention you can throw the error inside the Project class constructor... and it would be a safer approach. The reason? Because if you happen to be in a situation where you don't use the ProjectsManager to create the project but you instead create the project manually (like new Project()) then the error will never be thrown. I know one of the main points of the ProjectsManager is to create projects so throwing the error from there is completely fine and expected, but throwing the error inside the Projects class would be safer in all situations.
4. Give the project a default date if the user don’t specify one
It works! I get a default date when I do not specify any. Another really easy way to approach this is by just setting a default value in the corresponding property of the Project class:
5. Make a form to update the project information from the details page
Great! The modal is visible with the corresponding form when I try to edit the information of an existing project. If I accept the form, it gets updated. The only thing I would suggest you do is include the current values in the form. It improves the UX a lot! For example, if right now you edit the project information just to change the description, an error will be thrown because the name is empty and doesn't pass the "more than 5 characters validation".
6. Let the user create ToDos and store the data in the project
Great! I can create ToDos in the project with the minimum details I would expect.
7. Make sure ToDos are exported along the project
Yep, working! I get my ToDos in the JSON data downloaded.
8. Update the project information from JSON if the project already existed
Great! The project information is being updated if I modify the JSON file and upload it back again. The decision of creating an ID for the project really makes this easier (and safer).
In the other hand, it would be really great if you also update the ToDos when the project data is uploaded :)
9. Allow to specify a status for each ToDo. Change the background color based on the state.
Well, this works perfectly fine for the challenge 😅 However (despite I know I didn't request this) I was imaging the users to have the chance to click on a ToDo card to edit its information and once edited the UI to update accordingly. Also, should be possible to create multiple ToDos. No worries! You can update these things if you want, although they are not needed for the challenge. Remember this is a single app we keep working during the whole master, so feel free to keep updating it however you like! 💪
Just as a general suggestion here, you can avoid showing the project ID in the card it-self. Maybe you just did it for demonstration/debugging purposes?
Great work Mathieu! Really amazing. Keep going with the other challenges 🚀
Here we didn't have a single challenge, but a set of little ones. So, going one by one:
1. Set the project icon as the two letters of the name
Great! The project icon is taking the first two letters of the name.
that-open-master/src/class/Project.ts
Line 52 in f48bd41
I have noticed you worked in the case where the name has two words. Just one thing: you have used
String.splitto have an array with the words in the project name. While that is ok in most cases, there are situations in which won't work; for example, if the user includes two spaces between the words (it happens more than we want). In such case, would be better to use regex to split the name taking into consideration it can have more than one single space. Also, for situations where there is a space at the start/end of the word, it will be nice to use String.trim to get rid of them before processing the name further.Lastly, it won't be a bad idea if you take the first two letters of the name if it's just one word.
2. Set a random color to the icon background
Is it me or this one is missing? Is not complicated though! A simple array with some fixed HEX colors and a function to get a random one from there will be more than enough to set the
background-colorof the icon.3. Don’t create the project if the name is less than 5 characters long
Great! Easily implemented. I see you created a method in the ProjectsManager:
that-open-master/src/class/ProjectManager.ts
Line 198 in f48bd41
It's worth mention you can throw the error inside the Project class constructor... and it would be a safer approach. The reason? Because if you happen to be in a situation where you don't use the ProjectsManager to create the project but you instead create the project manually (like new Project()) then the error will never be thrown. I know one of the main points of the ProjectsManager is to create projects so throwing the error from there is completely fine and expected, but throwing the error inside the Projects class would be safer in all situations.
4. Give the project a default date if the user don’t specify one
It works! I get a default date when I do not specify any. Another really easy way to approach this is by just setting a default value in the corresponding property of the Project class:
that-open-master/src/class/Project.ts
Line 23 in f48bd41
5. Make a form to update the project information from the details page
Great! The modal is visible with the corresponding form when I try to edit the information of an existing project. If I accept the form, it gets updated. The only thing I would suggest you do is include the current values in the form. It improves the UX a lot! For example, if right now you edit the project information just to change the description, an error will be thrown because the name is empty and doesn't pass the "more than 5 characters validation".
6. Let the user create ToDos and store the data in the project
Great! I can create ToDos in the project with the minimum details I would expect.
7. Make sure ToDos are exported along the project
Yep, working! I get my ToDos in the JSON data downloaded.
8. Update the project information from JSON if the project already existed
Great! The project information is being updated if I modify the JSON file and upload it back again. The decision of creating an ID for the project really makes this easier (and safer).
that-open-master/src/class/Project.ts
Line 30 in f48bd41
In the other hand, it would be really great if you also update the ToDos when the project data is uploaded :)
9. Allow to specify a status for each ToDo. Change the background color based on the state.
Well, this works perfectly fine for the challenge 😅 However (despite I know I didn't request this) I was imaging the users to have the chance to click on a ToDo card to edit its information and once edited the UI to update accordingly. Also, should be possible to create multiple ToDos. No worries! You can update these things if you want, although they are not needed for the challenge. Remember this is a single app we keep working during the whole master, so feel free to keep updating it however you like! 💪
Just as a general suggestion here, you can avoid showing the project ID in the card it-self. Maybe you just did it for demonstration/debugging purposes?
Great work Mathieu! Really amazing. Keep going with the other challenges 🚀