Project Details

How do I complete this project?

Review the Online Resume Project Rubric.

In this project you will store your resume data in four javaScript objects according to the schema given below. As is often the case when leveraging an API, the objects must follow the schema exactly. All properties must be present and have real or fake values. The names must match those in the schema (note that object and property names are case-sensitive). All property values should be of the data-type given for the property in the schema. For example if the data-type is given as an array, it is not acceptable to use a string as a value for that property.
Once you've created your javaScript objects, you will write the code needed to display all of the resume data contained within these objects in your resume.
All of the HTML code needed to build the resume is stored in js/helper.js variables. The variable names indicate their function. You will replace substrings in these variable string values such as %data% and # with the data in your javaScript objects, and append or prepend the formatted result to your resume in the appropriate location.
If you need a refresher on JavaScript syntax, go to the Javascript Basics course; if you would like to understand how this project is manipulating and traversing the DOM, check out Intro to jQuery.
Go through the videos and assignments in this course to learn the JavaScript necessary to build your resume.
Fork the project repo from Github and begin building you resume.
If you are prompted to do so, you may want to get a Google Maps API key, and include it as the value of the key parameter when loading the Google Maps API in index.html: <script src="http://maps.googleapis.com/maps/api/js?libraries=places&key=[YOUR_API_KEY]"></script> You may have some initial concerns with placing your API key directly within your JavaScript source files, but rest assured this is perfectly safe. All client-side code must be downloaded by the client; therefore, the client must download this API key - it is not intended to be secret. Google has security measures in place to ensure your key is not abused. It is not technically possible to make anything secret on the client-side.
Check your work against the Project Rubric.
When you are satisfied with your project, submit it according to the Submission Instructions below.

By the end:

Your resume will look something like this

And your repository will include the following files:

index.html: The main HTML document. Contains links to all of the CSS and JS resources needed to render the resume, including resumeBuilder.js.
js/helper.js: Contains helper code needed to format the resume and build the map. It also has a few function shells for additional functionality. More on helper.js further down.
js/resumeBuilder.js: This file is empty. You should write your code here.
js/jQuery.js: The jQuery library.
css/style.css: Contains all of the CSS needed to style the page.
README.md: The GitHub readme file.
and some images in the images directory.

Your starting point...

js/helper.js

Within helper.js, you’ll find a large collection of strings containing snippets of HTML. Within many snippets, you’ll find placeholder data in the form of %data% or %contact%.

Each string has a title that describes how it should be used. For instance, HTMLworkStart should be the first <div> in the Work section of the resume. HTMLschoolLocation contains a %data% placeholder which should be replaced with the location of one of your schools.

Your process:

The resume has four distinct sections: work, education, projects and a header with biographical information. You’ll need to:

Build four JavaScript objects, each one representing a different resume section. The objects that you create (including property names and the data types of their values) need to follow the schema below exactly. All properties should be included and contain a value of the type specified unless the property is marked 'optional'. Property values may contain real or fake data. Property names are case-sensitive. Make sure your javaScript objects are formatted correctly using jshint.com.

bio contains:

    name : string
    role : string
    contacts : an object with
          mobile: string
          email: string
          github: string
          twitter: string (optional)
          location: string
    welcomeMessage: string
    skills: array of strings
    biopic: string url
    display: function taking no parameters

education contains:

    schools: array of objects with
         name: string
         location: string
         degree: string
         majors: array of strings
         dates: string (works with a hyphen between them)
         url: string (optional)
    onlineCourses: array of objects with
         title: string
         school: string
         dates: string (works with a hyphen between them)
         url: string
    display: function taking no parameters

work contains

    jobs: array of objects with
         employer: string
         title: string
         location: string
         dates: string (Can be 'in progress')
         description: string
    display: function taking no parameters

projects contains:

    projects: array of objects with
          title: string
          dates: string (works with a hyphen between them)
          description: string
          images: array with string urls
    display: function taking no parameters

Iterate through each javaScript object and append its information to index.html in the correct section.

First off, you’ll be using jQuery’s selector.append() and selector.prepend() functions to modify index.html. selector.append() makes an element appear at the end of a selected section. selector.prepend() makes an element appear at the beginning of a selected section.
- Pay close attention to the ids of the <div>s in index.html and the HTML snippets in helper.js. They’ll be very useful as jQuery selectors for selector.append() and selector.prepend()
You’ll also be using the JavaScript method string.replace(old, new) to swap out all the placeholder text (e.g. %data%) for data from your resume JSON objects.
Here’s an example of some code that would add the location of one of your companies to the page:
- var formattedLocation = HTMLworkLocation.replace("%data%", work.jobs[job].location);
- $(".work-entry:last").append(formattedLocation);
Use the mockup at the page of this document as a guide for the order in which you should append elements to the page.

The resume includes an interactive map. Do the following to add it.

In resumeBuilder.js, append the googleMap string to <div id=”mapDiv”>.
In index.html, uncomment the Google script element: <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>
In helper.js, at the bottom of the file, uncomment code to initialize map and set fitBounds.