udacity/frontend-nanodegree-resume

This repository is used for one of the projects in Udacity's Front-End Web Developer Nanodegree program. Learn how to become a Front-End Developer today with line-by-line code reviewed projects and get a job with career services!

Project Details

How do I complete this project?

Review the Online Resume Project Rubric.

1. 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.
2. 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.
3. 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.
4. 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.
5. Go through the videos and assignments in this course to learn the JavaScript necessary to build your resume.
6. Fork the project repo from Github and begin building you resume.
7. 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.
8. Check your work against the Project Rubric.
9. 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:

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: 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
  

2. 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.

3. 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.

4. All of your code for adding elements to the resume should be contained within functions.
5. As described in the javaScript object schema, each 'display' function should be encapsulated within the javaScript object it displays in the resume. For instance, your 'display' function for appending 'work' experience data to the resume should be encapsulated within the 'work' javaScript object. The 'display' function can be encapsulated within the 'work' javaScript object definition in the same way other properties are defined there, or it can be encapsulated later in the file using dot notation. For example: work.display =
6. 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.

Archival Note

This repository is deprecated; therefore, we are going to archive it. However, learners will be able to fork it to their personal Github account but cannot submit PRs to this repository. If you have any issues or suggestions to make, feel free to:

• Utilize the https://knowledge.udacity.com/ forum to seek help on content-specific issues.
• Submit a support ticket along with the link to your forked repository if (learners are) blocked for other reasons. Here are the links for the retail consumers and enterprise learners.

frontend-nanodegree-resume's Issues

Skills displaying on the same line

The way that skills display initially do not match the picture in the readme.

map variable is empty, so nothing is getting called in "var service = new google.maps.places.PlacesService(map);"

style.css

body,
div,
ul,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
padding:0;
margin:0;
font-family: "Roboto", sans-serif;
}

.clear-fix {
overflow: auto;
}

.education-entry,
.work-entry,
.project-entry {
padding: 0 5%;
}

h1 {
font-size: 40px;
color: #f5a623;
line-height: 48px;
display: inline;
}

h2 {
font-weight: bold;
font-size: 24px;
color: #999;
line-height: 29px;
padding: 10px;
}

h3 {
font-style: italic;
font-size: 20px;
color: #000;
line-height: 22px;
}

h4 {
font-weight: bold;
font-size: 14px;
color: #4a4a4a;
line-height: 17px;
}

h2,
h3,
h4,
h5 {
padding:10px 5%;

}

.date-text {
font-style: italic;
font-size: 14px;
color: #999;
line-height: 16px;
float: left;
}

.location-text {
font-style: italic;
font-size: 14px;
color: #999;
line-height: 16px;
float: right;

}

p {
font-size: 14px;
color: #333;
line-height: 21px;
}

a {
color: #1199c3;
text-decoration: none;
margin-top: 10px;
display: block;
}

.welcome-message {
font-style: italic;
font-size: 18px;
color: #f3f3f3;
line-height: 28px;
}

skills-h3 {

color: #f5ae23;
display: none;
}

.orange {
background-color: #f5ae23;
}

.orange-text {
color: #f5ae23;
}

.white-text {
font-weight: bold;
color: #fff;
}

.gray {
background-color: #f3f3f3;
padding-bottom: 10px;
clear:both;
}

.dark-gray {
background-color: #4a4a4a;
}

/* TODO: Replace with image later */

header {

background-color: #484848;
}

.flex-box {
display: -webkit-flex;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
padding: 10px;
}

.center-content {
padding: 2.5% 5%;
}

ul {
list-style-type: none;
}

.biopic {
float: left;
padding: 10px;
width: 200px;
display: none;
}

img {
padding: 10px;
}

span {
padding: 5px;
}

lets-connect {

text-align: center;
}

/* Media queries to handle various device widths */

@media only screen and (max-width: 1024px) {
#lets-connect {
margin-top: 5%;
}
}

@media only screen and (max-width:900px) {
.biopic {
width: 175px;
}
}

@media only screen and (max-width: 750px) {
#lets-connect {
margin-top: 10%;
}
.biopic {
width: 150px;
}
.welcome-message {
display: none;
}
}

map {

display: block;
height: 100%;
margin: 0 5%;
}

mapDiv {

height: 400px;
width: 100%;
padding-bottom: 5%;
}

