Week 4 Homework

Your hot new rideshare startup, Noober, is ready to launch its MVP. Unfortunately, your front-end developer has suddenly left the company, and it's up to you to put together a minimal front-end for your drivers to use.

Getting Started

Begin by heading over to the starter project – select "Use this template", then create a repository in your own GitHub account called noober-week4.

Open index.html in Chrome. You'll see that your design team has put together a prototype of what the new UI should look like, with a few hard-coded examples. Your job is to make the page read the dynamic data that's been made available by your back-end development team and display it on the page – delete the hard-coded HTML when done.

The Goal

The page should read the real data, found at https://kiei451.com/api/rides.json. The work to do this is already provided – simply use the json variable. The provided code writes out the value of this variable to the JavaScript Console in Chrome – inspect the structure of this data using the Console. Your job is to extract the data from this Object, transform it into HTML/Tailwind code that meets the design team's specifications, and append it to the div with the class name rides.

Rubric

  1. (1 point) Write the recipe (algorithm) for the approach you're taking in the comments. As previously discussed, it is highly recommended you do this first, then write the code.
  2. (4 points) Loop through all of the available rides contained within the json variable provided. Traverse this data – print the level of service and information on each ride as illustrated by the design mockup (4 points). You should end up with all 100 rides on the page, along with the correct information on each ride and the level of service – the rules for determining the level of service are the same as the Week 3 homework.
  3. (1 point) Empty the rides div element; you should be left with only an empty div element in your HTML, but a page full of data.
  4. (For fun) Give each level of service a different visual look – for example, a purple border for Noober Purple rides or larger text for Noober XL rides.

Guidelines for Submission

All your work should take place in noober.js; i.e. that should be the only file that's modified from the original project template. Your finished product should live in your GitHub account at https://github.com/<your GitHub username>/noober-week4, and this URL should be submitted as the "website URL" for this assignment in Canvas.