majd_jadalhaq-w1-Browsers

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() {

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;
+}

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 <li> 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);

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;
+}

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();

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);

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);

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 <ul> that is a child of <div id="bookList"> (2 ms)
+    ✅ should contain a <ul> with 3 <li> elements (3 ms)
+    ✅ should contain an <li> with title and author for each book of the `myBooks` array (1 ms)
+    ✅ should contain an <img> element for each book
+
+Test Suites: 1 passed, 1 total
+Tests:       6 passed, 6 total
+Snapshots:   0 total
+Time:        12.484 s
+Ran all test suites matching /\/Users\/majdjadalhaq\/Desktop\/Assignments-Cohort541\/.dist\/2-Browsers\/Week1\/unit-tests\/ex1-bookList.test.js/i.
+No linting errors detected.
+
+
+*** Spell Checker Report ***
+
+2-Browsers/Week1/assignment/ex1-bookList/index.js:45:52 - Unknown word (lightgreen)
+2-Browsers/Week1/assignment/ex1-bookList/index.js:45:67 - Unknown word (lightcoral)

2-Browsers/Week1/test-reports/ex2-aboutMe.report.txt

@@ -0,0 +1,20 @@
+*** Unit Test Error Report ***
+
+ PASS  .dist/2-Browsers/Week1/unit-tests/ex2-aboutMe.test.js
+  br-wk1-ex2-aboutMe
+    ✅ should be syntactically valid (149 ms)
+    ✅ should have all TODO comments removed
+    ✅ each <li> should have the CSS class `list-item` (1 ms)
+    ✅ each <li> should rendered red (= rgb(255, 0, 0)) (24 ms)
+
+Test Suites: 1 passed, 1 total
+Tests:       4 passed, 4 total
+Snapshots:   0 total
+Time:        3.277 s
+Ran all test suites matching /\/Users\/majdjadalhaq\/Desktop\/Assignments-Cohort541\/.dist\/2-Browsers\/Week1\/unit-tests\/ex2-aboutMe.test.js/i.
+No linting errors detected.
+
+
+*** Spell Checker Report ***
+
+2-Browsers/Week1/assignment/ex2-aboutMe/index.js:13:54 - Unknown word (Majd)

2-Browsers/Week1/test-reports/ex3-hijackLogo.report.txt

@@ -0,0 +1,15 @@
+*** Unit Test Error Report ***
+
+ PASS  .dist/2-Browsers/Week1/unit-tests/ex3-hijackLogo.test.js
+  br-wk1-ex3-hijackLogo
+    ✅ should have all TODO comments removed (2 ms)
+    ✅ should set the `.src` property (1 ms)
+    ✅ should set the `.srcset` property
+
+Test Suites: 1 passed, 1 total
+Tests:       3 passed, 3 total
+Snapshots:   0 total
+Time:        0.483 s
+Ran all test suites matching /\/Users\/majdjadalhaq\/Desktop\/Assignments-Cohort541\/.dist\/2-Browsers\/Week1\/unit-tests\/ex3-hijackLogo.test.js/i.
+No linting errors detected.
+No spelling errors detected.

2-Browsers/Week1/test-reports/ex4-whatsTheTime.report.txt

@@ -0,0 +1,18 @@
+*** Unit Test Error Report ***
+
+ PASS  .dist/2-Browsers/Week1/unit-tests/ex4-whatsTheTime.test.js
+  br-wk1-ex4-whatsTheTime
+    ✅ HTML should be syntactically valid (150 ms)
+    ✅ should have all TODO comments removed (1 ms)
+    ✅ should use `setInterval()`
+    ✅ should not call `setInterval()` more than once (2002 ms)
+    ✅ should use `window.onload` or `window.addEventListener()` for the `load` or `DOMContentLoaded` event
+    ✅ `window.onload` or `window.addEventListener` should not call its event handler function
+
+Test Suites: 1 passed, 1 total
+Tests:       6 passed, 6 total
+Snapshots:   0 total
+Time:        4.76 s
+Ran all test suites matching /\/Users\/majdjadalhaq\/Desktop\/Assignments-Cohort541\/.dist\/2-Browsers\/Week1\/unit-tests\/ex4-whatsTheTime.test.js/i.
+No linting errors detected.
+No spelling errors detected.

2-Browsers/Week1/test-reports/ex5-catWalk.report.txt

@@ -0,0 +1,17 @@
+*** Unit Test Error Report ***
+
+ PASS  .dist/2-Browsers/Week1/unit-tests/ex5-catWalk.test.js
+  br-wk1-ex5-catWalk
+    ✅ HTML should be syntactically valid (146 ms)
+    ✅ should have all TODO comments removed
+    ✅ should use `setInterval()` and/or `setTimeout()`
+    ✅ should use `window.onload` or `window.addEventListener()` for the `load` or `DOMContentLoaded` event
+    ✅ `window.onload` or `window.addEventListener` should not call its event handler function (1 ms)
+
+Test Suites: 1 passed, 1 total
+Tests:       5 passed, 5 total
+Snapshots:   0 total
+Time:        2.741 s
+Ran all test suites matching /\/Users\/majdjadalhaq\/Desktop\/Assignments-Cohort541\/.dist\/2-Browsers\/Week1\/unit-tests\/ex5-catWalk.test.js/i.
+No linting errors detected.
+No spelling errors detected.