majd_jadalhaq-W1-Browsers

.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    |   -    |   ✓    |

2-Browsers/Week1/assignment/ex1-bookList/index.js

@@ -17,28 +17,50 @@ 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() {
   const myBooks = [
     {
       title: 'The Design of Everyday Things',
       author: 'Don Norman',
-      isbn: '978-0465050659',
+      image: 'the_design_of_everyday_things.jpg',
       alreadyRead: false,
     },
     {
       title: 'The Most Human Human',
       author: 'Brian Christian',
-      isbn: '978-1617933431',
+      image: 'the_most_human_human.jpg',
       alreadyRead: true,
     },
     {
       title: 'The Pragmatic Programmer',
       author: 'Andrew Hunt',
-      isbn: '978-0201616224',
+      image: 'the_pragmatic_programmer.jpg',
       alreadyRead: true,
     },
   ];
@@ -48,3 +70,4 @@ function main() {
 }
 
 window.addEventListener('load', main);
+

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

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 <li> and change the class to 'list-item'
+const listItems = document.querySelectorAll('ul li');
+listItems.forEach((li) => {
+  li.className = 'list-item';
+});

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

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

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

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

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

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 <ul> that is a child of <div id="bookList"> (1 ms)
+    ✅ should contain a <ul> with 3 <li> elements (2 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:        3.613 s
+Ran all test suites matching /\/Users\/majdjadalhaq\/Desktop\/Assignments-Cohort54\/.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:36:52 - Unknown word (lightgreen)
+2-Browsers/Week1/assignment/ex1-bookList/index.js:36:67 - Unknown word (lightcoral)

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

@@ -0,0 +1,21 @@
+*** Unit Test Error Report ***
+
+ PASS  .dist/2-Browsers/Week1/unit-tests/ex2-aboutMe.test.js
+  br-wk1-ex2-aboutMe
+    ✅ should be syntactically valid (148 ms)
+    ✅ should have all TODO comments removed (2 ms)
+    ✅ each <li> should have the CSS class `list-item` (1 ms)
+    ✅ each <li> should rendered red (= rgb(255, 0, 0)) (22 ms)
+
+Test Suites: 1 passed, 1 total
+Tests:       4 passed, 4 total
+Snapshots:   0 total
+Time:        2.684 s, estimated 3 s
+Ran all test suites matching /\/Users\/majdjadalhaq\/Desktop\/Assignments-Cohort54\/.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:12:52 - Unknown word (Majd)
+2-Browsers/Week1/assignment/ex2-aboutMe/index.js:14:52 - Unknown word (Lelystad)

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

@@ -0,0 +1,28 @@
+*** Unit Test Error Report ***
+
+Command failed: npx jest /Users/majdjadalhaq/Desktop/Assignments-Cohort54/.dist/2-Browsers/Week1/unit-tests/ex3-hijackLogo.test.js --colors --noStackTrace --json
+ FAIL  .dist/2-Browsers/Week1/unit-tests/ex3-hijackLogo.test.js
+  br-wk1-ex3-hijackLogo
+    ❌ should have all TODO comments removed
+    ❌ should set the `.src` property
+    ❌ should set the `.srcset` property
+
+  ● br-wk1-ex3-hijackLogo › should have all TODO comments removed
+
+    ENOENT: no such file or directory, open '/Users/majdjadalhaq/Desktop/Assignments-Cohort54/2-Browsers/Week1/assignment/ex3-hijackLogo/index.js'
+
+  ● br-wk1-ex3-hijackLogo › should set the `.src` property
+
+    ENOENT: no such file or directory, open '/Users/majdjadalhaq/Desktop/Assignments-Cohort54/2-Browsers/Week1/assignment/ex3-hijackLogo/index.js'
+
+  ● br-wk1-ex3-hijackLogo › should set the `.srcset` property
+
+    ENOENT: no such file or directory, open '/Users/majdjadalhaq/Desktop/Assignments-Cohort54/2-Browsers/Week1/assignment/ex3-hijackLogo/index.js'
+
+Test Suites: 1 failed, 1 total
+Tests:       3 failed, 3 total
+Snapshots:   0 total
+Time:        0.627 s, estimated 1 s
+Ran all test suites matching /\/Users\/majdjadalhaq\/Desktop\/Assignments-Cohort54\/.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 (149 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 (1 ms)
+    ✅ `window.onload` or `window.addEventListener` should not call its event handler function (1 ms)
+
+Test Suites: 1 passed, 1 total
+Tests:       6 passed, 6 total
+Snapshots:   0 total
+Time:        4.79 s
+Ran all test suites matching /\/Users\/majdjadalhaq\/Desktop\/Assignments-Cohort54\/.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 (154 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 (2 ms)
+    ✅ `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:        3.719 s
+Ran all test suites matching /\/Users\/majdjadalhaq\/Desktop\/Assignments-Cohort54\/.dist\/2-Browsers\/Week1\/unit-tests\/ex5-catWalk.test.js/i.
+No linting errors detected.
+No spelling errors detected.