diff --git a/2-Browsers/Week1/assignment/ex1-bookList/index.js b/2-Browsers/Week1/assignment/ex1-bookList/index.js index 24a92487d..c7b268c2b 100644 --- a/2-Browsers/Week1/assignment/ex1-bookList/index.js +++ b/2-Browsers/Week1/assignment/ex1-bookList/index.js @@ -18,7 +18,37 @@ 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'); + + for (const book of books) { + const li = document.createElement('li'); + + // Create paragraph with title and author + const p = document.createElement('p'); + p.textContent = `${book.title} by ${book.author}`; + li.appendChild(p); + + // Create image element + const img = document.createElement('img'); + if (book.title === 'The Design of Everyday Things') { + img.src = './assets/the_design_of_everyday_things.jpg'; + } else if (book.title === 'The Most Human Human') { + img.src = './assets/the_most_human_human.jpg'; + } else if (book.title === 'The Pragmatic Programmer') { + img.src = './assets/the_pragmatic_programmer.jpg'; + } + + img.alt = `${book.title} cover`; + li.appendChild(img); + + // Style depending on whether it's read or not + li.style.backgroundColor = book.alreadyRead ? 'lightgreen' : 'lightcoral'; + + 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..8a2a55b70 100644 --- a/2-Browsers/Week1/assignment/ex1-bookList/style.css +++ b/2-Browsers/Week1/assignment/ex1-bookList/style.css @@ -1 +1,34 @@ -/* Write your style here */ +body { + font-family: Arial, sans-serif; + background-color: #f9f9f9; + text-align: center; +} + +h1 { + color: #333; +} + +ul { + list-style-type: none; + padding: 0; + display: flex; + justify-content: center; + gap: 20px; +} + +li { + border: 1px solid #ccc; + border-radius: 8px; + width: 200px; + padding: 10px; +} + +img { + width: 100%; + border-radius: 4px; +} + +p { + font-size: 14px; + margin-bottom: 10px; +} diff --git a/2-Browsers/Week1/assignment/ex2-aboutMe/index.js b/2-Browsers/Week1/assignment/ex2-aboutMe/index.js index a03686b70..00acf3b3d 100644 --- a/2-Browsers/Week1/assignment/ex2-aboutMe/index.js +++ b/2-Browsers/Week1/assignment/ex2-aboutMe/index.js @@ -8,4 +8,17 @@ 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 main() { + // Replace spans with your info + document.getElementById('nickname').textContent = 'Majd'; + document.getElementById('fav-food').textContent = 'Pizza'; + document.getElementById('hometown').textContent = 'palestine'; + + // Select all
  • elements and set their class to 'list-item' + const listItems = document.querySelectorAll('li'); + for (const item of listItems) { + item.className = 'list-item'; + } +} + +window.addEventListener('load', main); \ 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..9ecf3f622 100644 --- a/2-Browsers/Week1/assignment/ex2-aboutMe/style.css +++ b/2-Browsers/Week1/assignment/ex2-aboutMe/style.css @@ -1 +1,5 @@ /* 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; +} diff --git a/2-Browsers/Week1/assignment/ex3-hijackLogo.js b/2-Browsers/Week1/assignment/ex3-hijackLogo.js index 1b3d596e9..2b24a3fee 100644 --- a/2-Browsers/Week1/assignment/ex3-hijackLogo.js +++ b/2-Browsers/Week1/assignment/ex3-hijackLogo.js @@ -7,7 +7,16 @@ Full description at: https://github.com/HackYourFuture/Assignments/tree/main/2-B HackYourFuture logo instead. ------------------------------------------------------------------------------*/ function hijackGoogleLogo() { - // TODO your code goes in here +// Select the Google logo image element + const googleLogo = document.querySelector('img[alt="Google"]'); + + // Replace the logo with the HackYourFuture logo + if (googleLogo) { + const hyfLogo = + 'https://raw.githubusercontent.com/HackYourFuture/Assignments/main/assets/hyf-logo-black-bg-small.png'; + googleLogo.src = hyfLogo; + googleLogo.srcset = hyfLogo; + } } hijackGoogleLogo(); diff --git a/2-Browsers/Week1/assignment/ex4-whatsTheTime/index.js b/2-Browsers/Week1/assignment/ex4-whatsTheTime/index.js index 30dbdd61d..a6915d3cf 100644 --- a/2-Browsers/Week1/assignment/ex4-whatsTheTime/index.js +++ b/2-Browsers/Week1/assignment/ex4-whatsTheTime/index.js @@ -7,7 +7,21 @@ 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 timeElement = document.createElement('p'); + document.body.appendChild(timeElement); + + 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'); + timeElement.textContent = `${hours}:${minutes}:${seconds}`; + console.log(`${hours}:${minutes}:${seconds}`); + } + + updateTime(); // Show time immediately + setInterval(updateTime, 1000); // Update every second } -// TODO execute `addCurrentTime` when the browser has completed loading the page +// Execute addCurrentTime when the browser has completed loading the page +window.addEventListener('load', 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..55c4e9157 100644 --- a/2-Browsers/Week1/assignment/ex5-catWalk/index.js +++ b/2-Browsers/Week1/assignment/ex5-catWalk/index.js @@ -21,7 +21,39 @@ 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 = document.querySelector('img'); + img.style.left = '0px'; + let position = 0; + let isDancing = false; + + function moveCat() { + if (isDancing) return; + + position += 10; + img.style.left = position + 'px'; + + const screenWidth = window.innerWidth - img.width; + const middle = screenWidth / 2; + + // When cat reaches middle → dance for 5 seconds + if (position >= middle && position < middle + 10) { + isDancing = true; + img.src = + 'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif'; + setTimeout(() => { + img.src = 'http://www.anniemation.com/clip_art/images/cat-walk.gif'; + isDancing = false; + }, 5000); + } + + // When cat reaches right side → reset to left + if (position >= screenWidth) { + position = 0; + } + } + + setInterval(moveCat, 50); } -// TODO execute `catWalk` when the browser has completed loading the page +// Execute catWalk when the browser has completed loading the page +window.addEventListener('load', 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..ed403b68f --- /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 (11.868 s) + br-wk1-ex1-bookList + ✅ HTML should be syntactically valid (166 ms) + ✅ should have all TODO comments removed (1 ms) + ✅ should contain a