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/.vscode/settings.json b/.vscode/settings.json index f7d6e29e1..a455d2bb5 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -16,5 +16,6 @@ "editor.bracketPairColorization.enabled": true, "editor.guides.bracketPairs": true, "editor.guides.highlightActiveIndentation": true, - "editor.guides.bracketPairsHorizontal": "active" + "editor.guides.bracketPairsHorizontal": "active", + "liveServer.settings.port": 5501 } diff --git a/2-Browsers/Week1/assignment/ex1-bookList/index.js b/2-Browsers/Week1/assignment/ex1-bookList/index.js index 24a92487d..10139b943 100644 --- a/2-Browsers/Week1/assignment/ex1-bookList/index.js +++ b/2-Browsers/Week1/assignment/ex1-bookList/index.js @@ -18,7 +18,28 @@ 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'); + const img = document.createElement('img'); + const imgName = book.title.toLowerCase().replaceAll(' ', '_'); + + p.textContent = `${book.title} by ${book.author}`; + img.src = `assets/${imgName}.jpg`; + img.alt = `${book.title} cover`; + + if (book.alreadyRead) { + li.style.backgroundColor = 'lightgreen'; + } else { + li.style.backgroundColor = 'lightcoral'; + } + + li.appendChild(p); + li.appendChild(img); + ul.appendChild(li); + }); + return ul; } function main() { diff --git a/2-Browsers/Week1/assignment/ex1-bookList/style.css b/2-Browsers/Week1/assignment/ex1-bookList/style.css index 55ad76b29..67829aaee 100644 --- a/2-Browsers/Week1/assignment/ex1-bookList/style.css +++ b/2-Browsers/Week1/assignment/ex1-bookList/style.css @@ -1 +1,17 @@ /* Write your style here */ + +ul { + list-style: none; + padding: 0; + margin: 0; +} + +ul li { + width: 500px; + padding: 20px; + text-align: center; + border-radius: 6px; + margin-bottom: 20px; + display: inline-block; + margin-right: 12px; +} diff --git a/2-Browsers/Week1/assignment/ex2-aboutMe/index.js b/2-Browsers/Week1/assignment/ex2-aboutMe/index.js index a03686b70..d1b8fa06b 100644 --- a/2-Browsers/Week1/assignment/ex2-aboutMe/index.js +++ b/2-Browsers/Week1/assignment/ex2-aboutMe/index.js @@ -8,4 +8,14 @@ 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 ul = document.querySelector('ul').children; +const nickname = document.getElementById('nickname'); +const favFood = document.getElementById('fav-food'); +const hometown = document.getElementById('hometown'); + +nickname.textContent = 'Alooy'; +favFood.textContent = 'Burgers'; +hometown.textContent = 'Dongen'; + +const arr = Array.from(ul); +arr.forEach((ele) => (ele.className = 'list-item')); diff --git a/2-Browsers/Week1/assignment/ex2-aboutMe/style.css b/2-Browsers/Week1/assignment/ex2-aboutMe/style.css index 4e9cc415c..02518fbca 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; +} diff --git a/2-Browsers/Week1/assignment/ex3-hijackLogo.js b/2-Browsers/Week1/assignment/ex3-hijackLogo.js index 1b3d596e9..3d7795f63 100644 --- a/2-Browsers/Week1/assignment/ex3-hijackLogo.js +++ b/2-Browsers/Week1/assignment/ex3-hijackLogo.js @@ -7,7 +7,12 @@ Full description at: https://github.com/HackYourFuture/Assignments/tree/main/2-B HackYourFuture logo instead. ------------------------------------------------------------------------------*/ function hijackGoogleLogo() { - // TODO your code goes in here + const logo = document.querySelector('svg.lnXdpd'); + const hyfLogo = + 'https://github.com/HackYourFuture/Assignments/raw/main/assets/hyf-logo-black-bg-small.png'; + const img = document.createElement('img'); + img.src = hyfLogo; + img.srcset = hyfLogo; + logo.replaceWith(img); } - hijackGoogleLogo(); diff --git a/2-Browsers/Week1/assignment/ex4-whatsTheTime/index.js b/2-Browsers/Week1/assignment/ex4-whatsTheTime/index.js index 30dbdd61d..d2562b548 100644 --- a/2-Browsers/Week1/assignment/ex4-whatsTheTime/index.js +++ b/2-Browsers/Week1/assignment/ex4-whatsTheTime/index.js @@ -6,8 +6,21 @@ 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. ------------------------------------------------------------------------------*/ + function addCurrentTime() { - // TODO complete this function + const div = document.createElement('div'); + const span = document.createElement('span'); + + setInterval(function () { + const time = new Date(); + const hours = String(time.getHours()).padStart(2, '0'); + const minutes = String(time.getMinutes()).padStart(2, '0'); + const seconds = String(time.getSeconds()).padStart(2, '0'); + span.textContent = `${hours}:${minutes}:${seconds}`; + }, 1000); + + div.appendChild(span); + document.body.appendChild(div); } -// TODO execute `addCurrentTime` when the browser has completed loading the page +window.addEventListener('load', addCurrentTime); diff --git a/2-Browsers/Week1/assignment/ex5-catWalk/index.js b/2-Browsers/Week1/assignment/ex5-catWalk/index.js index aedb02011..9129b9b9f 100644 --- a/2-Browsers/Week1/assignment/ex5-catWalk/index.js +++ b/2-Browsers/Week1/assignment/ex5-catWalk/index.js @@ -20,8 +20,39 @@ Full description at: https://github.com/HackYourFuture/Assignments/tree/main/2-B https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif -----------------------------------------------------------------------------*/ +const image = document.querySelector('img'); +image.style.left = '0px'; +const originalUrl = image.src; +let dancing = false; + +const screenWidth = window.innerWidth - image.width; +const middle = screenWidth / 2; + function catWalk() { - // TODO complete this function + setInterval(function () { + if (dancing) return; + + const stepToLeft = parseInt(image.style.left, 10) + 10; + image.style.left = `${stepToLeft}px`; + + if (stepToLeft >= screenWidth) { + image.style.left = '0px'; + return; + } + + if (stepToLeft >= middle && stepToLeft < middle + 10) { + stopDancing(); + } + }, 50); } -// TODO execute `catWalk` when the browser has completed loading the page +function stopDancing() { + dancing = true; + image.src = + 'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif'; + setTimeout(function () { + image.src = originalUrl; + dancing = false; + }, 5000); +} +window.addEventListener('load', catWalk); 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..18773744f --- /dev/null +++ b/2-Browsers/Week1/test-reports/ex1-bookList.report.txt @@ -0,0 +1,23 @@ +*** Unit Test Error Report *** + + PASS .dist/2-Browsers/Week1/unit-tests/ex1-bookList.test.js + br-wk1-ex1-bookList + ✅ HTML should be syntactically valid (168 ms) + ✅ should have all TODO comments removed + ✅ should contain a