to-do Giorgio #449
to-do Giorgio #449
Conversation
| 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.