Displaying application screens
Here, we visualize the screens of the application, allowing the following:
- Displaying the already existing list (empty at first)
- Inserting a new element at the end of the list
- Modifying an element of the list
- Removing an item from the list
Note
The URL to access the list is
http://localhost:3000. The server used here is a Node.js server running with the Express module. The database used is MongoDB.
Initially, the list is empty. Only the Add Element button is present on the page (see the following figure):
Figure 9.1 – Empty item list
Clicking the Add Element button multiple times creates multiple rows with the text Element X followed by Remove and Modify buttons (here, we clicked on the Add Element button three times):
Figure 9.2 – Adding three items to the list
Next, let’s modify the second element. An input field appears in place of the item text. Let’...
