We are going to introduce some new endpoints and functionalities in this webpage.
Notice that the year in which the mascot was born is missing. Fix the index.ejs to also include this information.
Try to understand how EJS iterates the array and gathers the information from each element.
The footer is missing in both Home and About pages. You'll have to create a new footer.ejs. You also have to modify both about.ejs and index.ejs pages. Have a look how those pages can include the header.ejs and head.ejs partials.
The text does not really matters; choose one of your choice.
Create a new page using the template syntax. We need a form to send a new mascot to our server; so it is displayed in the Home page. Write your file in views/pages/form.ejs. This page must be rendered when the user navigates to /add-mascot. Add a new navigation link.
We need this form to:
- Get from the user the name, organization and year of the new mascot.
- Perform some basic validation in the form
- The form's action attribute must set to the endpoint /add-mascot
- The form's method attribute must set to POST
Please notice that this form is created with Bootstrap 5; loaded from the CDN. Take advantage of this.
We now need to create a new endpoint for the POST performed by the form.
- Add a new POST endpoint to '/add-mascot'
- The endpoint must receive the fields from the form. Remember the field's info will be available in req.body
- Is your req.body undefined ? Notice that you'll need to include some middleware.
- Add the new mascot to the mascots global variable.
- Explore de Express documentation to learn about how to redirect the user to the homepage.