This is a solution to the Todo app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
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
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- SortableJS - Sortable is a JavaScript library for reorderable drag-and-drop lists.
<template id="task-template">
<li class="task">
<input class="task-input" type="checkbox" />
<label>
<span class="custom_checkbox"></span>
</label>
<span class="deleteBtn">
<img class="delete" src="./images/icon-cross.svg" alt="" />
</span>
</li>
</template>
.card {
background: var(--input-and-card);
padding: 0.5rem 0.5rem 1rem 0.5rem;
min-height: fit-content;
border-radius: 5px;
margin-top: 2rem;
box-shadow: -5px 0 20px 15px rgba(0, 0, 0, 0.2);
}
const taskElement = document.importNode(taskTemplate.content, true);
const checkbox = taskElement.querySelector('input');
checkbox.id = todo.id;
checkbox.checked = todo.completed;
const label = taskElement.querySelector('label');
label.htmlFor = todo.id;
label.append(todo.name);
const deleteBtn = taskElement.querySelector('img');
deleteBtn.id = todo.id;
listContainer.appendChild(taskElement);
- YouTube - This helped me to understand the template tag and how to use it
- Website - Anette
- Frontend Mentor - @RedSquirrrel