merges conflicts

vouis · Jul 19, 2016 · 48dda97 · 48dda97
2 parents 1ed1e3c + 7c381b4
commit 48dda97
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -1,9 +1,17 @@
+# Project Details
 ## How do I complete this project?
+Review the Online Resume [Project Rubric](https://review.udacity.com/?_ga=1.189245867.12280332.1465333852#!/projects/2962818615/rubric).
 
-1. Go to the [Javascript Basics course](https://www.udacity.com/course/ud804) and select "View Course Materials."
-2. Go through the videos and assignments in this course to learn the JavaScript necessary to build your resume.
-3. Review your work against the Project Rubric (on the next page).
-4. When you are satisfied with your project, submit it according to the Submission Instructions on the next page.
+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](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).
+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](https://github.com/udacity/frontend-nanodegree-resume) and begin building you resume.
+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**:
+```<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](https://review.udacity.com/?_ga=1.189245867.12280332.1465333852#!/projects/2962818615/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
@@ -29,50 +37,50 @@ Each string has a title that describes how it should be used. For instance, `HTM
 ### Your process:
 The resume has four distinct sections: work, education, projects and a header with biographical information. You’ll need to:
 
-1. Build four JSON objects, each one representing a different resume section. The objects that you create need to follow the schema below exactly. Property names are case-sensitive. Make sure your JSON objects are formatted correctly using <a href="http://jsonlint.com/" target="_blank">JSONlint.com</a>.
+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/) .
 
-* `bio` contains:
+  * `bio` contains:
 
             name : string
             role : string
             contacts : an object with
                   mobile: string
                   email: string 
                   github: string
-                  twitter: string 
+                  twitter: string (optional)
                   location: string
             welcomeMessage: string 
             skills: array of strings
-            biopic: url
+            biopic: string url
             display: function taking no parameters
 
-* `education` contains:
+  * `education` contains:
 
             schools: array of objects with
                  name: string
                  location: string
                  degree: string
                  majors: array of strings
-                 dates: integer (graduation date)
+                 dates: string (works with a hyphen between them)
                  url: string
-            onlineCourses: array with
+            onlineCourses: array of objects with
                  title: string
                  school: string
-                 date: integer (date finished)
+                 dates: string (works with a hyphen between them)
                  url: string
             display: function taking no parameters
 
-* `work` contains
+  * `work` contains
 
             jobs: array of objects with
                  employer: string 
                  title: string 
                  location: string 
-                 dates: string (works with a hyphen between them)
+                 dates: string (Can be 'in progress')
                  description: string 
             display: function taking no parameters
 
-* `projects` contains:
+  * `projects` contains:
 
             projects: array of objects with
                   title: string 
@@ -81,18 +89,18 @@ The resume has four distinct sections: work, education, projects and a header wi
                   images: array with string urls
             display: function taking no parameters
 
-2. Iterate through each JSON 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 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.
+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 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 within functions. And all of your functions should be encapsulated within the same objects containing your resume data. For instance, your functions for appending work experience elements to the page should be found within the same object containing data about your work experience.
-5. Your resume should also `console.log()` information about click locations. On line 90 in helper.js, you’ll find a jQuery onclick handler that you’ll need to modify to work with the `logClicks(x,y)` function above 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.
diff --git a/index.html b/index.html
@@ -14,6 +14,7 @@
 need to load. You'll see a lot of <link>s to CSS files for styles and
 <scripts> for JavaScript files to build interactions.
 -->
+<html>
 <head>
   <!-- This tells the browser how to read the document. -->
   <meta charset="utf-8">
@@ -43,12 +44,11 @@
   <script src="js/helper.js"></script>
 
   <!--
-  Uncomment the <script> tag below when you're ready to add an interactive
-  Google Map to your resume!
+  Uncomment the <script> tag below when you're ready to add an interactive Google Map to your resume!
   -->
-<!-- <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script> -->
+<!-- <script src="http://maps.googleapis.com/maps/api/js?libraries=places"></script> -->
 
-  <meta name="viewport" content="width=device-width">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
 </head>
 <body>
   <div id="main">
@@ -99,7 +99,7 @@ <h2 class="orange center-text">Let's Connect</h2>
   course.
   -->
 
-  <script type="text/javascript">
+  <script>
     // Notice how all of a sudden there's JavaScript inside this HTML
     // document? You can write JavaScript between <script> tags. At the end of your
     // JavaScript, don't forget the closing script tag with the slash (/).

diff --git a/js/helper.js b/js/helper.js
@@ -64,15 +64,16 @@ The Internationalize Names challenge found in the lesson Flow Control from JavaS
 */
 $(document).ready(function() {
   $('button').click(function() {
-    var iName = inName() || function(){};
-    $('#name').html(iName);
+    var $name = $('#name');
+    var iName = inName($name.text()) || function(){};
+    $name.html(iName);
   });
 });
 
 /*
 The next few lines about clicks are for the Collecting Click Locations quiz in the lesson Flow Control from JavaScript Basics.
 */
-clickLocations = [];
+var clickLocations = [];
 
 function logClicks(x,y) {
   clickLocations.push(