diff --git a/.test-summary/TEST_SUMMARY.md b/.test-summary/TEST_SUMMARY.md new file mode 100644 index 000000000..9e1677ebf --- /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..398599d9e 100644 --- a/2-Browsers/Week1/assignment/ex1-bookList/index.js +++ b/2-Browsers/Week1/assignment/ex1-bookList/index.js @@ -17,8 +17,30 @@ 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 +unction createBookList(books) { + const ul = document.createElement('ul'); + + books.forEach((book) => { + const li = document.createElement('li'); + + // Paragraph with title and author + const p = document.createElement('p'); + p.textContent = `${book.title} by ${book.author}`; + + // Image for the book + const img = document.createElement('img'); + img.src = `assets/${book.image}`; + img.alt = `${book.title} cover`; + + // Set background color depending on read status + li.style.backgroundColor = book.alreadyRead ? 'lightgreen' : '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..fb48b8d39 100644 --- a/2-Browsers/Week1/assignment/ex1-bookList/style.css +++ b/2-Browsers/Week1/assignment/ex1-bookList/style.css @@ -1 +1,36 @@ /* Write your style here */ +body { + font-family: Arial, sans-serif; + background-color: #f8f9fa; + text-align: center; +} + +ul { + list-style-type: none; + padding: 0; +} + +li { + margin: 20px auto; + padding: 15px; + max-width: 400px; + border-radius: 8px; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); + transition: transform 0.2s; +} + +li:hover { + transform: scale(1.05); +} + +p { + font-weight: bold; + margin-bottom: 10px; +} + +img { + max-width: 100px; + height: auto; + display: block; + margin: 0 auto; +} diff --git a/2-Browsers/Week1/assignment/ex2-aboutMe/index.js b/2-Browsers/Week1/assignment/ex2-aboutMe/index.js index a03686b70..1e8818df9 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. +// 1. Replace span contents with your info +document.getElementById('nickname').textContent = 'Majd'; +document.getElementById('fav-food').textContent = 'Pizza'; +document.getElementById('hometown').textContent = 'Lelystad'; + +// 2. Iterate through each
  • and change the class to 'list-item' +const listItems = document.querySelectorAll('ul li'); +listItems.forEach((li) => { + li.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..1e66e5bfc 100644 --- a/2-Browsers/Week1/assignment/ex2-aboutMe/style.css +++ b/2-Browsers/Week1/assignment/ex2-aboutMe/style.css @@ -1 +1,6 @@ /* 3. Add a css rule for .list-item to make the color red. */ +/* 3. Add a css rule for .list-item to make the color red */ +.list-item { + color: red; + font-weight: bold; +} diff --git a/2-Browsers/Week1/assignment/ex3-hijackLogo.js b/2-Browsers/Week1/assignment/ex3-hijackLogo.js index 1b3d596e9..1ea068b98 100644 --- a/2-Browsers/Week1/assignment/ex3-hijackLogo.js +++ b/2-Browsers/Week1/assignment/ex3-hijackLogo.js @@ -7,7 +7,19 @@ Full description at: https://github.com/HackYourFuture/Assignments/tree/main/2-B HackYourFuture logo instead. ------------------------------------------------------------------------------*/ function hijackGoogleLogo() { - // TODO your code goes in here + // 1. Select the Google logo + // On the Google homepage, the logo has an id of "hplogo" or class "lnXdpd" + // We'll try using the most reliable: 'img' inside '#hplogo' or querySelector + const logo = document.querySelector('img'); + + if (logo) { + // 2. Replace the src and srcset with HackYourFuture logo + logo.src = 'assets/hyf-logo-black-bg-small.png'; + logo.srcset = ''; + } else { + console.log('Google logo not found!'); + } } +// Execute hijackGoogleLogo(); diff --git a/2-Browsers/Week1/assignment/ex3-hijackLogo/index.js b/2-Browsers/Week1/assignment/ex3-hijackLogo/index.js new file mode 100644 index 000000000..f60c6c18e --- /dev/null +++ b/2-Browsers/Week1/assignment/ex3-hijackLogo/index.js @@ -0,0 +1,23 @@ +/*------------------------------------------------------------------------------ +Full description at: https://github.com/HackYourFuture/Assignments/tree/main/2-Browsers/Week1#exercise-3-the-logo-hijack + +1. Find out how to select the element that contains the Google logo, and store + it in a variable. +2. Modify the `src` and `srcset` of the logo so that it's replaced by the + HackYourFuture logo instead. +------------------------------------------------------------------------------*/ +function hijackGoogleLogo() { + // 1. Select the Google logo + const logo = document.querySelector('img'); + + if (logo) { + // 2. Replace the src and srcset with HackYourFuture logo + logo.src = 'assets/hyf-logo-black-bg-small.png'; + logo.srcset = ''; + } else { + console.log('Google logo not found!'); + } +} + +// Execute +hijackGoogleLogo(); diff --git a/2-Browsers/Week1/assignment/ex4-whatsTheTime/index.js b/2-Browsers/Week1/assignment/ex4-whatsTheTime/index.js index 30dbdd61d..2b6622a12 100644 --- a/2-Browsers/Week1/assignment/ex4-whatsTheTime/index.js +++ b/2-Browsers/Week1/assignment/ex4-whatsTheTime/index.js @@ -7,7 +7,27 @@ 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 + // Create or select a container for the time + let timeContainer = document.getElementById('time'); + if (!timeContainer) { + timeContainer = document.createElement('h1'); + timeContainer.id = 'time'; + document.body.appendChild(timeContainer); + } + + // Function to update the time + function updateTime() { + 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'); + timeContainer.textContent = `${hours}:${minutes}:${seconds}`; + } + + // Update immediately and then every second + updateTime(); + setInterval(updateTime, 1000); } -// TODO execute `addCurrentTime` when the browser has completed loading the page +// Execute when the browser has loaded +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..325391837 100644 --- a/2-Browsers/Week1/assignment/ex5-catWalk/index.js +++ b/2-Browsers/Week1/assignment/ex5-catWalk/index.js @@ -21,7 +21,49 @@ 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 cat = document.querySelector('img'); + const originalCatSrc = cat.src; + const dancingCatSrc = + 'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif'; + + cat.style.position = 'absolute'; + cat.style.left = '0px'; + + let walkInterval; + let hasDanced = false; // Flag to track if cat already danced in this crossing + + function walk() { + let currentLeft = parseInt(cat.style.left, 10); + const windowWidth = window.innerWidth; + const catWidth = cat.width; + + // Move the cat + cat.style.left = currentLeft + 10 + 'px'; + + // Reset to left side when reaching right edge + if (currentLeft > windowWidth) { + cat.style.left = '0px'; + hasDanced = false; // Reset dance flag for next crossing + return; + } + + // Middle of the screen: trigger dance only if not danced yet + const middleStart = windowWidth / 2 - catWidth / 2; + const middleEnd = windowWidth / 2 + catWidth / 2; + + if (!hasDanced && currentLeft >= middleStart && currentLeft <= middleEnd) { + hasDanced = true; // Mark that cat has danced + clearInterval(walkInterval); + cat.src = dancingCatSrc; + + setTimeout(() => { + cat.src = originalCatSrc; + walkInterval = setInterval(walk, 50); + }, 5000); + } + } + + walkInterval = setInterval(walk, 50); } -// TODO execute `catWalk` when the browser has completed loading the page +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..2117de2f1 --- /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 (151 ms) + ✅ should have all TODO comments removed (1 ms) + ✅ should contain a