By the end:

Resume sample view:

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:

1. 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: 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
        onlineCourses: array of objects with
             title: string
             school: string
             date: 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