Mars Mission

Your mission is to create an app that displays a series of Mars Missions. Your app will include an index page which should display a list of the missions names as hyper links to the mission's show page. On the show page, All available information should be displayed including the mission's name, launch date, operator, mission type, and image.

Learning Objectives

• Practice with setting up a basic express server with view layers

Prerequisites

• JavaScript
• Node
• Express
• EJS

Getting Started

If you haven't already, you might want to start by creating a little cheat sheet reminding yourself how to build a basic express app from scratch.

1. Make a new directory
2. cd into that directory
3. Create a basic express app
4. Check your work by running your app with nodemon
5. Add the following data set to your app:

const marsMissions = [
  {
    name: "Curiosity",
    launchDate: "26 Nov 2011",
    operator: "NASA",
    missionType: "Rover",
    img: "https://www.nasa.gov/sites/default/files/styles/full_width_feature/public/thumbnails/image/pia19808-main_tight_crop-monday.jpg",
  },
  {
    name: "Opportunity",
    launchDate: "8 Jul 2003",
    operator: "NASA",
    missionType: "Rover",
    img: "https://www.jpl.nasa.gov/images/mer/20091207/mer20091207-browse.jpg",
  },
  {
    name: "Spirit",
    launchDate: "10 Jun 2003",
    operator: "NASA",
    missionType: "Rover",
    img: "https://www.nasa.gov/sites/default/files/styles/full_width_feature/public/images/287330main_image_1215_full.jpg",
  },
  {
    name: "Sojourner",
    launchDate: "4 Dec 1996",
    operator: "NASA",
    missionType: "Rover",
    img: "https://img.purch.com/w/640/aHR0cDovL3d3dy5zcGFjZS5jb20vaW1hZ2VzL2kvMDAwLzAwOS84NjAvaTAyL21hcnMtcGF0aGZpbmRlci1zb2pvdXJuZXIuanBnPzEzMDYzNTk5Nzg=",
  },
  {
    name: "Rosetta",
    launchDate: "2 Mar 2004",
    operator: "ESA",
    missionType: "Gravity Assist",
    img: "https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA18891_hires.jpg",
  },
]

Part 1: Index Page

NOTE: Remember to stop and check your work every step of the way!

1. In server.js create a GET route that goes to /
2. Update your route to res.send "Index Page"
3. Create a views directory
4. Create an index.ejs file in the views directory
5. Update your index route in server.js to render the index.ejs file and pass in the marsMissions data.
6. Use a loop to display all the names in the marsMissions data
7. Update your code to turn each link into a hyperlink ( tag) that navigates to the show page for each Mars Mission.
8. Check you work!

Part 2: SHOW PAGE

1. In server.js create a GET route that goes to /:missionIndex
2. Update your route to res.send "Show Page"
3. Create a show.ejs file in your views directory
4. Update your show route in server.js to render the show.ejs file.
5. Update your show route to pass the data for the requested mission to the show.ejs page being rendered. (Remember to use that URL parameter we created!)
6. Display all the available data on the show.ejs page, including: Name, Launch date, Operator, Mission Type, and the Image.
7. Add a link to the show.ejs page which navigates back to the index page
8. Check your work!

NOTE: If we were pushing this up to github, this would be a good point to add and commit the work we've done. Stop for a moment and think of what you would write for a helpful commit message.

Hungry for More?

1. Do some reasearch on how to style your app with CSS! Share any good resources you find in the resources channel.