coderdannie/to-dos-app

To-dos progressive web app

TO-DOS WEB APPLICATION

Table of contents

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

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• Toggle color theme to their preference
• Add to-dos
• Remove all to-dos at ones (including the completed todo(s))
• Mark an active todo
• See completed to-dos(s) at the completed section

Screenshot

Link

• To-dos-app: To-dos-app

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React js
• sass/css
• Browserlocalstorage
• Vite

What I learned

This is my first time of building a to-dos web application using react. What i learnt majorly is how to use arrays together with array methods and object.

Continued development

I will focus more on how to use build complex project using arrays and also how to write more efficient code.

Useful resources

• Example resource 1 - This helped me to know more about input radio button and some other css styles i used in this project.
• Example resource 2 - This is an amazing article which helped me finally to get solutions to all of the problem i encountered. I'd recommend it to anyone who get stuck or faces some issues while building this project.

Author

• Twitter - @coderdannie
• Ui design by coderdannnie

Acknowledgments

I specially thank my tutor @John Smilga. He is my source of my inspiration.