Check out our services
Wajdi Alkayal
How to make your to-do list editable with JavaScript
BY:WMK-IT
A to-do list is one of the first projects many developers create. The basic components are a way to add items and a way to delete them. This article is for those who have already implemented these basics and want to add the extra feature of being able to edit items once they are added.
Experiment with my to-do list here and if you'd like to inspect the code, you can find it on GitHub here. Note: it is only optimized for laptops at this time.
How to edit items
I wanted to be able to double click an item on the list in order to change it. Maybe I misspelled it or something. In my HTML, I used list elements for items. The high level idea was to temporarily replace the list element with an input element, type in something new, then change it back to a list element. To achieve this, I first added an event listener to each item when it was created:
Next, I created the editItem function. The list item you want to change is replaced by an input element with the same value. Then you are able to edit that value. These are the inner workings:
The final step was to create the saveItem function in order to make my changes permanent. This basically reverses the steps above, replacing the input element and its new value with a new list element, though this time permanently (until you double click again, that is). Here's what it looks like:
That's it! If you happen to inspect it on GitHub, you will see some extra lines of code in my editItem and saveItem functions that allow you to retain the original value of the item in case you completely delete the input value, but that is beyond the scope of this article so I left it out for simplicity. I hope this helps you make all your editable-to-do-list-dreams come true!
Social Channels:
Join Our Telegram Channel for More Insights
WMK-IT
Machinlearning
python
Programming
Javascript
Css
Mobile Application
Web development
Coding
Digital Marketing
Web Development
WMK MOBILE APPLICATION[Android/IOS]
WMK-IT
WMK-TECH
Job
Blog post
Subscribe to our YouTube channel to stay up to date on world events
Subscribe to our Twitter account to follow the most important global and regional events
Join Our Telegram Channel for More Insights
WMK Tech Copyright © 2024. All rights reserved
