Conversation
AnnikaSonnek
left a comment
There was a problem hiding this comment.
This project was easy to follow, there were some places where it would have been nice with some comments. Cool that you've used Tailwind, you have to tell be what you thought of it!
Well done!!
| import 'bootstrap-icons/font/bootstrap-icons.css'; | ||
| import Header from 'components/Header'; | ||
|
|
||
| export const App = () => { |
There was a problem hiding this comment.
I see that all of your components are jsx-files. How come? I've never seen it before!
| dispatch(Tasks.actions.deleteAllTasks()); | ||
| } | ||
| return ( | ||
| <section className="w-full mb-10"> |
There was a problem hiding this comment.
I see that you've used Tailwind, what did you think about it? The classnames looks craaaaazy hahah!
| }, | ||
| { | ||
| id: 3, | ||
| text: 'Never come back', |
| const id = action.payload; | ||
| // splice to remove a single element if I know the index | ||
| const copyOfTaskArrayFromStore = store.items; | ||
| const condition = (element) => element.id === id; |
There was a problem hiding this comment.
That's a nice way of keeping the code clean! To actually define the condition separately and then use it in the findIndex-method below! Even though it might be longer, it's easier to follow! Cool!
| const copyOfTaskArrayFromStore = store.items; | ||
| const condition = (element) => element.id === id; | ||
| const foundIndex = copyOfTaskArrayFromStore.findIndex(condition); | ||
| copyOfTaskArrayFromStore[foundIndex].isComplete = !copyOfTaskArrayFromStore[foundIndex].isComplete; |
There was a problem hiding this comment.
That's cool! So you've added the foundIndex-function inside the toggle. I've seen people do this but never fully understood it. So the [foundIndex] in copyOfTaskArrayFromStore[foundIndex].isComplete references the variable above, and is used as the index since it's between square brackets right? I did it like this:
toggleTask: (store, action) => { store.items.forEach((item) => { if (item.id === action.payload.taskId) { item.isDone = !item.isDone } }) }
| const day = date.getDate(); | ||
| const month = date.getMonth() + 1; | ||
| const year = date.getFullYear(); | ||
| const currentDate = `${day}/${month}/${year}`; |
There was a problem hiding this comment.
It's a little long code snippet that could probably be made shorter, but honestly I understand everything of what is happening here so I like it!
| type="text" | ||
| name="todo" | ||
| className="block w-full border-0 p-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6 bg-transparent" | ||
| placeholder="Get some sun" /> |
| @@ -0,0 +1,28 @@ | |||
| /** @type {import('tailwindcss').Config} */ | |||
| module.exports = { | |||
There was a problem hiding this comment.
Hahah I have NO idea of what is happening here! Is tailwind the reason why you changed the files to jsx-files?
| event.preventDefault(); | ||
| const newTask = { | ||
| id: Date.now().toString(), | ||
| text: capitalize(inputValue), |
There was a problem hiding this comment.
Is this a reference to some css-style? It looks so short but still does the work of making the first letter in the added task be big. My code looks like this:
text: inputValue.charAt(0).toUpperCase() + inputValue.slice(1)
So much longer...
No description provided.