This is a solution to the Todo app challenge on Frontend Mentor. Frontend Mentor challenges help you improve coding skills by building realistic projects.
- Responsive design for optimal viewing on various screen sizes π±π»
- Interactive hover states for all elements π±οΈ
- Addition of new todos to the list β
- Marking todos as complete βοΈ
- Deletion of todos from the list β
- Filtering by all/active/complete todos ποΈ
- Clearing all completed todos π§Ή
- Toggle between light and dark mode ππ
- Bonus: Drag and drop to reorder items on the list π
- SCSS for enhanced styling π¨
- Firebase for seamless data management π₯
- Webpack for efficient bundling and optimization βοΈ
Dragula.js
for drag-and-drop functionality in managing todos π
In SCSS, I employed the following mixin and function to handle themes:
// Mixin for handling themes
@mixin themify($themes) {
@each $name, $values in $themes {
.#{$name}-theme {
$theme-map: $values !global;
@content;
}
}
}
// Function to get themed values
@function themed($key) {
@return map-get($theme-map, $key);
}
This SCSS code provides a flexible theming system, allowing easy adjustment of styles based on the selected theme.
From version 9 and higher, the Firebase JavaScript SDK is optimized to work with bundlers like Webpack. Firebase code is efficiently bundled with the application-specific code, reducing the final build size.
In public/index.html
, near the bottom of the body tag, the following code loads bundle.js
:
<script src="bundle.js"></script>
This placement ensures that everything else in index.html
becomes visible first, and then the potentially longer bundle.js
load process begins.
With this setup, the Firebase initialization code in index.js
becomes operational:
// Firebase initialization
import { initializeApp } from 'firebase/app';
// Your Firebase config object here
const firebaseConfig = {
// ...
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
Webpack serves as the modular bundler for Firebase integration. It optimizes the code, handles assets, and ensures a streamlined build process.
Enhance user experience with the power of drag-and-drop using Dragula.js. Dragula.js has been seamlessly integrated into the project to provide an intuitive and visually appealing way to organize todos.
The simplicity of Dragula.js enables smooth drag-and-drop interactions. Users can effortlessly grab a todo item, drag it to the desired position, and drop it with ease. Whether tasks need prioritization or todos require rearrangement, Dragula.js ensures a delightful and responsive experience.
import dragula from "dragula";
// Dragula.js is initialized on the todo-items container
const drake = dragula([document.querySelector(".todo-items")]);
Now, todo management is not only functional but also a pleasure, thanks to the elegant integration of Dragula.js.
The live demo is hosted on GitHub Pages. The gh-pages
branch is used for deployment, and the live site can be accessed here.
-
Figma - An indispensable tool for design, serving as the foundation for translating visual concepts into functional code. Figma's collaborative interface design platform facilitated a seamless integration between the design and development phases of the project. π¨
-
Firebase Documentation - A comprehensive and well-structured resource that played a pivotal role in mastering and implementing Firebase functionalities. The documentation not only provided clear instructions but also served as an educational guide for optimizing Firebase features in the project. π₯
-
Stack Overflow - A vibrant community where coding challenges turn into learning opportunities. Stack Overflow was an invaluable resource for troubleshooting, problem-solving, and gaining insights into best practices. The diverse range of questions and answers provided practical solutions to intricate coding issues. ππ»
Feel free to explore the code and provide feedback!