In this sample we wanna convert a hardcoded DOM list into a web app.
We do this with the following steps:
- Step 1: Outsource hardcoded list data into an array of objects
- Step 2: Generate DOM List dynamically
- Step 3: Create event listeners for changing the data in the array
- Step 4: Transfer all data changes to the DOM
And finally we will have converted this hardcoded UI into a dynamic, data-driven UI.
Now we could more easily integrate an API to store & update our magical data at a central place out there in the web.