https://github.com/ayokanmi-adejola/to-do-app
A responsive Todo app built with vanilla JavaScript, HTML, and CSS that features theme switching, CRUD operations for tasks, filtering, drag-and-drop reordering, and local storage persistence.
https://github.com/ayokanmi-adejola/to-do-app
css3 drag-and-drop-api htlm5 localstorage mobile-first-workflow vanilla-js
Last synced: 8 months ago
JSON representation
A responsive Todo app built with vanilla JavaScript, HTML, and CSS that features theme switching, CRUD operations for tasks, filtering, drag-and-drop reordering, and local storage persistence.
- Host: GitHub
- URL: https://github.com/ayokanmi-adejola/to-do-app
- Owner: Ayokanmi-Adejola
- Created: 2025-05-12T12:28:04.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-20T09:30:20.000Z (12 months ago)
- Last Synced: 2025-09-30T00:00:42.541Z (9 months ago)
- Topics: css3, drag-and-drop-api, htlm5, localstorage, mobile-first-workflow, vanilla-js
- Language: JavaScript
- Homepage: https://to-do-app-beta-ivory.vercel.app
- Size: 409 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Todo app solution
This 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.
## Overview
### 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
### Screenshot
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Vanilla JavaScript
- Local Storage for data persistence
- Mobile-first responsive design
- Drag and drop API
### What I learned
This project was a great opportunity to practice building a fully functional application with vanilla JavaScript. Some key learnings include:
- Implementing a theme toggle (light/dark mode) with CSS variables and JavaScript
- Using localStorage to persist user data
- Creating a drag and drop interface for reordering items
- Building a responsive design that works well on both mobile and desktop
- Managing application state and rendering based on filters
Here's a code snippet showing how the theme toggle functionality was implemented:
```js
// Theme toggle
themeToggle.addEventListener('click', () => {
document.body.classList.toggle('dark-theme');
const isDarkTheme = document.body.classList.contains('dark-theme');
themeIcon.src = isDarkTheme ? './images/icon-sun.svg' : './images/icon-moon.svg';
localStorage.setItem('darkTheme', isDarkTheme);
});
```
The CSS variables made it easy to switch between themes:
```css
:root {
/* Light Theme */
--very-light-gray: hsl(0, 0%, 98%);
--very-light-grayish-blue: hsl(236, 33%, 92%);
/* ... other light theme variables ... */
/* Dark Theme */
--very-dark-blue: hsl(235, 21%, 11%);
--very-dark-desaturated-blue: hsl(235, 24%, 19%);
/* ... other dark theme variables ... */
}
body.dark-theme {
background-color: var(--very-dark-blue);
background-image: url('./images/bg-desktop-dark.jpg');
}
```
### Continued development
In future projects, I'd like to focus on:
- Improving accessibility features
- Adding animations for a more polished user experience
- Implementing more advanced drag and drop functionality
- Exploring frameworks like React for state management in larger applications
### Useful resources
- [MDN Web Docs](https://developer.mozilla.org) - Comprehensive documentation for HTML, CSS, and JavaScript.
- [CSS-Tricks](https://css-tricks.com) - Great resource for CSS techniques and flexbox guides.
- [JavaScript.info](https://javascript.info) - Detailed explanations of JavaScript concepts.
## Author
- Frontend Mentor - [@Ayokanmi-Adejola](https://www.frontendmentor.io/profile/Ayokanmi-Adejola)
## Acknowledgments
Thanks to Frontend Mentor for providing this challenge and to the community for their support and feedback.