diff --git a/.test-summary/TEST_SUMMARY.md b/.test-summary/TEST_SUMMARY.md new file mode 100644 index 000000000..7bd537db6 --- /dev/null +++ b/.test-summary/TEST_SUMMARY.md @@ -0,0 +1,13 @@ +## 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 | - | ✓ | +| ex2-aboutMe | 4 | - | ✓ | +| ex3-hijackLogo | 3 | - | ✓ | +| ex4-whatsTheTime | 6 | - | ✓ | +| ex5-catWalk | 5 | - | ✓ | diff --git a/2-Browsers/Week1/assignment/ex1-bookList/index.js b/2-Browsers/Week1/assignment/ex1-bookList/index.js index 24a92487d..30f39ac52 100644 --- a/2-Browsers/Week1/assignment/ex1-bookList/index.js +++ b/2-Browsers/Week1/assignment/ex1-bookList/index.js @@ -18,7 +18,38 @@ 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 listBooks = document.createElement('ul'); + listBooks.classList.add('list__books'); + + books.forEach((book) => { + const paragraph = document.createElement('p'); + paragraph.classList.add('title'); + + const itemBook = document.createElement('li'); + itemBook.classList.add('item__book'); + + // if (book.alreadyRead) { + // itemBook.classList.add('item__book-read'); + // } else { + // itemBook.classList.add('item__book-not-read'); + // } + book.alreadyRead + ? itemBook.classList.add('item__book-read') + : itemBook.classList.add('item__book-not-read'); + + const imgBook = document.createElement('img'); + imgBook.classList.add('img__book'); + imgBook.src = book.image; + imgBook.alt = `Cover of ${book.title} by ${book.author}`; + // paragraph.textContent = book.title + ' ' + book.author; + paragraph.textContent = `${book.title} ${book.author}`; + + itemBook.appendChild(imgBook); + itemBook.appendChild(paragraph); + listBooks.appendChild(itemBook); + }); + + return listBooks; } function main() { @@ -28,18 +59,21 @@ function main() { author: 'Don Norman', isbn: '978-0465050659', alreadyRead: false, + image: 'assets/the_design_of_everyday_things.jpg', }, { title: 'The Most Human Human', author: 'Brian Christian', isbn: '978-1617933431', alreadyRead: true, + image: 'assets/the_most_human_human.jpg', }, { title: 'The Pragmatic Programmer', author: 'Andrew Hunt', isbn: '978-0201616224', alreadyRead: true, + image: 'assets/the_pragmatic_programmer.jpg', }, ]; diff --git a/2-Browsers/Week1/assignment/ex1-bookList/style.css b/2-Browsers/Week1/assignment/ex1-bookList/style.css index 55ad76b29..d5e2deae1 100644 --- a/2-Browsers/Week1/assignment/ex1-bookList/style.css +++ b/2-Browsers/Week1/assignment/ex1-bookList/style.css @@ -1 +1,18 @@ -/* Write your style here */ +.list__books { + list-style-type: none; + display: flex; + gap: 25px; + flex-wrap: wrap; +} + +.item__book { + padding: 10px; +} + +.item__book-read { + background-color: green; +} + +.item__book-not-read { + background-color: red; +} diff --git a/2-Browsers/Week1/assignment/ex2-aboutMe/index.js b/2-Browsers/Week1/assignment/ex2-aboutMe/index.js index a03686b70..740c86216 100644 --- a/2-Browsers/Week1/assignment/ex2-aboutMe/index.js +++ b/2-Browsers/Week1/assignment/ex2-aboutMe/index.js @@ -8,4 +8,12 @@ Full description at: https://github.com/HackYourFuture/Assignments/tree/main/2-B 3. Look in the css file! ------------------------------------------------------------------------------*/ -// TODO add your JavaScript code here. +document.getElementById('nickname').textContent = 'Nikita'; +document.getElementById('fav-food').textContent = 'Pasta'; +document.getElementById('hometown').textContent = 'Moscow'; + +document + .querySelectorAll('li') + .forEach((item) => item.classList.add('list-item')); + + diff --git a/2-Browsers/Week1/assignment/ex2-aboutMe/style.css b/2-Browsers/Week1/assignment/ex2-aboutMe/style.css index 4e9cc415c..c24757129 100644 --- a/2-Browsers/Week1/assignment/ex2-aboutMe/style.css +++ b/2-Browsers/Week1/assignment/ex2-aboutMe/style.css @@ -1 +1,3 @@ -/* 3. Add a css rule for .list-item to make the color red. */ +.list-item { + color: red; +} diff --git a/2-Browsers/Week1/assignment/ex3-hijackLogo.js b/2-Browsers/Week1/assignment/ex3-hijackLogo.js index 1b3d596e9..366cfe69f 100644 --- a/2-Browsers/Week1/assignment/ex3-hijackLogo.js +++ b/2-Browsers/Week1/assignment/ex3-hijackLogo.js @@ -7,7 +7,15 @@ Full description at: https://github.com/HackYourFuture/Assignments/tree/main/2-B HackYourFuture logo instead. ------------------------------------------------------------------------------*/ function hijackGoogleLogo() { - // TODO your code goes in here -} - -hijackGoogleLogo(); + const googleLogo = document.querySelector('.lnXdpd'); + + if (googleLogo) { + const newLogoUrl = 'https://github.com/HackYourFuture/Assignments/blob/main/assets/hyf-logo-black-bg-small.png'; + + googleLogo.src = newLogoUrl; + googleLogo.srcset = newLogoUrl; + } + } + + hijackGoogleLogo(); + \ No newline at end of file diff --git a/2-Browsers/Week1/assignment/ex4-whatsTheTime/index.js b/2-Browsers/Week1/assignment/ex4-whatsTheTime/index.js index 30dbdd61d..4590af630 100644 --- a/2-Browsers/Week1/assignment/ex4-whatsTheTime/index.js +++ b/2-Browsers/Week1/assignment/ex4-whatsTheTime/index.js @@ -6,8 +6,18 @@ Full description at: https://github.com/HackYourFuture/Assignments/tree/main/2-B second). Use `setInterval()` to make sure the time stays current. 2. Have the function execute when it's loading in the browser. ------------------------------------------------------------------------------*/ + +const container = document.querySelector('body'); +const titleTime = document.createElement('h1'); +titleTime.textContent = 'Loading...'; +container.appendChild(titleTime); + function addCurrentTime() { - // TODO complete this function + let currentTime = new Date().toLocaleTimeString('en-GB', { timeZone: 'Europe/Amsterdam' }); + titleTime.textContent = currentTime; } -// TODO execute `addCurrentTime` when the browser has completed loading the page +window.addEventListener('DOMContentLoaded', () => { + addCurrentTime(); + setInterval(addCurrentTime, 1000); +}); diff --git a/2-Browsers/Week1/assignment/ex5-catWalk/index.js b/2-Browsers/Week1/assignment/ex5-catWalk/index.js index aedb02011..bcb0a7b12 100644 --- a/2-Browsers/Week1/assignment/ex5-catWalk/index.js +++ b/2-Browsers/Week1/assignment/ex5-catWalk/index.js @@ -20,8 +20,38 @@ Full description at: https://github.com/HackYourFuture/Assignments/tree/main/2-B https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif -----------------------------------------------------------------------------*/ +const movingCat = document.querySelector('img'); +let startPoint = 0; +let timerId; +const clientWidth = document.documentElement.clientWidth; +const widthCat = movingCat.clientWidth; +let isCatCenter = false; +const centerPosition = (clientWidth - widthCat) / 2; +const dancingCatGIF = + 'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif'; +const walkingCatGIF = 'http://www.anniemation.com/clip_art/images/cat-walk.gif'; + function catWalk() { - // TODO complete this function + movingCat.style.left = `${startPoint}px`; + startPoint += 10; + + if (startPoint >= clientWidth - widthCat) { + startPoint = 0; + isCatCenter = false; + } + + if (startPoint >= centerPosition && !isCatCenter) { + clearInterval(timerId); + movingCat.src = dancingCatGIF; + + setTimeout(() => { + movingCat.src = walkingCatGIF; + isCatCenter = true; + timerId = setInterval(catWalk, 50); + }, 5000); + } } -// TODO execute `catWalk` when the browser has completed loading the page +window.addEventListener('DOMContentLoaded', () => { + timerId = setInterval(catWalk, 50); +}); 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..7a62d280f --- /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 (76 ms) + ✅ should have all TODO comments removed + ✅ should contain a