Not Found
Connection pool for prod0-shard-00-01-7memi.mongodb.net:27017 was cleared because another operation failed with: "connection <monitor> to 3.211.157.215:27017 timed out"
Connection pool for prod0-shard-00-00-7memi.mongodb.net:27017 was cleared because another operation failed with: "connection <monitor> to 54.90.63.22:27017 timed out"
Connection pool for prod0-shard-00-00-7memi.mongodb.net:27017 was cleared because another operation failed with: "connection <monitor> to 54.90.63.22:27017 timed out"
Connection pool for prod0-shard-00-00-7memi.mongodb.net:27017 was cleared because another operation failed with: "connection <monitor> to 54.90.63.22:27017 timed out"
Connection pool for prod0-shard-00-00-7memi.mongodb.net:27017 was cleared because another operation failed with: "connection <monitor> to 54.90.63.22:27017 timed out"
Connection pool for prod0-shard-00-00-7memi.mongodb.net:27017 was cleared because another operation failed with: "connection <monitor> to 54.90.63.22:27017 timed out"
Connection pool for prod0-shard-00-00-7memi.mongodb.net:27017 was cleared because another operation failed with: "connection <monitor> to 54.90.63.22:27017 timed out"
Connection pool for prod0-shard-00-00-7memi.mongodb.net:27017 was cleared because another operation failed with: "connection <monitor> to 54.90.63.22:27017 timed out"
Connection pool for prod0-shard-00-00-7memi.mongodb.net:27017 was cleared because another operation failed with: "connection <monitor> to 54.90.63.22:27017 timed out"
Connection pool for prod0-shard-00-00-7memi.mongodb.net:27017 was cleared because another operation failed with: "connection <monitor> to 54.90.63.22:27017 timed out"
Connection pool for prod0-shard-00-00-7memi.mongodb.net:27017 was cleared because another operation failed with: "connection <monitor> to 54.90.63.22:27017 timed out"
Connection pool for prod0-shard-00-00-7memi.mongodb.net:27017 was cleared because another operation failed with: "connection <monitor> to 54.90.63.22:27017 timed out"
Connection pool for prod0-shard-00-00-7memi.mongodb.net:27017 was cleared because another operation failed with: "connection <monitor> to 54.90.63.22:27017 timed out"
Connection pool for prod0-shard-00-00-7memi.mongodb.net:27017 was cleared because another operation failed with: "connection <monitor> to 54.90.63.22:27017 timed out"
Connection pool for prod0-shard-00-00-7memi.mongodb.net:27017 was cleared because another operation failed with: "connection <monitor> to 54.90.63.22:27017 timed out"
Connection pool for prod0-shard-00-00-7memi.mongodb.net:27017 was cleared because another operation failed with: "connection <monitor> to 54.90.63.22:27017 timed out"
Connection pool for prod0-shard-00-00-7memi.mongodb.net:27017 was cleared because another operation failed with: "connection <monitor> to 54.90.63.22:27017 timed out"
Connection pool for prod0-shard-00-00-7memi.mongodb.net:27017 was cleared because another operation failed with: "connection <monitor> to 54.90.63.22:27017 timed out"
Connection pool for prod0-shard-00-01-7memi.mongodb.net:27017 was cleared because another operation failed with: "connection <monitor> to 3.211.157.215:27017 timed out"
Log in with GitHub

Submitted

A todo web-app

#accessibility#progressive-enhancement#pwa#typescript#sass/scss
Ayobami Ikuewumi• 850

@Ikuewumi

Preview siteView code
Desktop design screenshot for the Todo app coding challenge

This is a solution for...

Todo app
  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi y'all 👋. This is my solution to the todo app challenge complete with dark mode and drag and drop functionality. Also this feels like something that should work offline, so I made it a PWA, with the app data kept in local storage.

The best part of this project for me is that I got to test out a new part of JavaScript I've been learning - "The Proxy Object" which I used to create a crude reactivity system and couple the app state to the UI

The part I found just a tad tricky was the drag-n-drop, but I later figured the answer was just to switch the order of the todos. I also focused a tad more on accessibility.

Technologies used:

  • Typescript
  • sass
  • vite

Anyhow, please if you can, take some time to check it out and as always, feel free to comment on anything in the code.

Happy coding, Ayobami

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

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