From 594a1790d7eefaddad4b13afe9b1f6977002f792 Mon Sep 17 00:00:00 2001 From: Majd Hamde Date: Tue, 16 Sep 2025 11:46:56 +0200 Subject: [PATCH 01/10] Completed Week 1 Browsers exercises --- .test-summary/TEST_SUMMARY.md | 13 ++++++ .../Week1/assignment/ex1-bookList/index.js | 24 ++++++++++- .../Week1/assignment/ex1-bookList/style.css | 35 +++++++++++++++ .../Week1/assignment/ex2-aboutMe/index.js | 11 ++++- .../Week1/assignment/ex2-aboutMe/style.css | 5 +++ 2-Browsers/Week1/assignment/ex3-hijackLogo.js | 16 ++++++- .../assignment/ex4-whatsTheTime/index.js | 24 ++++++++++- .../Week1/assignment/ex5-catWalk/index.js | 43 +++++++++++++++++-- .../test-reports/ex1-bookList.report.txt | 23 ++++++++++ .../Week1/test-reports/ex2-aboutMe.report.txt | 21 +++++++++ .../test-reports/ex3-hijackLogo.report.txt | 19 ++++++++ .../test-reports/ex4-whatsTheTime.report.txt | 18 ++++++++ .../Week1/test-reports/ex5-catWalk.report.txt | 17 ++++++++ 13 files changed, 260 insertions(+), 9 deletions(-) create mode 100644 .test-summary/TEST_SUMMARY.md create mode 100644 2-Browsers/Week1/test-reports/ex1-bookList.report.txt create mode 100644 2-Browsers/Week1/test-reports/ex2-aboutMe.report.txt create mode 100644 2-Browsers/Week1/test-reports/ex3-hijackLogo.report.txt create mode 100644 2-Browsers/Week1/test-reports/ex4-whatsTheTime.report.txt create mode 100644 2-Browsers/Week1/test-reports/ex5-catWalk.report.txt 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..128f3b00d 100644 --- a/2-Browsers/Week1/assignment/ex1-bookList/index.js +++ b/2-Browsers/Week1/assignment/ex1-bookList/index.js @@ -18,7 +18,29 @@ 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'); + + // 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 = `https://covers.openlibrary.org/b/isbn/${book.isbn}-M.jpg`; + 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..beab3d9ab 100644 --- a/2-Browsers/Week1/assignment/ex3-hijackLogo.js +++ b/2-Browsers/Week1/assignment/ex3-hijackLogo.js @@ -7,7 +7,21 @@ 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 = 'https://www.hackyourfuture.dk/static/images/logo.png'; + logo.srcset = ''; + } else { + console.log('Google logo not found!'); + } } +// Execute +hijackGoogleLogo(); + 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..f11f94de9 100644 --- a/2-Browsers/Week1/assignment/ex5-catWalk/index.js +++ b/2-Browsers/Week1/assignment/ex5-catWalk/index.js @@ -20,8 +20,43 @@ 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 -} +window.addEventListener('load', () => { + const cat = document.querySelector('img'); + const originalSrc = cat.src; + const dancingSrc = + 'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif'; -// TODO execute `catWalk` when the browser has completed loading the page + cat.style.left = '0px'; // start at left + const step = 10; // pixels per interval + let dancing = false; + function catWalk() { + let currentLeft = parseInt(cat.style.left); + + // If dancing, do not move + if (dancing) return; + + // Move the cat + currentLeft += step; + cat.style.left = currentLeft + 'px'; + + const windowWidth = window.innerWidth; + const catWidth = cat.width; + + // Restart at left if reached right edge + if (currentLeft + catWidth >= windowWidth) { + cat.style.left = '0px'; + } + + // Start dancing at middle of screen + if (!dancing && currentLeft + catWidth / 2 >= windowWidth / 2) { + dancing = true; + cat.src = dancingSrc; + setTimeout(() => { + cat.src = originalSrc; + dancing = false; + }, 5000); // dance for 5 seconds + } + } + + 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..38f4802bf --- /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 (154 ms) + ✅ should have all TODO comments removed (3 ms) + ✅ should contain a