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

.vscode/settings.json

@@ -16,5 +16,6 @@
   "editor.bracketPairColorization.enabled": true,
   "editor.guides.bracketPairs": true,
   "editor.guides.highlightActiveIndentation": true,
-  "editor.guides.bracketPairsHorizontal": "active"
+  "editor.guides.bracketPairsHorizontal": "active",
+  "liveServer.settings.port": 5501
 }

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,14 @@ 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;
+const nickname = document.getElementById('nickname');
+const favFood = document.getElementById('fav-food');
+const hometown = document.getElementById('hometown');
+
+nickname.textContent = 'Alooy';
+favFood.textContent = 'Burgers';
+hometown.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,12 @@ 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('svg.lnXdpd');
+  const hyfLogo =
+    'https://github.com/HackYourFuture/Assignments/raw/main/assets/hyf-logo-black-bg-small.png';
+  const img = document.createElement('img');
+  img.src = hyfLogo;
+  img.srcset = hyfLogo;
+  logo.replaceWith(img);
 }
-
 hijackGoogleLogo();

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

@@ -6,8 +6,21 @@ Full description at: https://github.com/HackYourFuture/Assignments/tree/main/2-B
   second). Use `setInterval()` to make sure the time stays current.
 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');
+
+  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}`;
+  }, 1000);
+
+  div.appendChild(span);
+  document.body.appendChild(div);
 }
 
-// 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,39 @@ 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 originalUrl = image.src;
+let dancing = false;
+
+const screenWidth = window.innerWidth - image.width;
+const middle = screenWidth / 2;
+
 function catWalk() {
-  // TODO complete this function
+  setInterval(function () {
+    if (dancing) return;
+
+    const stepToLeft = parseInt(image.style.left, 10) + 10;
+    image.style.left = `${stepToLeft}px`;
+
+    if (stepToLeft >= screenWidth) {
+      image.style.left = '0px';
+      return;
+    }
+
+    if (stepToLeft >= middle && stepToLeft < middle + 10) {
+      stopDancing();
+    }
+  }, 50);
 }
 
-// TODO execute `catWalk` when the browser has completed loading the page
+function stopDancing() {
+  dancing = true;
+  image.src =
+    'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif';
+  setTimeout(function () {
+    image.src = originalUrl;
+    dancing = false;
+  }, 5000);
+}
+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 (168 ms)
+    ✅ should have all TODO comments removed
+    ✅ 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 (1 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.056 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 (167 ms)
+    ✅ should have all TODO comments removed
+    ✅ each <li> should have the CSS class `list-item` (2 ms)
+    ✅ each <li> should rendered red (= rgb(255, 0, 0)) (23 ms)
+
+Test Suites: 1 passed, 1 total
+Tests:       4 passed, 4 total
+Snapshots:   0 total
+Time:        3.083 s, estimated 5 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:16:25 - Unknown word (Alooy)
+2-Browsers/Week1/assignment/ex2-aboutMe/index.js:18:25 - 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 (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.477 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:10:46 - 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 (165 ms)
+    ✅ should have all TODO comments removed
+    ✅ should use `setInterval()` (1 ms)
+    ✅ 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
+
+Test Suites: 1 passed, 1 total
+Tests:       6 passed, 6 total
+Snapshots:   0 total
+Time:        5.055 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 (14.285 s)
+  br-wk1-ex5-catWalk
+    ✅ HTML should be syntactically valid (193 ms)
+    ✅ should have all TODO comments removed (1 ms)
+    ✅ 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:        15.384 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.