Submitted over 2 years ago

TODO App using : React, localStorage API

Gassai Hamza• 290

@GHamza-Dev

Preview site View code

This is a solution for...

Todo app

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi, this is my first project using React, Your feedback will help me a lot especially on what concern :

folder structure
Best practice
Code optimization

Community feedback

Yash Sharma• 90

@Yashs05

Posted over 2 years ago

You can use react-beautiful-dnd library to make drag and drop happen if you are having trouble doing in using vanilla JavaScript.

Gassai Hamza• 290

@GHamza-Dev

Posted over 2 years ago

@Yashs05 Yep thanks, I Really appreciate your suggestion.

Rizky Khairullah• 155

@Rzkykhrllh

Posted over 2 years ago

Great work~ I have an advice for the background picture

You can put your bg image using tag img inside a div. The div contain background no repeat, background contain, position relative. Meanwhile your img class have object-fit cover, display:absolute, and z-index zero : 0.

I also have a question for you, what kind of package do you use for the animation ? i'm thinking to implemented in my submission.

Thanks

Gassai Hamza• 290

@GHamza-Dev

Posted over 2 years ago

@Rzkykhrllh

Thanks your advice will be taken into consideration!!!
For the animation, I have not used any package it's just CSS

.todo_item{
    animation: animateItems .5s cubic-bezier(0.42, 0, 0.04, 1.24) forwards;
}

@keyframes animateItems {
    from{opacity: 0;transform:  scale(0.5);}
    to{opacity: 1;transform:  scale(1);}
}

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord