Frontend Mentor - Todo app solution

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.

The solution is available in Todo app with Alpine Js

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• Add new todos to the list
• Mark todos as complete
• Delete todos from the list
• Toggle light and dark mode

To be completed:

• See hover states for all interactive elements on the page
• Filter by all/active/complete todos
• Clear all completed todos
• Bonus: Drag and drop to reorder items on the list

Screenshot

Links

• Solution URL: Todo app with Alpine Js

My process

Built with

• Semantic HTML5 markup
• Web Accessibility
• CSS custom properties
• Flexbox
• Mobile-first workflow
• Alpine Js - Js library

What I learned

• Creating a theme using CSS custom properties
• Refreshing CSS and HTML concepts
• Creating accessible checkboxes
• Creating Alpine Js components

Continued development

Areas of improvement:

• Use a grid system
• Break down Alpine componets into their own files
• Create an Alpine component for the to-do item
• Add Jest unit tests
• Complete the challenge (drag and drop, other features)

Author

• Gianinna Caceres