When building web applications the most important thing to consider is user experience. If you designed a web app that allowed someone to create something and append it to the page, how joyful would the user experience be if what they created didn’t show up? Or what if the thing they created disappeared after a refresh?
Now I began building the showDogs function. In this function I used form data for the input fields and you would likely use query selector to grab the form and the container (in this case a section) from your html. Since in this example I’m fetching from the backend, the form data I am fetching is consistent with the names of the attributes from my database. You will also use an event listener to put on your submit button so that when clicked the information that was put in the input fields will be submitted to the page. Generally with a submit event listener you want to use event.preventDefault() to keep the page from automatically refreshing after submission. Since we’re are doing optimistic rendering here it is crucial that you have this or the page will refresh and you will not see what you have just attempted to append to the page. Here is an example of what’s next:
With this code you will be able to make something appear on the page but it wont survive a refresh. To learn how to make something survive a refresh or persist read one of my other blog posts ‘Fetch Calls and Persisting Data.’