diff --git a/.test-summary/TEST_SUMMARY.md b/.test-summary/TEST_SUMMARY.md new file mode 100644 index 000000000..4bbb917b6 --- /dev/null +++ b/.test-summary/TEST_SUMMARY.md @@ -0,0 +1,9 @@ +## Test Summary + +**Mentors**: For more information on how to review homework assignments, please refer to the [Review Guide](https://github.com/HackYourFuture/mentors/blob/main/assignment-support/review-guide.md). + +### 2-Browsers - Week1 + +| Exercise | Passed | Failed | ESLint | +|--------------|--------|--------|--------| +| ex1-bookList | 6 | - | ✓ | diff --git a/2-Browsers/Week1/assignment/ex1-bookList/index.js b/2-Browsers/Week1/assignment/ex1-bookList/index.js index 24a92487d..90cde9dfe 100644 --- a/2-Browsers/Week1/assignment/ex1-bookList/index.js +++ b/2-Browsers/Week1/assignment/ex1-bookList/index.js @@ -18,9 +18,27 @@ https://hackyourfuture.github.io/example-pages/Browsers/Week1/1-booklist/ //cspell: enable function createBookList(books) { - // TODO your code goes in here, return the ul element + const ul = document.createElement ('ul'); + books.forEach( book => { + const li = document.createElement ('li'); + const p = document.createElement ( 'p'); + p.textContent = `${book.title} - ${book.author} `; + const img = document.createElement ('img'); + img.src = `https://covers.openlibrary.org/b/isbn/${book.isbn}-M.jpg`; + img.alt = `${book.title} cover`; + li.appendChild (p); + li.appendChild (img); + if (book.alreadyRead) { + li.style.backgroundColor = 'green'; + } + else + { li.style.backgroundColor = 'red'} ; + ul.appendChild (li); + }); + return ul; } + function main() { const myBooks = [ { diff --git a/2-Browsers/Week1/assignment/ex1-bookList/style.css b/2-Browsers/Week1/assignment/ex1-bookList/style.css index 55ad76b29..33a6e798d 100644 --- a/2-Browsers/Week1/assignment/ex1-bookList/style.css +++ b/2-Browsers/Week1/assignment/ex1-bookList/style.css @@ -1 +1,37 @@ /* Write your style here */ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + margin: 0; + padding: 20px; +} +h1 { + text-align: center; + color: #333; +} +ul { + list-style-type: none; + padding: 0; + display : grid ; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap : 16px; + +} +li { + background: #fff; + margin: 10px 0; + padding: 15px; + border-radius: 5px; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); +} +img { + width: 100% ; + height: auto ; + border -radius: 5px ; + display : block ; + +} +p { + margin: 0; + padding: 0; +} diff --git a/2-Browsers/Week1/test-reports/ex1-bookList.report.txt b/2-Browsers/Week1/test-reports/ex1-bookList.report.txt new file mode 100644 index 000000000..d7f690900 --- /dev/null +++ b/2-Browsers/Week1/test-reports/ex1-bookList.report.txt @@ -0,0 +1,18 @@ +*** Unit Test Error Report *** + + PASS .dist/2-Browsers/Week1/unit-tests/ex1-bookList.test.js + br-wk1-ex1-bookList + ✅ HTML should be syntactically valid (136 ms) + ✅ should have all TODO comments removed + ✅ should contain a