Master

LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2016 Code School
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,17 +1,65 @@
-# jQuery Badges
+# Use jQuery to Fetch and Show Code School Badges Using Ajax
 
-Welcome to the jQuery Badges Project! For this project, you'll be creating a web app that displays all of the courses you've taken on Code School by displaying its titles and badges. We will test your knowledge of JavaScript and jQuery to make AJAX requests, and create DOM objects programmatically.
+You’ll build a personal web page that displays the courses you’ve completed on Code School by pulling data from the Code School website.
 
-Please follow the instructions below to complete the project. Be sure to run tests to make sure your tests are passing before submitting your code.
+![Poster](http://courseware.codeschool.com.s3.amazonaws.com/projects/use-jquery-to-fetch-and-show-code-school-badges-using-ajax.png)
 
-## Getting Started
+## What You’ll Use
 
-To get started with this project, head over to the [jQuery Badges](#) project on Code School, and begin!
+- JavaScript with jQuery
+- Ajax calls
+- DOM elements
+- Loops
 
-For further instructions on how to get the app setup locally, visit our wiki:
+## What You’ll Learn
 
-1. [Welcome](https://github.com/codeschool/project-jquery-badges/wiki)
-2. [Prerequisites](https://github.com/codeschool/project-jquery-badges/wiki/Prerequisites)
-3. [Setup](https://github.com/codeschool/project-jquery-badges/wiki/Setup)
-4. [What we'll build](https://github.com/codeschool/project-jquery-badges/wiki/What-we'll-build)
-5. [Step by step](https://github.com/codeschool/project-jquery-badges/wiki/Step-by-step)
+You will further your JavaScript and jQuery skills, as well as feel more comfortable writing JavaScript code in a real-world scenario.
+
+## Live Demo
+
+[Check out this link](https://codeschool-project-demos.github.io/jQueryBadgesProject/) to see a working version of this project. Feel free to customize your project even further by adding more custom CSS styles to it once you've completed the steps.
+
+You’ll build a personal web page that displays the courses you’ve completed on Code School by pulling data from the Code School website.
+
+## Setup Instructions
+
+Once you have cloned the forked repository, go into the directory containing the project and look for the `/src` directory. This is the directory where you will be making changes when you start following the step-by-step instructions. You can simply open those files in a text editor and get started.
+
+In this project, all of your changes will happen in the file called `/src/assets/main.js`.
+
+
+## Tasks
+
+Complete the following tasks to finish this project.
+
+### Make an Ajax Call
+
+Let's start by finding your `Report Card URL` _([click here to see how](https://github.com/codeschool/jQueryBadgesProject/wiki/How-to-get-your-Report-Card-URL))_ on CodeSchool.com and make an Ajax request that follows the following requirements: - Make an Ajax request to the `Report Card URL` you found on CodeSchool.com - Set the `dataType` as `jsonp` - Pass a `success` callback _We made a [sample Ajax request](https://github.com/codeschool/project-jquery-badges/wiki/Sample-Report-Card-Ajax-Request) available to help you with this task._	MENU
+
+### An Element per Completed Course
+
+By now, our Ajax call will have returned a response object that contains an array field called `response.courses.completed`. Let's add one `div` element per item in the `courses.completed` array inside of the `#badges` element. Add the CSS class `course` to each `div` element we add to `#badges`.	MENU
+
+### Adding Course Titles
+
+Let's add an `h3` tag inside each of the `.course` elements we are generating. These `h3` tags should have the `title` property of each course as its contents.	MENU
+
+### Adding Course Images
+
+This time, let's add an `img` tag inside our `.course` elements. These images should have each course's `badge` property as its `src` attribute.	MENU
+
+### Adding Course Buttons
+
+Now let's add an `a` tag to our `.course` elements. These anchor tags need to include: - the `href` attribute set as each course's `url` property - the `target` attribute set as `_blank` - the `btn` & `btn-primary` CSS classes - `See Course` as its text contents	MENU
+
+## Next Steps
+
+Now that you’ve completed this project, you should make it available online so you can share your progress with others! One way to do this is by using GitHub Pages.
+
+To deploy your `/src` directory to GitHub Pages, be sure to commit all of your changes and make a new branch called `gh-pages`. Once you are checked into the `gh-pages` branch, run the following command:
+
+```
+git subtree push --prefix src origin gh-pages
+```
+
+This will push the `src` folder up to GitHub on the `gh-pages` branch. After that, you should be able to open up `http://username.github.io/jQueryBadgesProject`, where `username` is your GitHub username.

package.json

@@ -5,13 +5,15 @@
   "private": true,
   "scripts": {
     "start": "browser-sync start --server ./src --files ./src",
-    "test": "mocha -t 20000 test/*.spec.js",
+    "test": "mocha -t 20000 --compilers js:babel-register test/*.spec.js",
     "test-watch": "npm test -- --bail --watch",
     "deploy:github-pages": "git subtree push --prefix src origin gh-pages"
   },
   "author": "Sergio Cruz <[email protected]>",
   "license": "MIT",
   "devDependencies": {
+    "babel-preset-es2015": "^6.18.0",
+    "babel-register": "^6.18.0",
     "browser-sync": "^2.14.0",
     "chai": "^3.5.0",
     "javascript-sandbox": "git+https://github.com/codeschool/javascript-sandbox.git",
@@ -20,7 +22,10 @@
     "sinon": "^1.17.5"
   },
   "engines": {
-    "node": ">=6.2",
-    "npm": ">=3.8"
+    "node": ">=4.6",
+    "npm": ">=2.15"
+  },
+  "babel": {
+    "presets": ["es2015"]
   }
 }

test/badges.spec.js

@@ -7,7 +7,7 @@ const sinon = require('sinon');
 const srcScript = fs.readFileSync('./src/assets/main.js', 'utf8');
 
 const scriptRegex = /<\s*script[\s\S]*?>[\s\S]*?<\s*\/\s*script\s*>/ig;
-const codeschoolRegex = /https:\/\/www\.codeschool\.com\/users\/\d+\.json/i;
+const codeschoolRegex = /https:\/\/www\.codeschool\.com\/users\/.+\.json/i;
 
 // HTML Page
 let srcHtml = fs.readFileSync('./src/index.html', 'utf8');