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

Todo app challenge from Frontend Mentor
https://github.com/guto1657/todo-app

application challenge classes-and-objects frontend frontend-mentor html-css-javascript javascript javascript-vanilla localstorage todo todo-app todo-list todoapp todolist

Last synced: 2 days ago
JSON representation

Todo app challenge from Frontend Mentor

• Host: GitHub
• URL: https://github.com/guto1657/todo-app
• Owner: guto1657
• Created: 2022-02-25T20:09:27.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2022-04-25T20:54:10.000Z (over 2 years ago)
• Last Synced: 2024-11-17T19:44:42.452Z (2 months ago)
• Topics: application, challenge, classes-and-objects, frontend, frontend-mentor, html-css-javascript, javascript, javascript-vanilla, localstorage, todo, todo-app, todo-list, todoapp, todolist
• Language: JavaScript
• Homepage: https://guto1657.github.io/Todo-app/
• Size: 421 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Todo app

This project is a solution to the [Todo app challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/todo-app-Su1_KokOW). Frontend Mentor challenges help you improve your coding skills by building realistic projects.

## screenshot

![todoapp](https://user-images.githubusercontent.com/70277574/155792264-06925327-ab19-43af-9b65-23630563fe4f.png)

## The challenge

Users should be able to:

- 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 ✅

- **Bonus**: Drag and drop to reorder items on the list ✅

- **Bonus**: Added localstorage functionality ✅

- **Bonus**: Option to edit the todos text on click ✅

## 🛠 Technologies

for the development of this project the following technologies where used:

- Visual Studio Code;

- HTML5;

- CSS3;

- JavaScript;

---