Nikita-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,38 @@ 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 listBooks = document.createElement('ul');
+  listBooks.classList.add('list__books');
+
+  books.forEach((book) => {
+    const paragraph = document.createElement('p');
+    paragraph.classList.add('title');
+
+    const itemBook = document.createElement('li');
+    itemBook.classList.add('item__book');
+
+    // if (book.alreadyRead) {
+    //   itemBook.classList.add('item__book-read');
+    // } else {
+    //   itemBook.classList.add('item__book-not-read');
+    // }
+    book.alreadyRead
+      ? itemBook.classList.add('item__book-read')
+      : itemBook.classList.add('item__book-not-read');
+
+    const imgBook = document.createElement('img');
+    imgBook.classList.add('img__book');
+    imgBook.src = book.image;
+    imgBook.alt = `Cover of ${book.title} by ${book.author}`;
+    // paragraph.textContent = book.title + ' ' + book.author;
+    paragraph.textContent = `${book.title} ${book.author}`;
+
+    itemBook.appendChild(imgBook);
+    itemBook.appendChild(paragraph);
+    listBooks.appendChild(itemBook);
+  });
+
+  return listBooks;
 }
 
 function main() {
@@ -28,18 +59,21 @@ function main() {
       author: 'Don Norman',
       isbn: '978-0465050659',
       alreadyRead: false,
+      image: 'assets/the_design_of_everyday_things.jpg',
     },
     {
       title: 'The Most Human Human',
       author: 'Brian Christian',
       isbn: '978-1617933431',
       alreadyRead: true,
+      image: 'assets/the_most_human_human.jpg',
     },
     {
       title: 'The Pragmatic Programmer',
       author: 'Andrew Hunt',
       isbn: '978-0201616224',
       alreadyRead: true,
+      image: 'assets/the_pragmatic_programmer.jpg',
     },
   ];
 

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

@@ -1 +1,18 @@
-/* Write your style here */
+.list__books {
+  list-style-type: none;
+  display: flex;
+  gap: 25px;
+  flex-wrap: wrap;
+}
+
+.item__book {
+  padding: 10px;
+}
+
+.item__book-read {
+  background-color: green;
+}
+
+.item__book-not-read {
+  background-color: red;
+}

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

@@ -8,4 +8,12 @@ Full description at: https://github.com/HackYourFuture/Assignments/tree/main/2-B
 3. Look in the css file!
 ------------------------------------------------------------------------------*/
 
-// TODO add your JavaScript code here.
+document.getElementById('nickname').textContent = 'Nikita';
+document.getElementById('fav-food').textContent = 'Pasta';
+document.getElementById('hometown').textContent = 'Moscow';
+
+document
+  .querySelectorAll('li')
+  .forEach((item) => item.classList.add('list-item'));
+
+

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

@@ -1 +1,3 @@
-/* 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,15 @@ Full description at: https://github.com/HackYourFuture/Assignments/tree/main/2-B
    HackYourFuture logo instead.
 ------------------------------------------------------------------------------*/
 function hijackGoogleLogo() {
-  // TODO your code goes in here
-}
-
-hijackGoogleLogo();
+   const googleLogo = document.querySelector('.lnXdpd');
+
+   if (googleLogo) {
+     const newLogoUrl = 'https://github.com/HackYourFuture/Assignments/blob/main/assets/hyf-logo-black-bg-small.png';
+
+     googleLogo.src = newLogoUrl; 
+     googleLogo.srcset = newLogoUrl;
+   }
+ }
+
+ hijackGoogleLogo();
+

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

@@ -6,8 +6,18 @@ 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.
 ------------------------------------------------------------------------------*/
+
+const container = document.querySelector('body');
+const titleTime = document.createElement('h1');
+titleTime.textContent = 'Loading...';
+container.appendChild(titleTime);
+
 function addCurrentTime() {
-  // TODO complete this function
+  let currentTime = new Date().toLocaleTimeString('en-GB', { timeZone: 'Europe/Amsterdam' });
+  titleTime.textContent = currentTime;
 }
 
