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