69 |
70 |
72 |
73 |
75 |
76 |
89 |
90 |
91 |
92 |
93 |
94 |
99 |
100 |
101 |
102 |
109 |
110 |
147 |
148 |
149 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Project Details
2 | ## How do I complete this project?
3 | Review the Online Resume [Project Rubric](https://review.udacity.com/?_ga=1.189245867.12280332.1465333852#!/projects/2962818615/rubric).
4 |
5 | 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.
6 | 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.
7 | 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.
8 | 4. If you need a refresher on JavaScript syntax, go to the [Javascript Basics](https://classroom.udacity.com/nanodegrees/nd001/parts/0011345406/modules/296281861575460/lessons/1946788554/concepts/25505685350923) course; if you would like to understand how this project is manipulating and traversing the DOM, check out [Intro to jQuery](https://classroom.udacity.com/nanodegrees/nd001/parts/0011345406/modules/296281861575461/lessons/3314378535/concepts/33166386820923).
9 | 5. Go through the videos and assignments in this course to learn the JavaScript necessary to build your resume.
10 | 6. Fork the project repo from [Github](https://github.com/udacity/frontend-nanodegree-resume) and begin building you resume.
11 | 7. If you are prompted to do so, you may want to get a [Google Maps API key](https://developers.google.com/maps/documentation/javascript/get-api-key), and include it as the value of the `key` parameter when loading the Google Maps API in **index.html**:
12 | ``` ``` 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.**
13 | 8. Check your work against the [Project Rubric](https://review.udacity.com/?_ga=1.189245867.12280332.1465333852#!/projects/2962818615/rubric).
14 | 9. When you are satisfied with your project, submit it according to the Submission Instructions below.
15 |
16 | ### By the end:
17 | Your resume will look something like this
18 | 
19 |
20 | And your repository will include the following files:
21 |
22 | * **index.html**: The main HTML document. Contains links to all of the CSS and JS resources needed to render the resume, including resumeBuilder.js.
23 | * **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.
24 | * **js/resumeBuilder.js**: This file is empty. You should write your code here.
25 | * **js/jQuery.js**: The jQuery library.
26 | * **css/style.css**: Contains all of the CSS needed to style the page.
27 | * **README.md**:
28 | The GitHub readme file.
29 | * and some images in the images directory.
30 |
31 | ## Your starting point...
32 | ### js/helper.js
33 | 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%`.
34 |
35 | Each string has a title that describes how it should be used. For instance, `HTMLworkStart` should be the first `
` in the Work section of the resume. `HTMLschoolLocation` contains a `%data%` placeholder which should be replaced with the location of one of your schools.
36 |
37 | ### Your process:
38 | The resume has four distinct sections: work, education, projects and a header with biographical information. You’ll need to:
39 |
40 | 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](http://jshint.com/).
41 |
42 | * `bio` contains:
43 |
44 | name : string
45 | role : string
46 | contacts : an object with
47 | mobile: string
48 | email: string
49 | github: string
50 | twitter: string (optional)
51 | location: string
52 | welcomeMessage: string
53 | skills: array of strings
54 | biopic: string url
55 | display: function taking no parameters
56 |
57 | * `education` contains:
58 |
59 | schools: array of objects with
60 | name: string
61 | location: string
62 | degree: string
63 | majors: array of strings
64 | dates: string (works with a hyphen between them)
65 | url: string (optional)
66 | onlineCourses: array of objects with
67 | title: string
68 | school: string
69 | dates: string (works with a hyphen between them)
70 | url: string
71 | display: function taking no parameters
72 |
73 | * `work` contains
74 |
75 | jobs: array of objects with
76 | employer: string
77 | title: string
78 | location: string
79 | dates: string (Can be 'in progress')
80 | description: string
81 | display: function taking no parameters
82 |
83 | * `projects` contains:
84 |
85 | projects: array of objects with
86 | title: string
87 | dates: string (works with a hyphen between them)
88 | description: string
89 | images: array with string urls
90 | display: function taking no parameters
91 |
92 | 2. Iterate through each javaScript object and append its information to index.html in the correct section.
93 | * 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.
94 | * Pay close attention to the ids of the `
`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()`
95 | * 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.
96 | * Here’s an example of some code that would add the location of one of your companies to the page:
97 | * `var formattedLocation = HTMLworkLocation.replace("%data%", work.jobs[job].location);`
98 | * `$(".work-entry:last").append(formattedLocation);`
99 | * Use the mockup at the page of this document as a guide for the order in which you should append elements to the page.
100 | 3. The resume includes an interactive map. Do the following to add it.
101 | * In resumeBuilder.js, append the googleMap string to `
`.
102 | * In index.html, uncomment the Google script element: ``
103 | * In helper.js, at the bottom of the file, uncomment code to initialize map and set fitBounds.
104 | 4. All of your code for adding elements to the resume should be contained within functions.
105 | 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 =`
106 | 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.
107 |
108 | # Archival Note
109 | 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:
110 | - Utilize the https://knowledge.udacity.com/ forum to seek help on content-specific issues.
111 | - 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](https://udacity.zendesk.com/hc/en-us/requests/new) and [enterprise learners](https://udacityenterprise.zendesk.com/hc/en-us/requests/new?ticket_form_id=360000279131).
--------------------------------------------------------------------------------
/js/helper.js:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | 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.
4 |
5 | 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.
6 |
7 | Cameron Pittman
8 | */
9 |
10 |
11 | /*
12 | These are HTML strings. As part of the course, you'll be using JavaScript functions
13 | replace the %data% placeholder text you see in them.
14 | */
15 | var HTMLheaderName = '
%data%
';
16 | var HTMLheaderRole = '%data%';
17 |
18 | var HTMLcontactGeneric = '
%contact%%data%
';
19 | var HTMLmobile = '
mobile%data%
';
20 | var HTMLemail = '
email%data%
';
21 | var HTMLtwitter = '
twitter%data%
';
22 | var HTMLgithub = '
github%data%
';
23 | var HTMLblog = '
blog%data%
';
24 | var HTMLlocation = '
location%data%
';
25 |
26 | var HTMLbioPic = '';
27 | var HTMLwelcomeMsg = '%data%';
28 |
29 | var HTMLskillsStart = '
';
56 | var HTMLonlineURL = ' %data%';
57 |
58 | var internationalizeButton = '';
59 | var googleMap = '';
60 |
61 |
62 | /*
63 | The Internationalize Names challenge found in the lesson Flow Control from JavaScript Basics requires you to 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.
64 | */
65 | $(document).ready(function() {
66 | $('button').click(function() {
67 | var $name = $('#name');
68 | var iName = inName($name.text()) || function(){};
69 | $name.html(iName);
70 | });
71 | });
72 |
73 | /*
74 | The next few lines about clicks are for the Collecting Click Locations quiz in the lesson Flow Control from JavaScript Basics.
75 | */
76 | var clickLocations = [];
77 |
78 | function logClicks(x,y) {
79 | clickLocations.push(
80 | {
81 | x: x,
82 | y: y
83 | }
84 | );
85 | console.log('x location: ' + x + '; y location: ' + y);
86 | }
87 |
88 | $(document).click(function(loc) {
89 | // your code goes here!
90 | });
91 |
92 |
93 |
94 | /*
95 | This is the fun part. Here's where we generate the custom Google Map for the website.
96 | See the documentation below for more details.
97 | https://developers.google.com/maps/documentation/javascript/reference
98 | */
99 | var map; // declares a global map variable
100 |
101 |
102 | /*
103 | Start here! initializeMap() is called when page is loaded.
104 | */
105 | function initializeMap() {
106 |
107 | var locations;
108 |
109 | var mapOptions = {
110 | disableDefaultUI: true
111 | };
112 |
113 | /*
114 | For the map to be displayed, the googleMap var must be
115 | appended to #mapDiv in resumeBuilder.js.
116 | */
117 | map = new google.maps.Map(document.querySelector('#map'), mapOptions);
118 |
119 |
120 | /*
121 | locationFinder() returns an array of every location string from the JSONs
122 | written for bio, education, and work.
123 | */
124 | function locationFinder() {
125 |
126 | // initializes an empty array
127 | var locations = [];
128 |
129 | // adds the single location property from bio to the locations array
130 | locations.push(bio.contacts.location);
131 |
132 | // iterates through school locations and appends each location to
133 | // the locations array. Note that forEach is used for array iteration
134 | // as described in the Udacity FEND Style Guide:
135 | // https://udacity.github.io/frontend-nanodegree-styleguide/javascript.html#for-in-loop
136 | education.schools.forEach(function(school){
137 | locations.push(school.location);
138 | });
139 |
140 | // iterates through work locations and appends each location to
141 | // the locations array. Note that forEach is used for array iteration
142 | // as described in the Udacity FEND Style Guide:
143 | // https://udacity.github.io/frontend-nanodegree-styleguide/javascript.html#for-in-loop
144 | work.jobs.forEach(function(job){
145 | locations.push(job.location);
146 | });
147 |
148 | return locations;
149 | }
150 |
151 | /*
152 | createMapMarker(placeData) reads Google Places search results to create map pins.
153 | placeData is the object returned from search results containing information
154 | about a single location.
155 | */
156 | function createMapMarker(placeData) {
157 |
158 | // The next lines save location data from the search result object to local variables
159 | var lat = placeData.geometry.location.lat(); // latitude from the place service
160 | var lon = placeData.geometry.location.lng(); // longitude from the place service
161 | var name = placeData.formatted_address; // name of the place from the place service
162 | var bounds = window.mapBounds; // current boundaries of the map window
163 |
164 | // marker is an object with additional data about the pin for a single location
165 | var marker = new google.maps.Marker({
166 | map: map,
167 | position: placeData.geometry.location,
168 | title: name
169 | });
170 |
171 | // infoWindows are the little helper windows that open when you click
172 | // or hover over a pin on a map. They usually contain more information
173 | // about a location.
174 | var infoWindow = new google.maps.InfoWindow({
175 | content: name
176 | });
177 |
178 | // hmmmm, I wonder what this is about...
179 | google.maps.event.addListener(marker, 'click', function() {
180 | // your code goes here!
181 | });
182 |
183 | // this is where the pin actually gets added to the map.
184 | // bounds.extend() takes in a map location object
185 | bounds.extend(new google.maps.LatLng(lat, lon));
186 | // fit the map to the new marker
187 | map.fitBounds(bounds);
188 | // center the map
189 | map.setCenter(bounds.getCenter());
190 | }
191 |
192 | /*
193 | callback(results, status) makes sure the search returned results for a location.
194 | If so, it creates a new map marker for that location.
195 | */
196 | function callback(results, status) {
197 | if (status == google.maps.places.PlacesServiceStatus.OK) {
198 | createMapMarker(results[0]);
199 | }
200 | }
201 |
202 | /*
203 | pinPoster(locations) takes in the array of locations created by locationFinder()
204 | and fires off Google place searches for each location
205 | */
206 | function pinPoster(locations) {
207 |
208 | // creates a Google place search service object. PlacesService does the work of
209 | // actually searching for location data.
210 | var service = new google.maps.places.PlacesService(map);
211 |
212 | // Iterates through the array of locations, creates a search object for each location
213 | locations.forEach(function(place){
214 | // the search request object
215 | var request = {
216 | query: place
217 | };
218 |
219 | // Actually searches the Google Maps API for location data and runs the callback
220 | // function with the search results after each search.
221 | service.textSearch(request, callback);
222 | });
223 | }
224 |
225 | // Sets the boundaries of the map based on pin locations
226 | window.mapBounds = new google.maps.LatLngBounds();
227 |
228 | // locations is an array of location strings returned from locationFinder()
229 | locations = locationFinder();
230 |
231 | // pinPoster(locations) creates pins on the map for each location in
232 | // the locations array
233 | pinPoster(locations);
234 |
235 | }
236 |
237 | /*
238 | Uncomment the code below when you're ready to implement a Google Map!
239 | */
240 |
241 | // Calls the initializeMap() function when the page loads
242 | //window.addEventListener('load', initializeMap);
243 |
244 | // Vanilla JS way to listen for resizing of the window
245 | // and adjust map bounds
246 | //window.addEventListener('resize', function(e) {
247 | //Make sure the map bounds get updated on page resize
248 | // map.fitBounds(mapBounds);
249 | //});
250 |
--------------------------------------------------------------------------------