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..d80a9b68a 100644 --- a/2-Browsers/Week1/assignment/ex1-bookList/index.js +++ b/2-Browsers/Week1/assignment/ex1-bookList/index.js @@ -18,7 +18,22 @@ 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"); + p.textContent = `${book.title} by ${book.author}`; + img.src = book.imgSrc; + img.alt = book.title; + if (!book.alreadyRead) { + li.classList.add('not-read') + } + li.appendChild(p); + li.appendChild(img); + ul.appendChild(li); + }); + return ul; } function main() { @@ -28,18 +43,21 @@ function main() { author: 'Don Norman', isbn: '978-0465050659', alreadyRead: false, + imgSrc: 'assets/the_design_of_everyday_things.jpg', }, { title: 'The Most Human Human', author: 'Brian Christian', isbn: '978-1617933431', alreadyRead: true, + imgSrc: 'assets/the_most_human_human.jpg', }, { title: 'The Pragmatic Programmer', author: 'Andrew Hunt', isbn: '978-0201616224', alreadyRead: true, + imgSrc: '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..5a5cc821a 100644 --- a/2-Browsers/Week1/assignment/ex1-bookList/style.css +++ b/2-Browsers/Week1/assignment/ex1-bookList/style.css @@ -1 +1,38 @@ /* Write your style here */ +html { + font-size: 62.5% !important; + background-color: #faf6f6; +} +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} +#bookList { + display: flex; + flex-wrap: wrap; +} +ul { + list-style-type: none; +} +li { + display: inline-block; + background-color: green; + padding: 1rem; + margin: 1rem; + border-radius: 1rem; + width: 40rem; +} +h1 { + font-size: 4rem; + text-align: center; + margin: 1rem; +} +p { + font-size: 1.5rem; + margin-bottom: 1rem; + text-align: center; +} +.not-read { + background-color: red; +} \ No newline at end of file diff --git a/2-Browsers/Week1/assignment/ex2-aboutMe/index.js b/2-Browsers/Week1/assignment/ex2-aboutMe/index.js index a03686b70..f8f2fed88 100644 --- a/2-Browsers/Week1/assignment/ex2-aboutMe/index.js +++ b/2-Browsers/Week1/assignment/ex2-aboutMe/index.js @@ -8,4 +8,13 @@ Full description at: https://github.com/HackYourFuture/Assignments/tree/main/2-B 3. Look in the css file! ------------------------------------------------------------------------------*/ -// TODO add your JavaScript code here. +// function to change text value of tags + +const changeAboutMe = (tag, value) => { + document.getElementById(tag).textContent = value; +} +changeAboutMe('nickname', 'mbreathe'); +changeAboutMe('fav-food', 'sushi'); +changeAboutMe('hometown', 'bratsk'); +const listItems = document.querySelectorAll('li'); +listItems.forEach(liItem => liItem.classList.add('list-item')); \ 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..154506bd8 100644 --- a/2-Browsers/Week1/assignment/ex3-hijackLogo.js +++ b/2-Browsers/Week1/assignment/ex3-hijackLogo.js @@ -7,7 +7,9 @@ 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('img[alt = "Google"]'); + logo.src = 'https://raw.githubusercontent.com/HackYourFuture/Assignments/refs/heads/main/assets/hyf-logo-black-bg-small.png'; + logo.srcset = 'https://raw.githubusercontent.com/HackYourFuture/Assignments/refs/heads/main/assets/hyf-logo-black-bg-small.png 272w'; } hijackGoogleLogo(); diff --git a/2-Browsers/Week1/assignment/ex4-whatsTheTime/index.js b/2-Browsers/Week1/assignment/ex4-whatsTheTime/index.js index 30dbdd61d..ee8b7c98e 100644 --- a/2-Browsers/Week1/assignment/ex4-whatsTheTime/index.js +++ b/2-Browsers/Week1/assignment/ex4-whatsTheTime/index.js @@ -6,8 +6,15 @@ 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 clock = document.createElement("p"); +document.body.appendChild(clock) + function addCurrentTime() { - // TODO complete this function + const date = new Date().toLocaleTimeString(); + clock.textContent = `Current time is: ${date}`; } -// TODO execute `addCurrentTime` when the browser has completed loading the page +window.onload = () => { + addCurrentTime() + setInterval(addCurrentTime, 1000); +} \ 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..ac4103074 100644 --- a/2-Browsers/Week1/assignment/ex5-catWalk/index.js +++ b/2-Browsers/Week1/assignment/ex5-catWalk/index.js @@ -20,8 +20,45 @@ Full description at: https://github.com/HackYourFuture/Assignments/tree/main/2-B https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif -----------------------------------------------------------------------------*/ -function catWalk() { - // TODO complete this function + +const IMG_WALK = 'http://www.anniemation.com/clip_art/images/cat-walk.gif' +const IMG_DANCE = 'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif' +const WALK_SPEED = 10; +const ANIMATION_INTERVAL = 50; +const DANCE_DURATION = 5000; + +const imgDom = document.querySelector("img"); +let num = 0; +const windowWidth = window.innerWidth; +let intervalID; +imgDom.style.left = `${num}px`; + +const startInterval = () => { + intervalID = setInterval(catWalk, ANIMATION_INTERVAL); +} + +const stopAndContinueInterval = () => { + clearInterval(intervalID); + setTimeout(() => { + imgDom.src = IMG_WALK; + startInterval(); + }, DANCE_DURATION); } -// TODO execute `catWalk` when the browser has completed loading the page +function catWalk() { + const middlePositionImg = num + ((Math.round((imgDom.offsetWidth / 2) / 10)) * 10); + const middleScreen = ((Math.round((windowWidth / 2) / 10)) * 10); + + if (num >= (windowWidth - imgDom.offsetWidth)) { + num = 0; + } + if (middlePositionImg === middleScreen) { + imgDom.src = IMG_DANCE; + stopAndContinueInterval() + } + return imgDom.style.left = `${num += WALK_SPEED}px`; +} +window.onload = () => { + catWalk(); + startInterval(); +} 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..2f39e4a47 --- /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 (107 ms) + ✅ should have all TODO comments removed + ✅ should contain a