ResoToDo

• 

  Thumbnail of ResoToDo Web App

• 

  Add To-Dos by clicking the plus icon or enter key on keyboard

• 

  Delete a To-Do by clicking the trash icon beside it

• 

  Click on the circle besides a To-Do to mark it as complete

Motivation

There is a common saying, "If you fail to plan, you plan to fail". In today's world, it is unproductive to stay unorganized. ResoToDo helps you plan better to complete your new year resolutions.

Methodology

It is a simple ToDo Web App that lets users add any text in the form of To-Do lists. Users can add, remove, and strikethrough any task. Users can see the current Date and Day.

Development

ResoToDo was built using HTML, CSS, and JavaScript. It started with writing HTML code. Then, it was designed using CSS. However, the main part of the project was JavaScript. Selecting elements, adding a To-Do by pressing the Enter key, storing a To-Do in local storage, updating the To-Do; checking the list item when selected, striking the To-Do by striking off the list item.

Challenges

The most challenging part was to target an element that was created dynamically. It was the first time that I tried to implement it. Therefore, I spent max time searching for solutions on various websites.

Accomplishments

I was able to implement how to save elements in local storage and remove them as well.

Learning points

To-Do List project is a beginner's JavaScript project where we learn to** select, add, and update elements*. Moreover, we learn how to **target an element which dynamically created, for example, When a user adds an item from the text box, the list item is dynamically created. **Targeting* that list item and manipulating it is a tough task. But I learned it pretty well!

Future Scope

The next aim is to develop the ResoToDo App using React.js.

Built With

• css3
• html5
• javascript