Exercise: Objects

As you learned in your freecodecamp.org lessons, Javascript objects store information through ‘name value’ pairs. In plain English, this simply means that information is retrieved from an object by asking for it by name. You should be pretty familiar with these concepts after going through the lessons so let’s go ahead and put that knowledge to use in yet another lesson.

To begin, download this file named objects.zip.  Once the file is unzipped, you  should see a file named classlist.html and a js folder with another file inside named object.js. Move everything to wherever you are doing your work for this class and open both files simultaneously with your code editor.

As you can see some of your work is already done: both files have content and are connected via a script tag in classlist.html. In addition:

  • classlist.html has a button that calls a (presently empty) function in object.js
  • object.js contains an object named ‘classObject‘ in which the names reference information that students shared about themeselves on the first day of class in Spring semester 2019.
  • Two  did not submit information so I invented ‘fantastic facts’  for them.
  • In addition to classObject, object.js also contains an array with all of their names.

Retrieve quotes via text entry

For our first exercise we are going to use the text field and button that already exists to pull quotes from classObject and make them appear inside of the h2 tags in the html document (id of “#aboutme”). This can be accomplished by adding just two lines of code to the quote function. I am going to offer general instructions and your job is to figure out the rest.

  1. Create a variable (call it sName ) inside of the quote function. Use document.querySelector to set the value of sName to the value of the text field (which, as you can see in the html file, has an id of “#aname”);
  2. Use document.querySelector again to set the innerHtml property of #aboutme (tied to the <h2> tags) to the appropriate value in classObject. Hint: You will need to use square brackets instead of dot notation.
  3. That’s it! Test and see if works.
  4. If you are absolutely stumped, here is a link to the solution. But don’t use it until you have made a sincere effort!

So we have something that works but there still is one problem that you may have already noticed. If someone misspells a name or enters a name that is not in classObject, #aboutme displays undefined, which is not the most informative feedback. To improve on that feedback, we need a way to check if the name that is entered is or is not part of classObject.

So our next job is to modify the quote function with two conditional statements that accomplish these tasks. A couple of hints.

  1. The first statement begins with: if (classObject.hasOwnProperty(sName) == true) 
  2. The second statement is an else statement that offers feedback for unsuccessful attempts.
  3. Once again, try this on your own until and unless you fully despair. If you need it, here’s the solution. 

Retrieve quotes from a dropdown list.

Hopefully, you are impressed with your project so far, but wouldn’t it be even better if all of those names were part of a dropdown list? And wouldn’t it also be awesome if we could avoid having to painstakingly enter all of those names by hand. Luckily, you know Javascript and you have an array of those names just waiting to be put to use, with just a tiny bit of coding. So let’s do it!

  1. Either delete or comment out the button and textfield in the html file, and replace them with a select field.
  2. Set the id of the select field to “#aname” and use ‘onchange’ to call the same quote function that you used in the previous exercise.
  4. Return to object.js. Just after the nameArray but OUTSIDE of the quote function, create a variable named nameList and set its value to #aname (via querySelector of course).
  5. Now use a for loop to add all of the names in nameArray as options inside of the select field.
    1. Hint 1: here is the first part of the for loop,
      for(i=0;  i<nameArray.length;  i++) . Note that it is bounded by the number of items in nameArray.
    2. Hint 2: In a previous exercise we used

      to populate a text field with one hundred numbers starting with zero. This time you will need to replace buildList with nameList of course.
    3. Hint 3: Instead of populating your list with the values of i, you will use i to pull values from nameArray as in:  nameArray[i]
  6. Inside of the quote function, change sName to longList.value as in:
    let sName = longlist.value; Or don’t. It should work either way.
  7. That’s it!  Because I’m a softie, here is yet another screen capture of the whole thing just in case you really, really, really need it.

Add pictures!

Aren’t you itching to see the authors of those quote worthy phrases? Ie. to have their photos appear along with their words? Easy. Here’s how.

  1. Download pix.zip from ap.mynmi.net/downloads. Unzip and drag the folder (it should be named pix) into the folder that you are currently working in. Ie. the folder that also contains classlist.html.
  2. Add a new div tag to your html document underneath the h2 tag where quotes appear and give it an id named image.
  3. In object.js, on the line below
    if (classObject.hasOwnProperty(sName) == true) {
    add code that includes document.querySelector and innerHtml, to make the appropriate image appear in the #image div tag that you created in the previous step. Here are a few breadcrumbs that may lead you to the correct solution:
    1. Be sure to include the correct path, ie. pix, the name of the folder, along with <img src= as part of your code.
    2. Take a look at those image names. What a helpful coincidence that they match they keys in classObject. You know, the same keys that are referenced by aName when you select someone’s name from the dropdown list. That’s about it. Give it your best shot. I may have a helpful screen capture hidden away somewhere but I’m not telling yet!