-// TODO execute `addCurrentTime` when the browser has completed loading the page
+window.addEventListener('DOMContentLoaded', () => {
+  addCurrentTime();
+  setInterval(addCurrentTime, 1000);
+});

2-Browsers/Week1/assignment/ex5-catWalk/index.js

@@ -20,8 +20,38 @@ Full description at: https://github.com/HackYourFuture/Assignments/tree/main/2-B
 
    https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif
 -----------------------------------------------------------------------------*/
+const movingCat = document.querySelector('img');
+let startPoint = 0;
+let timerId;
+const clientWidth = document.documentElement.clientWidth;
+const widthCat = movingCat.clientWidth;
+let isCatCenter = false;
+const centerPosition = (clientWidth - widthCat) / 2;
+const dancingCatGIF =
+  'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif';
+const walkingCatGIF = 'http://www.anniemation.com/clip_art/images/cat-walk.gif';
+
 function catWalk() {
-  // TODO complete this function
+  movingCat.style.left = `${startPoint}px`;
+  startPoint += 10;
+
+  if (startPoint >= clientWidth - widthCat) {
+    startPoint = 0;
+    isCatCenter = false;
+  }
+
+  if (startPoint >= centerPosition && !isCatCenter) {
+    clearInterval(timerId);
+    movingCat.src = dancingCatGIF;
+
+    setTimeout(() => {
+      movingCat.src = walkingCatGIF;
+      isCatCenter = true;
+      timerId = setInterval(catWalk, 50);
+    }, 5000);
+  }
 }
 
-// TODO execute `catWalk` when the browser has completed loading the page
+window.addEventListener('DOMContentLoaded', () => {
+  timerId = setInterval(catWalk, 50);
+});

2-Browsers/Week1/test-reports/ex1-bookList.report.txt

@@ -0,0 +1,18 @@
+*** Unit Test Error Report ***
+
+ PASS  .dist/2-Browsers/Week1/unit-tests/ex1-bookList.test.js
+  br-wk1-ex1-bookList
+    ✅ HTML should be syntactically valid (76 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
+
+Test Suites: 1 passed, 1 total
+Tests:       6 passed, 6 total
+Snapshots:   0 total
+Time:        1.666 s, estimated 5 s
+Ran all test suites matching /\/Users\/nikitastefanchuk\/Desktop\/Projects\/Assignments-cohort52\/.dist\/2-Browsers\/Week1\/unit-tests\/ex1-bookList.test.js/i.
+No linting errors detected.
+No spelling errors detected.

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

@@ -0,0 +1,16 @@
+*** Unit Test Error Report ***
+
+ PASS  .dist/2-Browsers/Week1/unit-tests/ex2-aboutMe.test.js
+  br-wk1-ex2-aboutMe
+    ✅ should be syntactically valid (83 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)) (8 ms)
+
+Test Suites: 1 passed, 1 total
+Tests:       4 passed, 4 total
+Snapshots:   0 total
+Time:        1.682 s, estimated 2 s
+Ran all test suites matching /\/Users\/nikitastefanchuk\/Desktop\/Projects\/Assignments-cohort52\/.dist\/2-Browsers\/Week1\/unit-tests\/ex2-aboutMe.test.js/i.
+No linting errors detected.
+No spelling errors detected.

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
+    ✅ 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.164 s, estimated 1 s
+Ran all test suites matching /\/Users\/nikitastefanchuk\/Desktop\/Projects\/Assignments-cohort52\/.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:50 - 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 (74 ms)
+    ✅ should have all TODO comments removed
+    ✅ 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:        3.666 s, estimated 4 s
+Ran all test suites matching /\/Users\/nikitastefanchuk\/Desktop\/Projects\/Assignments-cohort52\/.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 (73 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
+
+Test Suites: 1 passed, 1 total
+Tests:       5 passed, 5 total
+Snapshots:   0 total
+Time:        1.689 s
+Ran all test suites matching /\/Users\/nikitastefanchuk\/Desktop\/Projects\/Assignments-cohort52\/.dist\/2-Browsers\/Week1\/unit-tests\/ex5-catWalk.test.js/i.
+No linting errors detected.
+No spelling errors detected.