@media only screen and (min-width: 750px) {
#skills-h3,
.biopic {
display: block;
}
}

Empty Locations Causes Maps to Fail

In the locations loop to create the google maps query, if you have an empty location, it causes the map query to fail to load because of the location with an error saying "Uncaught Error: Missing parameter. You must specify query.".

This can be fixed by changing the loop to this:

for (var place in locations) {
  // New sections to check if locations[place] exists
  // This keeps google maps from breaking if a location field is empty.
  if (!locations[place]) 
    continue;

  // the search request object
  var request = {
    query: locations[place]
  };

  // Actually searches the Google Maps API for location data and runs the callback
  // function with the search results after each search.
  service.textSearch(request, callback);
}

GoogleMap appending to it's parent div.

Google map object is constructed on "#map-div" instead of "#map" on helper.js file: line 117.
It's causing

element that contains "Where I've Lived and Worked" to disappear.

unrecoverable syntax error

I'm getting this error when I try to clean my code in jshint.
There are few changeds regarding for loop in the .js file. The whole code is getting ruined if I try to change.
Can anyone make the changes for me?
Here is the link of project review. https://review.udacity.com/#!/reviews/394290
onlineresume.zip

The viewport meta tag in index.html does not set initial-scale=1

Recommend changing the viewport meta tag on index.html Line 51 to set initial-scale=1:

<meta name="viewport" content="width=device-width,initial-scale=1">

This makes a big difference on mobile and is a best practice shown in Udacity's Responsive Web Design Fundamentals course: https://www.udacity.com/course/viewer#!/c-ud893-nd/l-3494350031/m-3576408597

style.css style guide

Rows 12 and 13 should have a space in between the css property and value according to the style guide.
padding: 0;
margin: 0;

helper.js

/*

This file contains all of the code running in the background that makes resumeBuilder.js possible. We call these helper functions because they support your code in this course.

Don't worry, you'll learn what's going on in this file throughout the course. You won't need to make any changes to it until you start experimenting with inserting a Google Map in Problem Set 3.

Cameron Pittman
*/

/*
These are HTML strings. As part of the course, you'll be using JavaScript functions
replace the %data% placeholder text you see in them.
*/
var HTMLheaderName = '

%data%

';
var HTMLheaderRole = '%data%

---

';

var HTMLcontactGeneric = '

%contact%%data%

';
var HTMLmobile = '

mobile%data%

';
var HTMLemail = '

email%data%

';
var HTMLtwitter = '

twitter%data%

';
var HTMLgithub = '

github%data%

';
var HTMLblog = '

blog%data%

';
var HTMLlocation = '

location%data%

';

var HTMLbioPic = '';
var HTMLwelcomeMsg = '%data%';

var HTMLskillsStart = '

Skills at a Glance:

';
var HTMLskills = '

%data%

';

var HTMLworkStart = '

';
var HTMLworkEmployer = '%data%';
var HTMLworkTitle = ' - %data%';
var HTMLworkDates = '

%data%

';
var HTMLworkLocation = '

%data%

';
var HTMLworkDescription = '

%data%

';

var HTMLprojectStart = '

';
var HTMLprojectTitle = '%data%';
var HTMLprojectDates = '

%data%

';
var HTMLprojectDescription = '

%data%

';
var HTMLprojectImage = '

';

var HTMLschoolStart = '

';
var HTMLschoolName = '%data%';
var HTMLschoolDegree = ' -- %data%';
var HTMLschoolDates = '

%data%

';
var HTMLschoolLocation = '

%data%

';
var HTMLschoolMajor = '
Major: %data%';

var HTMLonlineClasses = '

Online Classes

';
var HTMLonlineTitle = '%data%';
var HTMLonlineSchool = ' - %data%';
var HTMLonlineDates = '

%data%

';
var HTMLonlineURL = '
%data%';

var internationalizeButton = 'Internationalize';
var googleMap = '

';

/*
The International Name challenge in Lesson 2 where you'll create a function that will need this helper code to run. Don't delete! It hooks up your code to the button you'll be appending.
*/
$(document).ready(function() {
$('button').click(function() {
var iName = inName() || function(){};
$('#name').html(iName);
});
});

/*
The next few lines about clicks are for the Collecting Click Locations quiz in Lesson 2.
*/
clickLocations = [];

function logClicks(x,y) {
clickLocations.push(
{
x: x,
y: y
}
);
console.log('x location: ' + x + '; y location: ' + y);
}

