https://github.com/mouhametnd/todo-app

This project is built with HTML, SCSS, Javascript, IndexedDB and localStorage
https://github.com/mouhametnd/todo-app

drag-and-drop html indexeddb javsascript localstorage scss

Last synced: about 1 month ago
JSON representation

This project is built with HTML, SCSS, Javascript, IndexedDB and localStorage

• Host: GitHub
• URL: https://github.com/mouhametnd/todo-app
• Owner: mouhametnd
• Created: 2022-05-05T14:50:50.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2022-05-17T10:19:15.000Z (about 4 years ago)
• Last Synced: 2025-05-17T18:36:51.257Z (about 1 year ago)
• Topics: drag-and-drop, html, indexeddb, javsascript, localstorage, scss
• Language: JavaScript
• Homepage: https://mouhametnd-todo.netlify.app/
• Size: 383 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Frontend Mentor - Todo app solution

 

## Welcome 🍃

This was a good project to put into practice my `DOM` manipulation skills by doing `CRUD` (create, read, update and delete) on elements,  manipulating `indexedDB` and manipulating Drag & Drop API.

## Links

- My Linkedin [Linkedin](https://www.linkedin.com/in/mouhametndiaye/)

- My email ahmetndiaye404@gmail.com

- Live Project [Todo App](https://mouhametnd-todo.netlify.app/)

- Challenged by [Frontend Mentor](https://www.frontendmentor.io/home)

indexed Db **loc**

## Challenge  

Your users should be able to:

- Add, delete, update And remove tasks

- View the optimal layout for the app depending on their device's screen size

- See hover states for all interactive elements on the page

- Add new todos to the list

- Mark todos as complete

- Delete todos from the list

- Filter by all/active/complete todos

- Clear all completed todos

- Toggle light and dark mode

- Drag and drop to reorder items on the list

- Get the tasks back when the page is reloaded

## Design of the App

![Design preview for the Todo App page coding challenge](./assets/design/desktop-preview.jpg)

## Built with

- Mobile-first workflow

- Semantic HTML5 markup

- SASS

- Vanilla JavaScript, IndexedDB and localStorage.

  

## What I learned

- JavaScript modules

- Manipulate IndexedDB and localStorage

- Changing CSS custom properties with JS

- Drag & Drop on elements