diff --git a/src/assets/main.css b/src/assets/main.css index 53f47958..f0eb1eb3 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -2,14 +2,19 @@ body { font-family: 'Helvetica Neue', serif; font-size: 18px; + background: #FF1616; } #badges { text-align: center; } +h1 { + color: #FFFFFF +} + .course { - background: #F5F5F5; + background: #2FBF3B; border-radius: 5px; border: 1px solid #ccc; box-shadow: 1px 1px 5px #EAEAEA; @@ -21,7 +26,7 @@ body { } .course h3 { - color: #999; + color: #FFFFFF; font-size: 1.9rem; font-weight: 200; min-height: 80px;; diff --git a/src/assets/main.js b/src/assets/main.js index 25601766..e3ada49a 100644 --- a/src/assets/main.js +++ b/src/assets/main.js @@ -1,5 +1,37 @@ $(function() { + $.ajax({ + url: 'https://www.codeschool.com/users/HelloWorld333.json', + dataType: 'jsonp', + success: function(response) { + console.log("response", response); + addCourses(response.courses.completed); + } + }); + function addCourses(courses) { - // your code will go here + var $badges = $('#badges'); + courses.forEach(function(course) { + var $course = $('
', { + 'class': 'course' + }).appendTo($badges); + + $('

', { + text: course.title + }).appendTo($course); + + $('', { + src: course.badge + }).appendTo($course); + + $('', { + 'class': 'btn btn-lg btn-default', + target: '_blank', + href: course.url, + text: 'See Course' + }).appendTo($course); + + }); + + } }); diff --git a/src/index.html b/src/index.html index a1951a6a..17d650e6 100644 --- a/src/index.html +++ b/src/index.html @@ -10,11 +10,15 @@
-

jQuery Badges

+

jQuery Badges

+
+

Santa is here!!!

+
Santa
+
+
-