CSCI 344: Fall 2024

Advanced Web Technology

CSCI 344: Fall 2024

UNCA Logo

Quiz 2: Web Dev Take Home Exam

Quiz 2 is designed to be a 2 hour exam. You will have a 48 hour window to complete it. It’s due at midnight on 12/13, but you are encouraged to complete it as soon as possible.

Ground Rules & Guidelines

Please read the following instructions carefully:

  1. You may use past code you wrote, course sample files, the Internet, and your notes to complete this exam.
  2. You may not communicate with anyone during the exam.
  3. You may not use ChatGPT.
  4. You should limit yourself to two hours to complete the exam
  5. Partial credit will be given, so try to complete as much of each problem as possible – even if you don’t get everything working. You can also leave comments so that I can follow your thinking.
  6. To submit this exam, zip your entire COMPLETED final-exam folder to the Moodle by 11:59PM (hard deadline).
  7. Goes w/o saying, but saying it: It is your responsibility to ensure that you don’t “accidentally zip the starter files.”

Quiz 2 Starter Files

Task 1: Create a getBusinesses Function [20pts]

Create an asynchronous function called getBusinesses in task01/main.js that queries the Yelp API and returns a list of business objects matching the query. Your function should take three arguments…

  1. search_term (search term for finding businesses)
  2. location (location of the business)
  3. num_results (how many results to return) …and return a list of businesses that match the query.

The endpoint and a sample query are provided for you below:

Endpoint & Sample Query:
Parameters:
  • term (search term for finding businesses)
  • location (location of the business)
  • limit (number of results to return)

Testing Your Code

Test your getBusinesses function by:

  1. Uncommenting the test code at the bottom of task01/main.js
  2. Previewing task01/index.html in your browser, and
  3. Looking at the JavaScript console (using the browser’s built-in developer tools) to ensure that that data returned by the query is accurate.

Task 2: businessToHTML Function [20pts]

Create a function called businessToHTML in task02/main.js that takes a business object as an argument and returns an HTML representation of the business that displays the following information:

  1. The name of the business
  2. The address of the business
  3. An image of the business
  4. The rating of the business
  5. The price symbol of the business (the dollar signs).
    • If price is not defined, display an empty string instead.
  6. The number of reviews associated with the business

Your HTML representation should produce some HTML that renders something like this (CSS not important):

Demo image of output

Testing Your Code

Test your businessToHTML function by:

  1. Uncommenting the test code at the bottom of task02/main.js
  2. Previewing task02/index.html in your browser, and
  3. Looking at the JavaScript console (using the browser’s built-in developer tools) to ensure that that HTML generated is accurate.

Task 3: Create a User Interface [60pts]

For your last task, you will implement the functionality described below in the task03 folder. Start by previewing task03/index.html in Live Server to see what the interface looks like.

3.1. Query Yelp and Output the Results to the Browser UI (40pts)

You will modify the HTML and JavaScript as needed so that when search button is clicked, your program:

Demo image of output

Don’t worry about the CSS. Make sure you fulfill all of the requirements for both subtasks.

3.2. Add a new parameter (20pts)

When you’re done with 3.1, enhance your form by adding a checkbox indicating whether or not show businesses that are “open now”:

Demo image of output

What to Turn In

Please zip your entire final-exam folder and upload it to the Moodle. It is your responsibility to ensure that you didn’t accidentally submit the starter files.