ToDoList - Etna and Linda - Week 10 #11
Conversation
There was a problem hiding this comment.
Great job! We really enjoyed reviewing your beautiful piece and your code looks super neat and easy to understand. We can see that you did put a lot of time on the design and it looks really fun :) Moreover, you implement the scss into the project which makes it much better and clearer. You should be proud of your great work 🥳🥳🥳
//Izabel & Wen
| const [darkMode, setDarkMode] = useState(false); | ||
|
|
||
| // Setting the Theme | ||
| const changeMode = () => { |
There was a problem hiding this comment.
Maybe it could be simplified to one-line code like this: setDarkMode(!darkMode)?
//Izabel & Wen
| let uncompletedTasks = []; | ||
|
|
||
| if (toDoList.length === 0) { | ||
| console.log("No tasks in the list."); |
There was a problem hiding this comment.
Would be better to replace the console.log with some empty state handling e.g. picture or words shown on the screen.
//Izabel & Wen
| return ( | ||
| <> | ||
| <div | ||
| className={`heading-background ${ |
There was a problem hiding this comment.
Well done! You master the conditional operations really well!
//Izabel & Wen
| onChange={(event) => setTaskInput(event.target.value)} | ||
| /> | ||
|
|
||
| <button |
There was a problem hiding this comment.
It'd be good if the user could press Enter key to add a task as well.
//Izabel & Wen
| @@ -0,0 +1,35 @@ | |||
| import { GiBurningDot } from "react-icons/gi"; | |||
There was a problem hiding this comment.
nice implementation of react icons!
//Izabel & Wen
| const addTask = (task) => { | ||
| const newTask = { | ||
| // Setting the id as the date so it stays unique also if we remove and add new tasks randomly | ||
| id: Date.now(), |
There was a problem hiding this comment.
Wise choice of using id! It makes the logic clear and easy to follow.
//Izabel & Wen
| background-repeat: no-repeat; | ||
| } | ||
|
|
||
| // Root Colors for the different Themes |
There was a problem hiding this comment.
Really cool variables! Super neat!
//Izabel & Wen
| @import "../index.scss"; | ||
|
|
||
| // Main Styling of the heading | ||
| .heading-background { |
There was a problem hiding this comment.
It's really cool that you implemented scss without any instructions. Great initiative!
//Izabel & Wen
| } | ||
|
|
||
| // Responsive Styling | ||
| @media (min-width: 460px) { |
There was a problem hiding this comment.
We are wondering why you chose 460px and 820px as the breakpoints. Could you kindly explain it?
//Izabel & Wen
There was a problem hiding this comment.
Hello Etna and Linda, well done this week with the Todo App! Your app works well and looks nice as well, it's built meeting the requirements and following accessibility and responsiveness. Good use of updating global state with React Context, great you used also moment.js and added a state for the theme! You code is tidy and well structured, I can see you had fun and it made very enjoyable using the app itself! ❤️ Keep up the awesome work ⭐
Netlify link
https://linda-etna-project-todos.netlify.app/
Collaborators
[Caracal23, linda-f]