Skip to content
  • Learning paths
  • Challenges
  • Solutions
  • Articles
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 4 years ago

HTML Sass JavaScript Sortable.js Local Storage

Roc Tanweer•2,500
@RocTanweer
A solution to the Todo app challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Hello folks 😀

This past ten days with this challenge was the best..!. I learnt a loooot of stuffs, either by making a mistake or by the requirements. I tried to make this as good as possible within a week or two because you never get satisfied by the design and details...

Even now while submitting the solution, I am thinking of adding some more things like when the user redirect, there will be an animation of fade-in only when the theme is dark but I controlled myself because I wish to touch some other challenges too🤣

There is this feature called maybe PWA that I really wanted to do which lets the user to add the web app to mobile home screen but it was quite hard for me for now 😅

Questions

  1. How to reduce the delay while using the fluid typography(as you may have noticed)?
  2. How to smoothly displace elements while sorting?
  3. How can I make my JavaScript code cleaner?

Any other feedback is humbly welcome..! 😘

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe
    Posted about 4 years ago

    Greetings, Roc Tanweer! 👋

    I know I'm very late to this challenge! 😅 I just saw your comment requesting for feedback on my solution for this challenge today (I think you might have accidentally mentioned your username in the comment instead of mine, which is why I didn't get notified)! 🙃 But anyways, now that I've seen your solution, I can say I think you've done a wonderful job on this challenge! 😀

    The little animations that you added around your solution are very nice and the to-do list itself looks good and works well! 👍 Great attention to detail! 🙌

    The only very small suggestion I have is to give your document a title using the <title> tag. 😉

    And also, don't forget to take a look at your solution report and try to clear up some of the errors that are there. There seem to be a few duplicate IDs (that should be easy to remove) and for the rest of the errors, don't forget to prefix any custom attributes that you add to HTML elements with data- (if that's the reason for the completed attributes on some <div>s).

    As for the "delay" between when the page is resized and the fluid typography adjusts in font-size, you might want to remove the transition on the text on the page (since that isn't necessary) so that they respond to changes in the size of the viewport faster. 🙂

    Hope that helps. 😊

    And as always—keep coding (and happy coding, too)! 😁

  • Akash Sharma•170
    @aakash19090
    Posted about 4 years ago

    Hi, @RocTanweer!

    First of all brilliant work done with the subtle animations!😍

    I appreciate your creativity still I would suggest few tweaks from my side:

    1. the dashed border can be ignored on checkboxes and theme toggle button. Just an opinion!

    2. You can transition the header image in same duration same way as the dark theme color toggles so that all transitions stay uniform.

    Thanks it from my side. Overall well done!😀

  • Akash Sharma•170
    @aakash19090
    Posted about 4 years ago

    Hi, @RocTanweer!

    First of all brilliant work done with the subtle animations!😍

    I appreciate your creativity still I would suggest few tweaks from my side:

    1. the dashed border can be ignored on checkboxes and theme toggle button. Just an opinion!

    2. You can transition the header image in same duration same way as the dark theme color toggles so that all transitions stay uniform.

    Thats it from my side. Overall well done!😀

  • Bonrey•1,130
    @Bonrey
    Posted about 4 years ago

    Hello, Roc! 👋

    It's so sad to see such a beautiful solution without any feedback 😥. That's why I decided to leave some. I'm not proficient in JavaScript myself yet, so I don't know how to help you with your items displacement. However, I'd like to point out a few other things 😉

    • First of all, I'd set cursor: pointer for the remove-item button in your list.
    • Also, I'd forbid the text in the list item to go on the next line. Now, if you narrow your screen, you'll see that the existing text breaks into several lines, and the crossing line goes somewhere in between them, which isn't cool.
    • Finally, when added text is too long, the remove-item button goes to the bottom left corner. I think it's worth fixing, too.

    Other than that, your solution is super cool! 😍 I especially liked the transition between light and dark themes, and also that checkbox fadeIn/fadeOut. The latter is just amazing!

    I hope you keep on creating new projects! I'd definitely check out some more of yours! ✨

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Frontend Mentor for Teams

Frontend Mentor for Teams helps companies and schools onboard and train developers through project-based learning. Our industry-standard projects give developers hands-on experience tackling real coding problems, helping them master their craft.

If you work in a company or are a student in a coding school, feel free to share Frontend Mentor for Teams with your manager or instructor, as they may use it to help with your coding education.

Learn more

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub