diff --git a/src/assets/main.css b/src/assets/main.css index 2a043c9e..5436198a 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -4,15 +4,20 @@ body { font-size: 18px; } +#badges { + text-align: center; +} + .course { background: #F5F5F5; - border: 1px solid #ccc; border-radius: 5px; + border: 1px solid #ccc; box-shadow: 1px 1px 5px #EAEAEA; + display: inline-block; height: 350px; margin: 20px 10px; padding: 15px 10px; - text-align: center; + width: 200px; } .course h3 { @@ -28,3 +33,7 @@ body { width: 150px; margin-bottom: 20px; } + +.course a { + display: block; +} diff --git a/src/index.html b/src/index.html index af7c7edc..a1951a6a 100644 --- a/src/index.html +++ b/src/index.html @@ -11,7 +11,7 @@

jQuery Badges

-
+
diff --git a/test/portfolio.spec.js b/test/badges.spec.js similarity index 88% rename from test/portfolio.spec.js rename to test/badges.spec.js index fd792ea2..25821d9d 100644 --- a/test/portfolio.spec.js +++ b/test/badges.spec.js @@ -107,10 +107,10 @@ describe('The webpage', () => { assert(!!firstCourse); }); - it('should have elements with the correct class name', () => { - let firstCourse = badges.firstChild; - let classes = Array.from(firstCourse.classList); - assert(!!classes.find((className) => className === 'col-md-3')); + it('should have child with the course class name', () => { + const firstCourse = badges.firstChild; + const classes = Array.from(firstCourse.classList); + assert(!!classes.find((className) => className === 'course')); }); it('should have x elements within the #badges', () => { @@ -118,18 +118,6 @@ describe('The webpage', () => { assert(courses.length === mockData.courses.completed.length) }); - it('should have a div as a child', () => { - const firstCourseDiv = badges.firstChild.firstChild; - assert(!!firstCourseDiv); - assert(firstCourseDiv.nodeName.toLowerCase() === 'div') - }); - - it('should have child with the course class name', () => { - const firstCourseDiv = badges.firstChild.firstChild; - const classes = Array.from(firstCourseDiv.classList); - assert(!!classes.find((className) => className === 'course')); - }); - it('should have h3 tags with the course titles', () => { const courses = Array.from(badges.querySelectorAll('.course')); courses.forEach((course, i) => {