1

I am currently making a small to do list application. I am adding new to-do items using insertadjacentHTML (as shown below), but after refresh they disappear. What would be the best way to save these items to the DOM permanently. I plan on using MongoDB to give the to do item data, can I save/delete them the DOM using mongo?

 var html = '<div class="added-item">%description%</div>';
    var newHTML = html.replace ("%description%", inputValue.value);
    inputField.insertAdjacentHTML('afterend', newHTML);
barskyn
  • 353
  • 1
  • 3
  • 13
  • If I understand correctly, when updating a TODO list on a web page, you want it to be saved permanently? If so, the route I would suggest is using an API to communicate between your Mongo database and the web page/client. With javascript the web page would make an AJAX call to the API, and the API would verify the data, then add it to the Mongo database. Javascript on the web page would not directly communicate with Mongo. This definitely depends on what kind of technology you are using to display the html page. More information would get you a better answer. – James Pooley Oct 08 '18 at 01:59
  • I want it to permanently added to the actual webpage, with the possibility to delete it later. I would also like to add and delete items to the database. I am wondering, what is the best way to do both of these things. I may be off, just looking for a pointer in the right direction. – barskyn Oct 08 '18 at 02:10
  • 1
    It sounds like the database will be holding all of the items in the TODO list. The database should be the single source of truth. In that case, when an item is added to this TODO list from a web page (use a HTML form), on form submit you could make an AJAX call to an API endpoint and send the new item (I use Slim PHP framework for my simple API's). That API then inserts this new item into the database. When the page is loaded, it should pull the items from the database. – James Pooley Oct 08 '18 at 02:17

0 Answers0