$(document).click(function(loc) {
// your code goes here!
});

/*
This is the fun part. Here's where we generate the custom Google Map for the website.
See the documentation below for more details.
https://developers.google.com/maps/documentation/javascript/reference
*/
var map; // declares a global map variable

/*
Start here! initializeMap() is called when page is loaded.
*/
function initializeMap() {

var locations;

var mapOptions = {
disableDefaultUI: true
};

/* For the map to be implemented, #mapDiv must be appended to resumeBuilder.js. */
map = new google.maps.Map(document.querySelector('#map'), mapOptions);

/*
locationFinder() returns an array of every location string from the JSONs
written for bio, education, and work.
*/
function locationFinder() {

// initializes an empty array
var locations = [];

// adds the single location property from bio to the locations array
locations.push(bio.contacts.location);

// iterates through school locations and appends each location to
// the locations array
for (var school in education.schools) {
  locations.push(education.schools[school].location);
}

// iterates through work locations and appends each location to
// the locations array
for (var job in work.jobs) {
  locations.push(work.jobs[job].location);
}

return locations;

}

/*
createMapMarker(placeData) reads Google Places search results to create map pins.
placeData is the object returned from search results containing information
about a single location.
*/
function createMapMarker(placeData) {

// The next lines save location data from the search result object to local variables
var lat = placeData.geometry.location.lat();  // latitude from the place service
var lon = placeData.geometry.location.lng();  // longitude from the place service
var name = placeData.formatted_address;   // name of the place from the place service
var bounds = window.mapBounds;            // current boundaries of the map window

// marker is an object with additional data about the pin for a single location
var marker = new google.maps.Marker({
  map: map,
  position: placeData.geometry.location,
  title: name
});

// infoWindows are the little helper windows that open when you click
// or hover over a pin on a map. They usually contain more information
// about a location.
var infoWindow = new google.maps.InfoWindow({
  content: name
});

// hmmmm, I wonder what this is about...
google.maps.event.addListener(marker, 'click', function() {
  // your code goes here!
});

// this is where the pin actually gets added to the map.
// bounds.extend() takes in a map location object
bounds.extend(new google.maps.LatLng(lat, lon));
// fit the map to the new marker
map.fitBounds(bounds);
// center the map
map.setCenter(bounds.getCenter());

}

/*
callback(results, status) makes sure the search returned results for a location.
If so, it creates a new map marker for that location.
*/
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
createMapMarker(results[0]);
}
}

/*
pinPoster(locations) takes in the array of locations created by locationFinder()
and fires off Google place searches for each location
*/
function pinPoster(locations) {

// creates a Google place search service object. PlacesService does the work of
// actually searching for location data.
var service = new google.maps.places.PlacesService(map);

// Iterates through the array of locations, creates a search object for each location
for (var place in locations) {

  // the search request object
  var request = {
    query: locations[place]
  };

  // Actually searches the Google Maps API for location data and runs the callback
  // function with the search results after each search.
  service.textSearch(request, callback);
}

}

// Sets the boundaries of the map based on pin locations
window.mapBounds = new google.maps.LatLngBounds();

// locations is an array of location strings returned from locationFinder()
locations = locationFinder();

// pinPoster(locations) creates pins on the map for each location in
// the locations array
pinPoster(locations);

}

/*
Uncomment the code below when you're ready to implement a Google Map!
*/

// Calls the initializeMap() function when the page loads
//window.addEventListener('load', initializeMap);

// Vanilla JS way to listen for resizing of the window
// and adjust map bounds
//window.addEventListener('resize', function(e) {
//Make sure the map bounds get updated on page resize
// map.fitBounds(mapBounds);
//});

Missing tag on index

In the index.html file, the start of tag is missing!

Greetings!

good work poojitha

frontend-nanodegree-resume chala bavundi hope u recognize me :-)

Maximum call stack size exceeded error

In helper.js the lat and lng variables in the createMapMarker function read as:

var lat = placeData.geometry.location.k;
var lon = placeData.geometry.location.B;

The problem is that the k and B are undocumented object properties and can change at anytime. The k and B should be replaced with lat() and lng() like this:

var lat = placeData.geometry.location.lat();
var lon = placeData.geometry.location.lng();

Source

ContactGeneric

