Coder Social home page Coder Social logo

exercise-ejs-express's Introduction

Complete my Website

We are going to introduce some new endpoints and functionalities in this webpage.

1. Birth-year missing

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 for each element.

2. Footer missing

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.

2. New form page

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:

  1. Get from the user the name, organization and year of the new mascot.
  2. Perform some basic validation in the form
  3. The form's action attribute must set to the endpont /add-mascot
  4. The form's method attrbiute must set to POST

Please notice that this form is created with Bootstrap 5; loaded from the CDN. Take advantage of this.

3. Add the POST /add-mascot endpoint

We now need to creater a new endpoint for the POST performed by the form.

  1. Add a new POST endpoint to '/add-mascot'
  2. The endpoint must receive the fields from the form. Remember the field's info will be available in req.body
  3. Is your req.body undefined ? Notice that you'll need to include some middleware.
  4. Add the new mascot to the mascots global variable.
  5. Explore de Express documentation to learn about how to redirect the user to the homepage.

exercise-ejs-express's People

Contributors

omiras avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.