ERROR 1 -
line 77 to 94: Great work displaying skills dynamically, but please use either a regular for loop or a forEach loop. Explanation in comment below
Adding the loop is great because it allows you to add more skills as you attain them and not have to update the code!
ERROR 2 -
line 99: The code above exists outside of functions. Step 4 of the project instructions says, “All of the code for adding elements to the resume should be within functions.”
This includes the bio section and work section, as well as the other sections. Please move this code inside a function that is encapsulated into its respective object. That way all data used from that object will be used by the objects function.
The reason for this is organization. When everything is within a function and that function within its objects, the only code outside of the JavaScript Object will be the display function calls to build the sections. Practicing this object oriented organization is good preparation for the next project in FEND.
Encapsulation can be done like this:
bio.display = function() {
console.log(“hey”);
};
Or like this:
var bio = {
display: function () {
// code
}
};
ERROR 3 -
line 101: This function is not currently encapsulated within a JavaScript object. Step 4 says, “All functions should be encapsulated within the same objects containing your resume data.”
By encapsulated we mean the function is stored inside the JavaScript Object itself. Right now this function exists on its own, outside of an object.
The reason encapsulation is important is that it is practice for organizing code in an object oriented way. The next project is all about object oriented programming, so getting practice organizing code in such a way will prepare you for that project and lesson.
Please encapsulate this function within its section’s JavaScript object to meet specifications. It will also need to be named “display”.
work.display = function() {
console.log(“hey”);
};
ERROR 4 -
line 102 to 121: The Udacity Style Guide - for loop section has two preferred ways to loop over an array, one of which uses the forEach method and the other the with a regular loop. This is a necessity to meet the first specification, too. It can be potentially error prone to use a regular for-in loop with arrays because the way JavaScript has prototypes set up (you’ll learn about this in the next FEND project), there can be some tricky errors down the pipeline with for-in loops. You’ll learn more about that in the next project.
Here’s an example of forEach,
myArray = [‘a’, 1, ‘etc’];
myArray.forEach(function(val) {
// use val for each item in array
console.log(val);
});
Here’s the doc from the MDN
Here’s an example of the regular for loop:
myArray = [‘a’, 1, ‘etc’];
for (var indexCount = 0; indexCount < myArray.length; indexCount++) {
console.log(myArray[indexCount]);
};
RESUME-BUILDER.js Code starts below
var bio = {
"name": "Temwanji Jesse Sinkala",
"role": "Software Developer",
"contacts": {
"email": "ts_jesse@outlook.com",
"github": "DonnJessey",
"twitter": "@Donn_Jessey",
"location": "Handsworth Park, Lusaka, Zambia",
"mobile": "+260978608565"
},
"biopic": "images/me.png",
"welcomeMessage": "I'm currently working as a Software Developer for my upcoming company Prefex, and already established company - Proweb!",
"skills": ["Cross-Platform Mobile Application Development", "Data Analysis", "Front-End Development", "Back-End Development", "Full-Stack Development", "Graphic Design"]
};
var work = {
"jobs": [{
"employer": "Profex",
"title": "Senior Software Developer & Product Manager",
"location": "Handsworth Park, Lusaka, Zambia",
"dates": "September 2016 - Current",
"description": "As the head of my recenlty lauched company - Prefex, a cross-platform social networking application " + "which is still in it's production phase, I'm a full-time worker there and want to increase it's numbers by having a sponsor."
}, {
"employer": "Proweb",
"title": "Senior Web Developer",
"location": "Handsworth Park, Lusaka, Zambia",
"dates": "January 2016 - Current",
"description": " Built, tested and deployed scalable, highly available and modular website templates and products. Please visit proweb.co.zm to browse through my work done."
}
]
};
var education = {
"schools": [{
"name": "Lake Road P.T.A School",
"dates": "2000 - 2012",
"location": "Woodlands, Lusaka, Zambia",
"degree": "High School Diploma",
"majors": "Computer Science, Mathematics & Biology",
"minor": "Geometric Drawing",
"url": "http://www.lakeroadptaschool.ac.zm/"
}],
"onlineCourses": [{
"school": "Udacity",
"title": "Intro to Programmin Nanodegree",
"dates": "2016",
"url": "https://www.udacity.com/degrees/intro-to-programming-nanodegree--nd000"
}]
};
var projects = {
"projects": [{
"title": "Proweb Zambia - Website",
"dates": "October 2016",
"description": "Created Proweb's new website, under Proweb.",
"images": ["images/proweb.png"],
"url": "http://www.proweb.co.zm"
}, {
"title": "Association Consulting Enginner;s of Zambia - Website",
"dates": "November 2016",
"description": "Created ACEZ's new website, under Proweb.",
"images": ["images/acez.png"],
"url": "http://www.acez.co.zm"
}, {
"title": "Ntanje Estates - Website",
"dates": "December 2015",
"description": "Created Ntanje estate's website from scratch, under Proweb.",
"images": ["images/ntanje_estates.png"],
"url": "http://www.ntanjeestates.com"
}, {
"title": "Thomro Biofuels of Zambia - Website",
"dates": "July 2016",
"description": "Created Thomro Biofuels website from scratch, under Proweb.",
"images": ["images/thomro_biofuels.png"],
"url": "http://www.thomrobiofuels.com/"
}]
};
var formattedName = HTMLheaderName.replace("%data%", bio.name);
var formattedRole = HTMLheaderRole.replace("%data%", bio.role);
var formattedBioPic = HTMLbioPic.replace("%data%", bio.biopic);
var formattedWelcomeMsg = HTMLWelcomeMsg.replace("%data%", bio.welcomeMessage);
var formattedContactInfo = [];
formattedContactInfo.push(HTMLemail.replace("%data%", bio.contacts.email));
formattedContactInfo.push(HTMLgithub.replace("%data%", bio.contacts.github));
formattedContactInfo.push(HTMLtwitter.replace("%data%", bio.contacts.twitter));
formattedContactInfo.push(HTMLlocation.replace("%data%", bio.contacts.location));
formattedContactInfo.push(HTMLmobile.replace("%data%", bio.contacts.mobile));
$("#header").prepend(formattedRole);
$("#header").prepend(formattedName);
$("#header").append(formattedBioPic);
$("#header").append(formattedWelcomeMsg);
if (bio.skills.length > 0) {
$("#header").append(HTMLskillsStart);
for (var i in bio.skills) {
$("#skills").append(HTMLskills.replace("%data%", bio.skills[i]));
}
}
for (i in formattedContactInfo) {
$("#topContacts").append(formattedContactInfo[i]);
$("#footerContacts").append(formattedContactInfo[i]);
}
function displayWork() {
if (work.jobs.length > 0) {
$("#workExperience").append(HTMLworkStart);
for (i in work.jobs) {
var formattedEmployer = HTMLworkEmployer.replace("%data%", work.jobs[i].employer);
var formattedWorkTitle = HTMLworkTitle.replace("%data%", work.jobs[i].title);
var formattedWorkLocation = HTMLworkLocation.replace("%data%", work.jobs[i].location);
var formattedDatesWorked = HTMLworkDates.replace("%data%", work.jobs[i].dates);
var formattedWorkDescription = HTMLworkDescription.replace("%data%", work.jobs[i].description);
var formattedEmployerWorkTitle = formattedEmployer + formattedWorkTitle;
$(".work-entry:last").append(formattedEmployerWorkTitle);
$(".work-entry:last").append(formattedWorkLocation);
$(".work-entry:last").append(formattedDatesWorked);
$(".work-entry:last").append(formattedWorkDescription);
}
}
}
displayWork();
projects.display = function() {
if (projects.projects.length > 0) {
for (i in projects.projects) {
$("#projects").append(HTMLprojectStart);
var formattedProjectTitle = HTMLprojectTitle.replace("%data%", projects.projects[i].title).replace("#", projects.projects[i].url);
var formattedProjectDates = HTMLprojectDates.replace("%data%", projects.projects[i].dates);
var formattedProjectDescription = HTMLprojectDescription.replace("%data%", projects.projects[i].description);
$(".project-entry:last").append(formattedProjectTitle);
$(".project-entry:last").append(formattedProjectDates);
$(".project-entry:last").append(formattedProjectDescription);
for (var img in projects.projects[i].images) {
var formattedProjectImage = HTMLprojectImage.replace("%data%", projects.projects[i].images[img]);
$(".project-entry:last").append(formattedProjectImage);
}
}
}
};
projects.display();
education.display = function() {
if (education.schools.length > 0 || education.onlineCourses.length > 0) {
for (i in education.schools) {
$("#education").append(HTMLschoolStart);
var formattedSchoolName = HTMLschoolName.replace("%data%", education.schools[i].name).replace("#", education.schools[i].url);
var formattedSchoolDegree = HTMLschoolDegree.replace("%data%", education.schools[i].degree);
var formattedSchoolDates = HTMLschoolDates.replace("%data%", education.schools[i].dates);
var formattedSchoolLocation = HTMLschoolLocation.replace("%data%", education.schools[i].location);
var formattedSchoolMajor = HTMLschoolMajor.replace("%data%", education.schools[i].majors);
var formattedSchoolMinor = HTMLschoolMinor.replace("%data%", education.schools[i].minor);
$(".education-entry:last").append(formattedSchoolName + formattedSchoolDegree);
$(".education-entry:last").append(formattedSchoolDates);
$(".education-entry:last").append(formattedSchoolLocation);
$(".education-entry:last").append(formattedSchoolMajor);
$(".education-entry:last").append(formattedSchoolMinor);
}
if (education.onlineCourses.length > 0) {
$("#education").append(HTMLonlineClasses);
for (i in education.onlineCourses) {
$("#education").append(HTMLschoolStart);
var formattedOnlineTitle = HTMLonlineTitle.replace("%data%", education.onlineCourses[i].title).replace("#", education.onlineCourses[i].url);
var formattedOnlineSchool = HTMLonlineSchool.replace("%data%", education.onlineCourses[i].school);
var formattedOnlineDates = HTMLonlineDates.replace("%data%", education.onlineCourses[i].dates);
var formattedOnlineURL = HTMLonlineURL.replace("%data%", education.onlineCourses[i].url).replace("#", education.onlineCourses[i].url);
$(".education-entry:last").append(formattedOnlineTitle + formattedOnlineSchool);
$(".education-entry:last").append(formattedOnlineDates);
$(".education-entry:last").append(formattedOnlineURL);
}
}
}
};
education.display();
/**
* Programming Languages
*/
$(function() {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Languages'
},
xAxis: {
title: {
enabled: true,
text: 'Used (year)'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Duration (months)'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 250,
y: 0,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: 'Used in {point.x} for {point.y} month(s)'
}
}
},
series: [{
name: 'HTML/CSS',
color: 'rgba(223, 83, 83, .5)',
data: [
[2016, 11],
[2015, 11],
[2014, 11],
[2013, 8],
[2012, 4],
[2011, 12],
[2010, 8],
[2009, 8],
[2008, 4]
]
}, {
name: 'Python',
color: 'rgba(119, 152, 191, .5)',
data: [
[2016, 1],
[2015, 1]
]
}, {
name: 'SQL',
color: 'rgba(119, 152, 80, .5)',
data: [
[2016, 2]
]
}, {
name: 'C#',
color: 'rgba(170, 162, 30, .5)',
data: [
[2016, 2],
[2015, 4]
]
}, {
name: 'Ruby',
color: 'rgba(0, 102, 0, .5)',
data: [
[2015, 12],
[2014, 6]
]
}, {
name: 'Node JS',
color: 'rgba(0, 102, 0, .5)',
data: [
[2016, 8],
[2015, 2],
[2014, 4]
]
}, {
name: 'PHP',
color: 'rgba(204, 0, 0, .5)',
data: [
[2016, 1]
]
}, {
name: 'Java',
color: 'rgba(153, 51, 0, .5)',
data: [
[2016, 5],
[2013, 3],
[2011, 4],
[2010, 2]
]
}, {
name: 'Bootsrap',
color: 'rgba(0, 153, 102, .5)',
data: [
[2014, 2]
]
}, {
name: 'Javascript',
color: 'rgba(0, 102, 51, .5)',
data: [
[2014, 12],
[2012, 12],
[2010, 12],
[2008, 4]
]
}, {
name: 'Angular JS',
color: 'rgba(204, 102, 0, .5)',
data: [
[2013, 2.5]
]
}, {
name: 'jQuery',
color: 'rgba(210, 200, 0, .5)',
data: [
[2016, 3],
[2015, 1],
[2014, 1],
[2013, 1]
]
}]
});
});
$("#mapDiv").append(googleMap);