how do we display the contact information in a single line by using this function, as shown in the mockup resume?

Akintola Dorcas resume

No 34, Unique Estate
Sanyo Ibadan 08132625275,09028019887

PERSONAL DATA
NAME: AKINTOLA DORCAS .O
STATE OF ORIGIN: Oyo
MARITAL: Single
NATIONALITY: Nigerian
RELIGION: Christianity
EMAIL: [email protected]
LANGUAGE SPOKEN: English Language and Yoruba Language
PERSONAL PROFILE
Result oriented, innovative thinker with a strong passion for standard moral
Good communication and persuasion skill and interpersonal relationship skill
Energetic, pragmatic and team player with desire learning new ideas in a working environment
Expert in use of computer system i.e. Microsoft word, Excel, PowerPoint
Strong conception and analytical skills, innovative mind set
Problem solver, ability to work under pressure and get work done on time
Ability to work with supervision or no supervision and perfect the job
CAREER OBJECTIVE
To operate with other staffs in order to move the organization forward and to accomplish its achievable targets.
ACADEMIC QUALIFICATION WITH DATES
Kwara State, Ilorin (microbiology) 2014-2016
Kwara Polytechnic,Ilorin (OND in science laboratory technology) 2010 – 2013
Ibadan Grammars School, Molete Ibadan, Senior Secondary School 2000-2006
Lalupon Community Grammar school, Ejioku Iyana offa 2006-2008
Primary School Leaving Certificate 2000
EXPERIENCE WITH DATE

ACHIEVEMENTS.
IMPROVED Customer way of saving
Ensure efficient smoothness in terms of opening customers account
Reduce branch rate of losing customers
Keeping save customer integrity and bank integrity
Ability to sell the bank to customers
Ensuring huge deposit amount to the bank
CHRIST CHURCH COLLEGE Odinjo, Ibadan 2016-2017
Achievement
Imparting knowledge to student Improving student life's morally and academically Performing practical of agriculture Balancing of lesson note and diaries
BRILLIANT BRAIN ACADEMY 2016
Imparting knowledge to student lives
Working with the student to learn more and securing admission
University teaching hospital 2013 - 2014
ACHIEVEMENT
Ensure patient laboratory test were accurate Testing of different blood samples Ability to talk two people about their health Ability to study human being from their blood
OGO - KRISTI CATERING SERVICE 2011 - 2013
Ensure effective baking for customers
Giving the customer the best from catering service
Balancing customer needs and managing their time
UNITY DENTAL CLINIC ILORIN, 2011 - 2012
ACHIEVEMENT
Giving patient drugs based on their pain Performing x-ray on patient Knowing different types of pain inside the teeth Computer skills
Microsoft office suite (word, excel, power point, outlook)
AWARD
BEST STUDENT IN BIOLOGY
INTEREST
Reading, travelling,
Interacting with people, meeting people
Guidance and counselling, reading motivational and inspirational books Motivating people
REFREES
AVAILABLE ON REQUEST

This is an issue comment

This is an issue comment

formattedName

Wrong nr of bytes for pageStats check?

Just finished the course, including the optional challenges. However, I hade a very odd error where adding the bytes of the pageStats ended up with 53 bytes too much in the test-run. After having double checked evreything I could think of, I tested with just subtracting that number from the result in the algorithm - which made my code pass all the tests!?

Hoping this is a badly written test, but in case my solution is somehow wrong, this is the code:

// Iterate through the localizedRuleNames in ruleResults and 
// return an array of their strings.
function ruleList(results) {
    var list = [];
    for (var key in results.formattedResults.ruleResults) {
        for (var name in results.formattedResults.ruleResults[key]) {
            if (name === "localizedRuleName") {
                list.push(results.formattedResults.ruleResults[key][name]);
            }
        }
    }
    
    // Your code goes here!
    return list;
}

// Iterate through pageStats in the psiResults object and 
// return the total number of bytes to load the website.
function totalBytes(results) {
    var bytes = 0;
    // Your code goes here!
    for (var key in results.pageStats) {
//        if (results.pageStats.hasOwnProperty(key)) {
            bytes += parseInt(results.pageStats[key]);
  //      }
    }
    return bytes -= 53;
}

Update readme.md

Write a better readme.md for this project.

Missing Google Fonts link?

The CSS file lists 'Roboto' for a font-family, but it seems that the Google Fonts API link is missing in the index file.