You can preview the image you select for your restaurant (codepen example). This kind of feedback really changes the user's experience of your interface. Think about your create restaurant form as a component with states, for example; when no data has been added, when the name of the restaurant is added, when the image has been selected. It's really professional to provide feedback to the user about the data they have successfully managed to add to the form, and if that data is correct or not.
Your designs will include interactive forms with dynamic lists. An example of an interactive form is one where we need to collect quite complex data from a user. Our restaurant has a name, an image, but also an indeterminate number of menus, and those menus can have any number of items. Considering "Used" from the HCI lesson our interface also needs to deal with mistakes, so if our user makes a spelling mistake or adds the wrong price for a menu item, they need to be able to fix it.
We are not introducing javascript frameworks at the moment we will look at these in more detail in Module 1. You can create all the functionality you need using the document API methods we have covered like createElement and so on. However you'll find yourself writing a lot of javascript and to help with that lets have a look at a design pattern that lots of frontend frameworks use.
The first mistake to avoid is merging your data with the UI layer. It is easy to start treating the interface layer as the source of your data, but this gets very messy. Think about having a mini data model (often called 'state' in frameworks) that is a javascript object. Create functions that render and re-render that data model.
Your components will need to provide an interface so users can perform all the CRUD operations (Create, Read, Update, Delete) in the form i.e. create a menu item, read the menu item that was added, update the menu item, delete the menu item. The component will have an update cycle.
When your page loads you can render the data model (which might be empty). Then as you collect input from the user, update your data model, then re-render the data model. Expect to render your component multiple times during an interaction. Follow this pattern, separate out the UI layer from your data and implement an update cycle, this will make it easier to organise and reason about your code.
const state = {
name: "",
imageUrl: ""
}
function render(state) {
}
Implement the remained of your design so users can create new restaurants, and add menus and menu items. Do the work of sending your data to the server and have it persist in your database. Update the UI with the new restaurant/menu/items that you create.
When you create a new resource like a restaurant via an API POST request, if you get your endpoint to return to your frontend code that newly created restaurant (with it's id from being created in the database), you can insert it in the data model in the frontend code and trigger a re-render. This way your newly created restaurant will appear in the UI without the user having to refresh the page. Very slick.