Alaa nasher 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,28 @@ 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');
+    const p = document.createElement('p');
+    const img = document.createElement('img');
+    const imgName = book.title.toLowerCase().replaceAll(' ', '_');
+
+    p.textContent = `${book.title} by ${book.author}`;
+    img.src = `assets/${imgName}.jpg`;
+    img.alt = `${book.title} cover`;
+
+    if (book.alreadyRead) {
+      li.style.backgroundColor = 'lightgreen';
+    } else {
+      li.style.backgroundColor = 'lightcoral';
+    }
+
+    li.appendChild(p);
+    li.appendChild(img);
+    ul.appendChild(li);
+  });
+  return ul;
 }
 
 function main() {

2-Browsers/Week1/assignment/ex1-bookList/style.css

@@ -1 +1,17 @@
 /* Write your style here */
+
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+ul li {
+  width: 500px;
+  padding: 20px;
+  text-align: center;
+  border-radius: 6px;
+  margin-bottom: 20px;
+  display: inline-block;
+  margin-right: 12px;
+}

2-Browsers/Week1/assignment/ex2-aboutMe/index.js

@@ -8,4 +8,10 @@ Full description at: https://github.com/HackYourFuture/Assignments/tree/main/2-B
 3. Look in the css file!
 ------------------------------------------------------------------------------*/
 
-// TODO add your JavaScript code here.
+const ul = document.querySelector('ul').children;
+ul[0].textContent = 'Alooy';
+ul[1].textContent = 'Burgers';
+ul[2].textContent = 'Dongen';
+
+const arr = Array.from(ul);
+arr.forEach((ele) => (ele.className = 'list-item'));

2-Browsers/Week1/assignment/ex2-aboutMe/style.css

@@ -1 +1,4 @@
 /* 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,13 @@ Full description at: https://github.com/HackYourFuture/Assignments/tree/main/2-B
    HackYourFuture logo instead.
 ------------------------------------------------------------------------------*/
 function hijackGoogleLogo() {
-  // TODO your code goes in here
+  const logo = document.querySelector(
+    'img[alt="Google"], img[src*="googlelogo"]'
+  );
+
+  logo.src = 'images.png';
+  logo.srcset = 'images.png';
+  logo.alt = 'HackYourFuture';
 }
 
 hijackGoogleLogo();

2-Browsers/Week1/assignment/ex4-whatsTheTime/index.js

@@ -7,7 +7,18 @@ 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 div = document.createElement('div');
+  const span = document.createElement('span');
+
+  return setInterval(function () {
+    const time = new Date();
+    const hours = String(time.getHours()).padStart(2, '0');
+    const minutes = String(time.getMinutes()).padStart(2, '0');
+    const seconds = String(time.getSeconds()).padStart(2, '0');
+    span.textContent = `${hours}:${minutes}:${seconds}`;
+    div.appendChild(span);
+    document.body.appendChild(div);
+  }, 1000);
 }
 
-// TODO execute `addCurrentTime` when the browser has completed loading the page
+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
 -----------------------------------------------------------------------------*/
+
+const image = document.querySelector('img');
+image.style.left = '0px';
+
+const step = 10;
+const danceUrl =
+  'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif';
+const originalUrl = image.src;
+
+let dancedThisLap = false;
+let timer = setInterval(catWalk, 5000);
+
 function catWalk() {
-  // TODO complete this function
+  const left = parseInt(image.style.left, 10);
+  const max = window.innerWidth - image.width;
+  const middle = Math.floor((window.innerWidth - image.width) / 2);
+
+  const newLeft = left + step;
+  image.style.left = newLeft + 'px';
+
+  if (newLeft >= max) {
+    image.style.left = '0px';
+    dancedThisLap = false;
+    return;
+  }
+
+  if (!dancedThisLap && newLeft >= middle) {
+    dancedThisLap = true;
+    clearInterval(timer);
+    image.src = danceUrl;
+
+    setTimeout(() => {
+      image.src = originalUrl;
+      image.style.left = middle + step + 'px';
+      timer = setInterval(catWalk, 5000);
+    }, 5000);
+  }
 }
 
-// TODO execute `catWalk` when the browser has completed loading the page
+window.addEventListener('load', catWalk);

2-Browsers/Week1/assignment/extra.js

@@ -0,0 +1,16 @@
+function replaceLogo() {
+  const logo = document.querySelector(
+    'img[alt="Google"], img[src*="googlelogo"]'
+  );
+  if (!logo) return;
+  logo.src = chrome.runtime.getURL('images.png'); // uses packaged image
+  logo.removeAttribute('srcset');
+  logo.alt = 'HackYourFuture';
+}
+
+// run once
+replaceLogo();
+
+// reapply if the page updates the logo later
+const obs = new MutationObserver(() => replaceLogo());
+obs.observe(document.documentElement, { childList: true, subtree: true });

2-Browsers/Week1/assignment/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <script src="extra.js"></script>
+  </body>
+</html>

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 (165 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 (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 (1 ms)
+
+Test Suites: 1 passed, 1 total
+Tests:       6 passed, 6 total
+Snapshots:   0 total
+Time:        3.105 s, estimated 4 s
+Ran all test suites matching /\/Users\/Alaa\/Desktop\/JavaScript-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:33:35 - Unknown word (lightgreen)
+2-Browsers/Week1/assignment/ex1-bookList/index.js:35:35 - 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 (316 ms)
+    ✅ should have all TODO comments removed (1 ms)
+    ✅ 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.301 s
+Ran all test suites matching /\/Users\/Alaa\/Desktop\/JavaScript-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:22 - Unknown word (Alooy)
+2-Browsers/Week1/assignment/ex2-aboutMe/index.js:14:22 - Unknown word (Dongen)

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 (1 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.438 s, estimated 1 s
+Ran all test suites matching /\/Users\/Alaa\/Desktop\/JavaScript-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:35 - Unknown word (googlelogo)

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 (171 ms)
+    ✅ should have all TODO comments removed (1 ms)
+    ✅ should use `setInterval()`
+    ✅ should not call `setInterval()` more than once (2003 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.988 s, estimated 5 s
+Ran all test suites matching /\/Users\/Alaa\/Desktop\/JavaScript-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 (165 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.958 s, estimated 3 s
+Ran all test suites matching /\/Users\/Alaa\/Desktop\/JavaScript-Cohort54\/.dist\/2-Browsers\/Week1\/unit-tests\/ex5-catWalk.test.js/i.
+No linting errors detected.
+No spelling errors detected.