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..9d03e4d44 100644 --- a/2-Browsers/Week1/assignment/ex1-bookList/index.js +++ b/2-Browsers/Week1/assignment/ex1-bookList/index.js @@ -18,7 +18,33 @@ 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') + ul.style.listStyle = 'none' + ul.style.display = 'flex' + ul.style.gap = '10px' + + books.forEach(book => { + const li = document.createElement('li') + + if (book.alreadyRead) { + li.style.backgroundColor = 'green' + } else { + li.style.backgroundColor = 'red' + } + + const p = document.createElement('p') + p.textContent = `${book.title} by ${book.author}` + + const img = document.createElement('img') + img.setAttribute('alt', book.title) + img.setAttribute('src', book.url) + + li.appendChild(p) + li.appendChild(img) + ul.appendChild(li) + }) + + return ul } function main() { @@ -28,18 +54,21 @@ function main() { author: 'Don Norman', isbn: '978-0465050659', alreadyRead: false, + url: './assets/the_design_of_everyday_things.jpg', }, { title: 'The Most Human Human', author: 'Brian Christian', isbn: '978-1617933431', alreadyRead: true, + url: './assets/the_most_human_human.jpg', }, { title: 'The Pragmatic Programmer', author: 'Andrew Hunt', isbn: '978-0201616224', alreadyRead: true, + url: './assets/the_pragmatic_programmer.jpg', }, ]; diff --git a/2-Browsers/Week1/assignment/ex2-aboutMe/index.js b/2-Browsers/Week1/assignment/ex2-aboutMe/index.js index a03686b70..981f3b21f 100644 --- a/2-Browsers/Week1/assignment/ex2-aboutMe/index.js +++ b/2-Browsers/Week1/assignment/ex2-aboutMe/index.js @@ -8,4 +8,22 @@ Full description at: https://github.com/HackYourFuture/Assignments/tree/main/2-B 3. Look in the css file! ------------------------------------------------------------------------------*/ -// TODO add your JavaScript code here. + + +const changeData = () => { + const nickname = document.querySelector('#nickname') + const favFood = document.querySelector('#fav-food') + const hometown = document.querySelector('#hometown') + const listItems = document.querySelectorAll('li') + + nickname.textContent = 'Dmytro' + favFood.textContent = 'Borsh' + hometown.textContent = 'Haarlem' + + listItems.forEach(item => { + item.classList.add('list-item') + }) + +} + +changeData() \ No newline at end of file diff --git a/2-Browsers/Week1/assignment/ex2-aboutMe/style.css b/2-Browsers/Week1/assignment/ex2-aboutMe/style.css index 4e9cc415c..0cdd75db5 100644 --- a/2-Browsers/Week1/assignment/ex2-aboutMe/style.css +++ b/2-Browsers/Week1/assignment/ex2-aboutMe/style.css @@ -1 +1,4 @@ /* 3. Add a css rule for .list-item to make the color red. */ +.list-item { + color: red; +} \ No newline at end of file diff --git a/2-Browsers/Week1/assignment/ex3-hijackLogo.js b/2-Browsers/Week1/assignment/ex3-hijackLogo.js index 1b3d596e9..e9f30c664 100644 --- a/2-Browsers/Week1/assignment/ex3-hijackLogo.js +++ b/2-Browsers/Week1/assignment/ex3-hijackLogo.js @@ -7,7 +7,22 @@ Full description at: https://github.com/HackYourFuture/Assignments/tree/main/2-B HackYourFuture logo instead. ------------------------------------------------------------------------------*/ function hijackGoogleLogo() { - // TODO your code goes in here + const logoSvg = document.querySelector('svg.lnXdpd'); + const hyfLogo = + 'https://raw.githubusercontent.com/HackYourFuture/Assignments/main/assets/hyf-logo-black-bg-small.png'; + + if (logoSvg) { + const img = document.createElement('img') + img.src = hyfLogo + img.srcset = hyfLogo + img.alt = 'HackYourFuture' + img.style.maxHeight = '92px' + img.className = 'lnXdpd' + + logoSvg.replaceWith(img) + } else { + console.log('Error: logo not found') + } } -hijackGoogleLogo(); +hijackGoogleLogo() diff --git a/2-Browsers/Week1/assignment/ex4-whatsTheTime/index.js b/2-Browsers/Week1/assignment/ex4-whatsTheTime/index.js index 30dbdd61d..1691b569b 100644 --- a/2-Browsers/Week1/assignment/ex4-whatsTheTime/index.js +++ b/2-Browsers/Week1/assignment/ex4-whatsTheTime/index.js @@ -7,7 +7,20 @@ Full description at: https://github.com/HackYourFuture/Assignments/tree/main/2-B 2. Have the function execute when it's loading in the browser. ------------------------------------------------------------------------------*/ function addCurrentTime() { - // TODO complete this function + const clock = document.createElement('div') + document.body.appendChild(clock) + + updateTime(clock) + setInterval(() => updateTime(clock), 1000) +} + +function updateTime(clock) { + const now = new Date() + const hours = String(now.getHours()).padStart(2, '0') + const minutes = String(now.getMinutes()).padStart(2, '0') + const seconds = String(now.getSeconds()).padStart(2, '0') + + clock.textContent = `${hours}:${minutes}:${seconds}` } -// TODO execute `addCurrentTime` when the browser has completed loading the page +window.addEventListener('DOMContentLoaded', addCurrentTime) \ No newline at end of file diff --git a/2-Browsers/Week1/assignment/ex5-catWalk/index.js b/2-Browsers/Week1/assignment/ex5-catWalk/index.js index aedb02011..a570f00d6 100644 --- a/2-Browsers/Week1/assignment/ex5-catWalk/index.js +++ b/2-Browsers/Week1/assignment/ex5-catWalk/index.js @@ -1,27 +1,58 @@ -/*------------------------------------------------------------------------------ -Full description at: https://github.com/HackYourFuture/Assignments/tree/main/2-Browsers/Week1#exercise-5-the-cat-walk - -1. Create a variable to store a reference to the `` element. -2. Change the style of the `` to have a `left` of `0px`, so that it starts - at the left hand of the screen. -3. Complete the function called catWalk() to move the cat 10 pixels to the right - of where it started, by changing the `left` style property. -4. Call that function every 50 milliseconds. Your cat should now be moving - across the screen from left to right. Hurrah! -5. When the cat reaches the right-hand of the screen, restart them at the left - hand side (`0px`). So they should keep walking from left to right across the - screen, forever and ever. -6. When the cat reaches the middle of the screen, replace the img with an image - of a cat dancing (use this URL given below), keep it dancing for 5 seconds, - and then replace the img with the original image and have it - continue the walk. - - Dancing cat URL: - - https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif ------------------------------------------------------------------------------*/ function catWalk() { - // TODO complete this function + const img = document.querySelector('img') + + const WALK = 'http://www.anniemation.com/clip_art/images/cat-walk.gif' + const DANCE = 'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif' + + img.style.left = '0px' + img.src = WALK + + let position = 0 + let timer = null + let isDancing = false + let dancedThisLap = false + + function step() { + if (isDancing) { + return + } + position += 10 + img.style.left = position + 'px' + + const middle = (window.innerWidth - img.offsetWidth) / 2 + const end = window.innerWidth - img.offsetWidth + + if (!dancedThisLap && position >= middle) { + isDancing = true + dancedThisLap = true + clearInterval(timer) + img.src = DANCE + + setTimeout(() => { + img.src = WALK + isDancing = false + timer = setInterval(step, 50) + }, 5000) + } + + if (position >= end) { + position = 0 + img.style.left = '0px' + dancedThisLap = false + } + } + + function startWhenReady() { + if (img.complete && img.naturalWidth > 0) { + timer = setInterval(step, 50) + } else { + img.addEventListener('load', () => { + timer = setInterval(step, 50) + }, { once: true }) + } + } + + startWhenReady() } -// TODO execute `catWalk` when the browser has completed loading the page +window.addEventListener('DOMContentLoaded', catWalk) \ No newline at end of file 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..f4b369335 --- /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 (5.695 s) + br-wk1-ex1-bookList + ✅ HTML should be syntactically valid (88 ms) + ✅ should have all TODO comments removed + ✅ should contain a