diff --git a/README.md b/README.md index f5d83f749e..88fc31ae43 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,95 @@ -udresume -======== +## How do I complete this project? + +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. + +### By the end: +Your resume will look something like this +![](http://i.imgur.com/pWU1Xbl.png) + +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 `
` 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 JSONs, each one representing a different resume section. The objects that you create need to follow the names within the schema below exactly. Make sure your JSONs are formatted correctly using JSONlint.com. + +* `bio` contains: + + name : string + role : string + contacts : an object with + mobile: string + email: string + github: string + twitter: string + location: string + welcomeMessage: string + skills: array of strings + biopic: url + display: function taking no parameters + +* `education` contains: + + schools: array of objects with + name: string + location: string + degree: string + majors: array of strings + dates: integer (graduation date) + url: string + onlineCourses: array with + title: string + school: string + date: integer (date finished) + url: string + display: function taking no parameters + +* `work` contains + + jobs: array of objects with + employer: string + title: string + location: string + dates: string (works with a hyphen between them) + 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 JSON 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 `
`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 JSONs. +* 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. To add it, append the googleMap string to `
`. +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. +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/css/style.css b/css/style.css index 4126b7825f..450f9aef56 100644 --- a/css/style.css +++ b/css/style.css @@ -1,7 +1,7 @@ -*{ - padding:0; - margin:0; - font-family: 'Roboto', sans-serif; +* { + padding:0; + margin:0; + font-family: 'Roboto', sans-serif; } .clearfix { @@ -14,7 +14,6 @@ } h1 { - font-size: 40px; color: #F5A623; line-height: 48px; @@ -22,7 +21,7 @@ h1 { } h2 { - font-style: bold; + font-weight: bold; font-size: 24px; color: #999999; line-height: 29px; @@ -37,7 +36,7 @@ h3 { } h4 { - font-style: bold; + font-weight: bold; font-size: 14px; color: #4A4A4A; line-height: 17px; @@ -140,7 +139,6 @@ ul { list-style-type: none; } - .biopic { float: left; padding: 10px; @@ -152,7 +150,6 @@ img { padding: 10px; } - /* Bar chart stuff */ .chart div { font: 10px sans-serif; @@ -215,4 +212,4 @@ span { .biopic { display: block; } -} \ No newline at end of file +} diff --git a/index.html b/index.html index dda8f76ec5..4429ec0ff7 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,14 @@ for JavaScript files to build interactions. --> - + + + + + Resume + + + + Hello world! - \ No newline at end of file + + diff --git a/js/helper.js b/js/helper.js index dd8ea8d2fd..bec3f36d19 100644 --- a/js/helper.js +++ b/js/helper.js @@ -12,51 +12,51 @@ 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 = ""; -var googleMap = "
      "; +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 = ''; +var googleMap = '
        '; /* @@ -67,7 +67,7 @@ $(document).ready(function() { var iName = inName() || function(){}; $('#name').html(iName); }); -}) +}); /* The next few lines about clicks are for the Collecting Click Locations quiz in Lesson 2. @@ -77,11 +77,11 @@ clickLocations = []; function logClicks(x,y) { clickLocations.push( { - "x": x, - "y": y + x: x, + y: y } ); - console.log("x location: " + x + "; y location: " + y); + console.log('x location: ' + x + '; y location: ' + y); } $(document).click(function(loc) { @@ -103,7 +103,7 @@ Start here! initializeMap() is called when page is loaded. */ function initializeMap() { - var locations; + var locations; var mapOptions = { disableDefaultUI: true @@ -119,13 +119,13 @@ function initializeMap() { 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) { @@ -149,8 +149,8 @@ function initializeMap() { function createMapMarker(placeData) { // The next lines save location data from the search result object to local variables - var lat = placeData.geometry.location.k; // latitude from the place service - var lon = placeData.geometry.location.B; // longitude from the place service + 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 @@ -160,7 +160,7 @@ function initializeMap() { 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. @@ -188,7 +188,7 @@ function initializeMap() { */ function callback(results, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { - createMapMarker(results[0]) + createMapMarker(results[0]); } } @@ -201,16 +201,16 @@ function initializeMap() { // 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 (place in locations) { + 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 + // 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); } @@ -225,8 +225,8 @@ function initializeMap() { // 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! @@ -235,7 +235,7 @@ 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 +// 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