Lesson Weekend

Wow, we covered a lot of ground in the last nine lessons. Not only should you now have a fully-functioning JavaScript and HTML application that can contact, query, retrieve, and display data from an API, but we've also learned about the following concepts along the way:

  • Text-editors like Atom, why they're beneficial for coding, and how to download and navigate one.
  • The command line, how it differs from a graphical user interface, or GUI, and how to execute basic commands.
  • Using and accessing either Mac's Terminal application, or the Git Bash command prompt.
  • Dependencies, the functionality they offer, the benefits of using them, and how to use npm to quickly install dependencies in our own projects.
  • Navigating through directories in the command line, including commands to both change directories, and view the current directory's content in the Terminal.
  • Initializing npm and using a project manifest to organize dependencies.
  • The Gulp task runner, the benefits it offers, and how to write a basic Gulp task to automate portions of our development.
  • What a local development server is and how to spin up your own using Gulp and BrowserSync.
  • Basic jQuery, including waiting for a page to load, and attaching event listeners to HTML elements.
  • Constructing an API call
  • What JSON is, and how to parse through JSON received from an API
  • Basic JavaScript loops that can dynamically add content to a web page.

Look at that! You absolutely crushed it today. Sometimes technical jargon can feel like gatekeeping. It can make a concept, technology, or idea seem inaccessible and complex. It can make it hard to sort out where to even begin. And APIs are just one example of this. We hope not only that this was a fun and rewarding experience, but that you can walk away with newfound motivation and confidence to tackle other complex topics, concepts and technologies moving forward.

(and, of course, we also hope you're ready to drop your new knowledge on your coworkers and friends, next time "application programming interfaces" come up!)

Further Exploration

Did you happen to finish before the workshop was over? Or do you want to continue developing this project at home? We have ideas for a few extra concepts and features you could explore, if you'd like! Check 'em out:

Add Styling

The starter kit already includes both a custom-made stylesheet (css/styles.css), and a pre-made Bootstrap stylesheet (The line of code that looks like this in your index.html file):

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

(Bootstrap is basically just a pre-made set of styles available online for free, that we can use in our projects).

Try further styling and formatting the project to your liking. You can experiment either with custom CSS, pre-made Bootstrap CSS, or both!

Here are some resources to get you started, if you'd like:

Parse and Display More API Data

Our page is currently displaying each attendee's name and position. But, as you might recall, there were a few more pieces of data for each attendee in the API.

Revisit how we handled parsing and displaying names and positions, and see if you can't update your application to display those additional pieces of information, too!

Hide Your Button

After we successfully retrieve API data and display it on our page, our See Attendees button is still visible. This is not quite ideal, because we're already seeing the list of attendees! We don't need to click the button twice!

Using jQuery, see if you can figure out how to hide the button after (and only after) the page has been updated to display API data.

(If you want a hint, click here)