Step by Step

To complete this project, open this project's directory in a text editor. A text editor like Atom or Sublime Text will do that job.

The file called /src/assets/main.js is where all of your JavaScript code will be written. Open this file in your text editor and file to complete these steps:

Step 1: Make an Ajax Call

Start by finding your Report Card URL on CodeSchool.com and an Ajax request that follows the following requirements:

• Make an AJAX request to your Report Card URL
• Set the dataType as jsonp
• Be sure to add a success callback defined

You can see a sample Ajax request that is compatible with this step here.

Step 2: Add DOM Elements

Within the response we received from our API call there will be an array of the courses you've completed on Code School. You can access this array within the response.courses.completed field.

Loop through the response.courses.completed array and for each element in the array, add the following elements to the #badges element.

• parent <div> that holds course information should have course as a CSS class
• first child of the .course element is an <h3> tag that contains the course.title of the course as its contents
• right after the <h3>, let's add an <img> element that has the src attribute set to the course.badge (which contains the image URL for this course's badge).
• after the <img> element, let's add an <a> tag that has the btn btn-primary CSS classes, has the target attribute set to _blank, href attribute set to the course.url and its text contents as "See Course".

Here is what the ending DOM structure should look like. By now your page should similar to this one: