How do I complete this project?
Review the Online Resume Project Rubric.
- 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
keyparameter when loading the Google Maps API in index.html:
- 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:
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...
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
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.
The resume has four distinct sections: work, education, projects and a header with biographical information. You’ll need to:
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
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 dates: string (works with a hyphen between them) url: string display: function taking no parameters
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: 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
- First off, you’ll be using jQuery’s
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
- Pay close attention to the ids of the
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 your companies to the page:
var formattedLocation = HTMLworkLocation.replace("%data%", work.jobs[job].location);
- 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
- In index.html, uncomment the Google script element:
- In helper.js, at the bottom of the file, uncomment code to initialize map and set fitBounds.
- All of your code for adding elements to the resume should be contained within functions.
- It’s possible to make additional information show up when you click on the pins in the map. Check out line 174 in helper.js and the Google Maps API to get started.