https://github.com/0xabdulkhaliq/todo-app

This is a solution to the "Todo App" challenge on Frontend Mentor
https://github.com/0xabdulkhaliq/todo-app

bundling css3 es6 es6-modules frontend frontend-mentor html5 webpack

Last synced: 8 days ago
JSON representation

This is a solution to the "Todo App" challenge on Frontend Mentor

• Host: GitHub
• URL: https://github.com/0xabdulkhaliq/todo-app
• Owner: 0xabdulkhaliq
• License: mit
• Created: 2023-07-08T16:29:39.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-07-16T14:30:03.000Z (over 1 year ago)
• Last Synced: 2024-08-14T03:38:16.436Z (3 months ago)
• Topics: bundling, css3, es6, es6-modules, frontend, frontend-mentor, html5, webpack
• Language: CSS
• Homepage: https://0xabdulkhalid.github.io/todo-app/
• Size: 190 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

  
Todo App Solution

  


    Frontend Mentor Challenge

    


    


    View Demo

     · 

    Report Bug

     · 

    Request Feature

  





  

  

    

      


  

  

    

      

  

  

    

  









## **Preview**










## **Links**

- |||

  | :----- | :----- |

  | Solution URL: | [To be posted :hourglass_flowing_sand:](#link) |

  | Live Site URL: | [https://0xabdulkhalid.github.io/todo-app/](https://0xabdulkhalid.github.io/todo-app/) |

  |||




## The Challenge

- The challenge is to build out this Todo App and get it looking as close to the design as possible.

- 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




## **Built With**

 ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)   ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)   ![JavaScript](https://img.shields.io/badge/ES6%20Modules%20-%23F7DF1E.svg?style=for-the-badge&logo=javascript&logoColor=black)   ![Webpack](https://img.shields.io/badge/webpack-%238DD6F9.svg?style=for-the-badge&logo=webpack&logoColor=black)




## **Tools Used**

![Google](https://img.shields.io/badge/google-DA4437?style=for-the-badge&logo=google&logoColor=white)    ![Prettier](https://img.shields.io/badge/prettier-1A2C34?style=for-the-badge&logo=prettier&logoColor=F7BA3E)   ![Visual Studio Code](https://img.shields.io/badge/VS%20Code-0078d7.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white)   ![Git](https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white)




## **Acknowledgment**

- Challenge was provided by [Frontend Mentor](https://www.frontendmentor.io)




## **Let's Connect 👋**