Todos design#1
Conversation
| border-radius: 3em; | ||
| color: white; | ||
| padding: 15px 32px; |
There was a problem hiding this comment.
Do you know the difference between px, em, and rem?
There was a problem hiding this comment.
Don't know the exact difference between rem and em. just the fact that they're CSS relative unit. px isn't relative.
| import MainBackground from './images/oceanBackground.jpg'; | ||
| import TodoList from './TodoList'; | ||
|
|
||
| // const LOCAL_STORAGE_KEY = 'todoApp.todoList'; |
There was a problem hiding this comment.
Commented code shouldn't be uploaded to GitHub
|
|
||
| function handleAddTodo(event) { | ||
| const name = todoNameRef.current.value | ||
| if (name === '') return |
There was a problem hiding this comment.
Good job thinking about form validation. Is there a difference between writing if (name === '') and if (!name)? Which one do you think is better?
There was a problem hiding this comment.
Probably !name because it covers more "edge cases"
| const newTodos = [...todoList]; | ||
| const todo = newTodos.find(todo => todo.id === id); | ||
| todo.isCompleted = !todo.isCompleted; |
There was a problem hiding this comment.
Can you think of another solution where you only have to Iterate over the array only once?
There was a problem hiding this comment.
Maybe switching the data type from list to HashMap where the key represents the id and the value represents the task description
| const newTodos = todoList.filter(todo => !todo.isCompleted) | ||
| setTodos(newTodos) | ||
| } | ||
| console.log(todoList.length) |
There was a problem hiding this comment.
console.log() shouldn't be uploaded to GitHub
There was a problem hiding this comment.
Bar Shoshani made me do it. I'll remove it.
| <div > | ||
| <div className='main-container'> | ||
|
|
||
| {/* <img className='main-background-img' src={MainBackground} /> */} |
There was a problem hiding this comment.
Commented code shouldn't be uploaded to GitHub
| <div className='body' style={{ backgroundImage: `url(${MainBackground})` }}> | ||
| <div > | ||
| <div className='main-container'> | ||
|
|
||
| {/* <img className='main-background-img' src={MainBackground} /> */} | ||
| <input className='task-input-textbox' ref={todoNameRef} type='text' placeholder='Please Write your task here' /> | ||
| <button className='add-task-btn' onClick={handleAddTodo}>Add Task</button> | ||
| <button className='completed-task-btn' onClick={handleClearTodos}>Mark Task as completed</button> | ||
| <div className='tasks-left'>Tasks Left: {todoList.filter(todo => !todo.isCompleted).length}</div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className='tasks'> | ||
| <TodoList todosList={todoList} toggleTodo={toggleTodo} /> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
There is a lot of code here. Do you think it can be divided into different components?
There was a problem hiding this comment.
Yes, but I can't think of an idea how re organized it. I would appreciate an example.
| <input className='task-input-textbox' ref={todoNameRef} type='text' placeholder='Please Write your task here' /> | ||
| <button className='add-task-btn' onClick={handleAddTodo}>Add Task</button> | ||
| <button className='completed-task-btn' onClick={handleClearTodos}>Mark Task as completed</button> | ||
| <div className='tasks-left'>Tasks Left: {todoList.filter(todo => !todo.isCompleted).length}</div> |
There was a problem hiding this comment.
div is not the correct element to use in this case. What do you think would be a better option?
There was a problem hiding this comment.
Maybe using a specific component for the "tasks-left"?
2 participants
No description provided.