forked from udacity/frontend-nanodegree-resume
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
135 lines (116 loc) · 4.88 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<!--
This is an HTML document. It contains information about how elements in the website
are arranged. In other words, it describes the layout of a website.
I can't wait to see the resumes you put together!
Cameron Pittman, Udacity Course Developer
-->
<!--
The <head> of a website generally links to important resources the page will
need to load. You'll see a lot of <link>s to CSS files for styles and
<scripts> for JavaScript files to build interactions.
-->
<head>
<!-- This tells the browser how to read the document. -->
<meta charset="utf-8">
<!-- Tells the browser what the title of this page should be. -->
<title>Resume</title>
<!-- Load the page styles. -->
<link href="css/style.css" rel="stylesheet" type="text/css">
<!--
jQuery is a common JavaScript library for reading and making changes to the
Document Object Model (DOM). The DOM is a tree that contains information
about what is actually visible on a website.
While HTML is a static document, the browser converts HTML to the
DOM and the DOM can change. In fact, JavaScript's power comes from
its ability to manipulate the DOM, which is essentially a JavaScript
object. When JavaScript makes something interesting happen on a
website, it's likely the action happened because JavaScript changed
the DOM. jQuery is fast and easy to use, but it doesn't do anything
you can't accomplish with vanilla (regular) JavaScript.
-->
<script src="js/jQuery.js"></script>
<!-- More on helper.js in the class -->
<script src="js/helper.js"></script>
<!--Google Map to your resume! -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>
<meta name="viewport" content="width=device-width">
</head>
<body unresolved>
<div id="main">
<div id="header" class="center-content clearfix">
<ul id="topContacts" class='flex-box'></ul>
</div>
<div style='clear: both;'></div>
<div id="workExperience" class='gray'>
<h2>Work Experience</h2>
</div>
<div id="projects">
<h2>Projects</h2>
</div>
<div id="education" class='gray'>
<h2>Education</h2>
</div>
<div id="mapDiv">
<h2>Where I've Lived and Worked</h2>
</div>
<div id="letsConnect" class='dark-gray'>
<h2 class='orange center-text'>Let's Connect</h2>
<ul id="footerContacts" class="flex-box">
</ul>
</div>
</div>
<script src="js/resumeBuilder.js"></script>
<script type="text/javascript">
if(bio.skills.length>0){ //there are skills
//Set groundwork for HTML skills list- generate enclosing <ul> tags
$("#header").append(HTMLskillsStart);
//generate a list of skill items
for (var index=0; index< bio.skills.length; ++index)
{
var HTMLnextSkill= HTMLskills.replace("%data%",bio.skills[index]);
$("#skills").append(HTMLnextSkill); //adding next skill
}
} //skills added
var displayWork= function(){ //or function displayWork(){}
//adding jobs one by one
for (jobIndex in work.jobs)
{
$("#workExperience").append(HTMLworkStart); //new <div> entry into html
var HTMLworkEmployerData= HTMLworkEmployer.replace("%data%",work.jobs[jobIndex].employer);
var HTMLworkTitleData= HTMLworkTitle.replace("%data%",work.jobs[jobIndex].title);
$(".work-entry:last").append(HTMLworkEmployerData+HTMLworkTitleData);
var HTMLworkDatesData= HTMLworkDates.replace("%data%",work.jobs[jobIndex].dates_worked);
$(".work-entry:last").append(HTMLworkDatesData);
var HTMLworkDescriptionData= HTMLworkDescription.replace("%data%",work.jobs[jobIndex].description);
$(".work-entry:last").append(HTMLworkDescriptionData);
}
}
displayWork();
$("#main").append(internationalizeButton);
projects.display();
$("#mapDiv").append(googleMap);
if(document.getElementsByClassName('flex-item').length === 0) {
document.getElementById('topContacts').style.backgroundColor= "black";
}
if(document.getElementsByTagName('h1').length === 0) {
document.getElementById('header').style.backgroundColor= "black";
}
if(document.getElementsByClassName('work-entry').length === 0) {
document.getElementById('workExperience').style.backgroundColor = "black";
}
if(document.getElementsByClassName('project-entry').length === 0) {
document.getElementById('projects').style.backgroundColor= "rgb(0,0,0)";
}
if(document.getElementsByClassName('education-entry').length === 0) {
document.getElementById('education').style.backgroundColor= "black";
}
if(document.getElementsByClassName('flex-item').length === 0) {
document.getElementById('letsConnect').style.backgroundColor= "black";
}
if(document.getElementById('map') === null) {
document.getElementById('mapDiv').style.backgroundColor= "black";
}
</script>
</body>
</html>