Achievement Milestone 1: Book Search

Screencast

Watch this short screencast to see our AM1 application in action. Scroll down the page to press the play button.

Overview

In the first two weeks we will work together in class and outside to complete this first milestone. The app shown in the screencast uses one Web API (which one?), code written in Javascript to access the data from the API and to dynamically show it in the page, some CSS to style the page, as well as HTML (the page that we see at the beginning). Our goal would be to learn how this app was built, so that you can create a new (very similar) app that uses a different API to display something else on the page (maybe movie reviews from Rotten Tomatoes or recipes from Yummly, the choice is yours).

Preparation

Your task in the next days will be to figure out how this app was built, what "ingredients" it uses and where they come from, and what you'll need to learn to be able to implement it on your own (either alone or working with a peer). Below is a group of questions that might help you in your discovery and learning process. If you have no familiarity with Javascript, you can start with the second part, where you make up your own data and then show them in the page with static HTML and CSS.

Part1: Questions/Tasks about the data

As you might have noticed toward the end of the screencast, where the HTML source code of the page is shown, there are no data that show up in that page. This is because we cannot know in advance what books should be displayed in response to the query. The data will come from somewhere else (external to our webpage).

  1. Try to figure out from which web API the data come.
  2. If you find the API and its web documentation, figure out how the URL for sending a request for books looks like.
  3. Use that URL on the browser to get the results. In what data format is the result shown?
  4. Looking at how each book is shown in our own results page (screencast), can you figure out which fields of the book objects were used?
  5. Copy the content of the page with the results, store it in a local file. At the top create a variable var results = to store them. Save the file as a JS file. Do you know how you can refer to this file from a simple HTML page?
  6. If you completed the previous step, and loaded the HTML page on the browser, you can open the browser console to try to acces the data. Type results in the console. Now, try to access the title and description of a book.
  7. Can you write a for loop to go through the books and show all titles?

When you have finished these steps, you might be ready to start writing the application. Initially you'll write a static application, with the data from the locally stored results. Once your page looks more or like as the screencast, you can continue writing a function that will create a new URL request on the fly to get data for a new search phrase. Then, this data will be displayed in the page, using the same function you wrote to display the locally stored data.

Part 2: Questions/Tasks about the presentation

You can complete the following steps, even if you don't have started or completed the above steps about the data.

  1. Write some HTML for the initial page tha has a title, a text box and a button.
  2. Write some HTML (using made up content and images) to show at least two or three book descriptions on the page. Your page will not look like the screencast yet. You'll need a container div to keep all elements of a book together.
  3. What CSS you'll need to write in order to make the books show side by side (instead of one after the other)?
  4. Use a class attribute for the container of each book and then create a CSS rule that will apply to all books, so that they will show in the same way on the page.
  5. Notice how title, authors, description have differences in the styling, so each of them will need its own CSS rule. Can you do that?
  6. Can you figure out how to show the publication year on the top-left corner of each book like in the screencast?
  7. Make sure that the whole page is centered.

Remember to keep your CSS rules in a separate file, which is referred to in the HTML page with the link tag. Class attributes that you use in the HTML should match selector names in the CSS file. You might need to use some nested containers to achieve certain effects in the page.

New Task

Once you have completed the book search app, you'll create a new app (very similar to this) which uses a different web API. You will be able to reuse most of the code you wrote for the book search app, but there will be some differences too.

Here is a list of some of the APIs that you can use to create a search page. Most of these APIs will require you to sign up for an API key to use with your app.

Submission

Here are instructions for how to submit your work.

  1. In the public_html folder, create a cs249 folder where you will upload all your work during the semester. In the cs249 folder you'll put an index.html file that will have links to your code. Here is a suggestion for what to put in the file (feel free to style it the way you like it)
  2. Inside cs249, you will have a folder AM1, where you'll put all files you created for this AM1.
  3. The folder should have all three files (books.html, books.js, and books.css) that you created for the Google Books API web app. Link to the books.html from the index.html file (see above point).
  4. The folder should also have three files (am1.html, am1.js, am1.css) that you wrote to develop your new app.
  5. The code in the three AM files should be well indended, spaced, and with appropriate commenting where necessary.
  6. Finally, at the top of the JS file, you should have a top comment similar to the one below: 
    /* Filename: am1.js
Author: Wendy Wellesley
Date: Feb 6, 2015
Goal: Javascript code for implementing a wep app that searches the ABC API for Y,
and displays the results dynamically in a web page.

Honor Code Statement:
On this task I collaborated with Harry Potter and Hermione Granger. I had 
difficulty with the XXX issue, but Hermione gave me a good example to 
understand it. All the code in these files was typed by me.
*/

Grading

There are 10 points for this assignment, which are divided as follows:

  • 1.5 points - having a working version of books.html (no need to look like the screencast)
  • 6.5 points - having a functional version of am1.html. This app uses one of the APIs listed above, can be searched through the input box for different queries, and displays the results in a meaningful way.
  • 0.75 points - there are no errors in the console (the app deals with missing values in the returned data).
  • 0.75 points - CSS styling makes the information easy to understand by using good layout and formatting.
  • 0.5 points - code is good commented and well formatted.