All solutions

I read some articles saying that we should try to make our React components as independent as possible. For example, if we want to create a List component to list our todos, we should not implement the logic about manipulating todos inside this component. Doing so will make our List component non-reusable.

To make the List component more reusable, we can implement the logic about manipulating todos in its parent component, and pass the todos data to it. All the List component should do is to list the data which are passed by its parent component. As a result, if we want the List component to list the other data, we can just pass the data to it.

I totally agree with this design pattern, so I built this project to practice this pattern.

I think the most difficult part of this project is how to restart the animation with react. At the beginning, I tried to just use styled-components to style elements. However, I found that it is difficult to make the element restart its animation whenever it render. To solve this problem, I create a css file such that I can restart the animation by changing the class. Another problem is that it looks terrible on real phone, but it looks good on dev tool. I don't know why.

Hi everyone, this is my first project in Frontend Mentor. This project looks well in small size screen when using dev tool. However, when I used smartphone to open the website, it looks a little bit weird. I don't know why this happen. Could someone point out where is the problem to me? Thanks.