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

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

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

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

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

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 <ul> that is a child of <div id="bookList"> (2 ms)
+    ✅ should contain a <ul> with 3 <li> elements (1 ms)
+    ✅ should contain an <li> with title and author for each book of the `myBooks` array (2 ms)
+    ✅ should contain an <img> element for each book
+
+Test Suites: 1 passed, 1 total
+Tests:       6 passed, 6 total
+Snapshots:   0 total
+Time:        2.83 s, estimated 12 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,19 @@
+*** 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
+    ✅ should set the `.srcset` property
+
+Test Suites: 1 passed, 1 total
+Tests:       3 passed, 3 total
+Snapshots:   0 total
+Time:        0.492 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.
+
+
+*** Spell Checker Report ***
+
+2-Browsers/Week1/assignment/ex3-hijackLogo.js:11:73 - Unknown word (Xdpd)

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 (153 ms)
+    ✅ should have all TODO comments removed
+    ✅ should use `setInterval()` and/or `setTimeout()` (1 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 (1 ms)
+
+Test Suites: 1 passed, 1 total
+Tests:       5 passed, 5 total
+Snapshots:   0 total
+Time:        2.788 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.