DORONIN_DMYTRO-w1-Browser

.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,33 @@ 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')
+  ul.style.listStyle = 'none'
+  ul.style.display = 'flex'
+  ul.style.gap = '10px'
+
+  books.forEach(book => {
+    const li = document.createElement('li')
+
+    if (book.alreadyRead) {
+      li.style.backgroundColor = 'green'
+    } else {
+      li.style.backgroundColor = 'red'
+    }
+
+    const p = document.createElement('p')
+    p.textContent = `${book.title} by ${book.author}`
+
+    const img = document.createElement('img')
+    img.setAttribute('alt', book.title)
+    img.setAttribute('src', book.url)
+
+    li.appendChild(p)
+    li.appendChild(img)
+    ul.appendChild(li)
+  })
+
+  return ul
 }
 
 function main() {
@@ -28,18 +54,21 @@ function main() {
       author: 'Don Norman',
       isbn: '978-0465050659',
       alreadyRead: false,
+      url: './assets/the_design_of_everyday_things.jpg',
     },
     {
       title: 'The Most Human Human',
       author: 'Brian Christian',
       isbn: '978-1617933431',
       alreadyRead: true,
+      url: './assets/the_most_human_human.jpg',
     },
     {
       title: 'The Pragmatic Programmer',
       author: 'Andrew Hunt',
       isbn: '978-0201616224',
       alreadyRead: true,
+      url: './assets/the_pragmatic_programmer.jpg',
     },
   ];
 

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

@@ -8,4 +8,22 @@ 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 changeData = () => {
+  const nickname = document.querySelector('#nickname')
+  const favFood = document.querySelector('#fav-food')
+  const hometown = document.querySelector('#hometown')
+  const listItems = document.querySelectorAll('li')
+
+  nickname.textContent = 'Dmytro'
+  favFood.textContent = 'Borsh'
+  hometown.textContent = 'Haarlem'
+
+  listItems.forEach(item => {
+    item.classList.add('list-item')
+  })
+
+}
+
+changeData()

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,22 @@ Full description at: https://github.com/HackYourFuture/Assignments/tree/main/2-B
    HackYourFuture logo instead.
 ------------------------------------------------------------------------------*/
 function hijackGoogleLogo() {
-  // TODO your code goes in here
+  const logoSvg = document.querySelector('svg.lnXdpd');
+  const hyfLogo =
+    'https://raw.githubusercontent.com/HackYourFuture/Assignments/main/assets/hyf-logo-black-bg-small.png';
+
+  if (logoSvg) {
+    const img = document.createElement('img')
+    img.src = hyfLogo
+    img.srcset = hyfLogo
+    img.alt = 'HackYourFuture'
+    img.style.maxHeight = '92px'
+    img.className = 'lnXdpd'
+
+    logoSvg.replaceWith(img)
+  } else {
+    console.log('Error: logo not found')
+  }
 }
 
-hijackGoogleLogo();
+hijackGoogleLogo()

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

@@ -7,7 +7,20 @@ 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 clock = document.createElement('div')
+  document.body.appendChild(clock)
+
+  updateTime(clock)
+  setInterval(() => updateTime(clock), 1000)
+}
+
+function updateTime(clock) {
+  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')
+
+  clock.textContent = `${hours}:${minutes}:${seconds}`
 }
 
-// TODO execute `addCurrentTime` when the browser has completed loading the page
+window.addEventListener('DOMContentLoaded', addCurrentTime)

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

@@ -1,27 +1,58 @@
-/*------------------------------------------------------------------------------
-Full description at: https://github.com/HackYourFuture/Assignments/tree/main/2-Browsers/Week1#exercise-5-the-cat-walk
-
-1. Create a variable to store a reference to the `<img>` element.
-2. Change the style of the `<img>` to have a `left` of `0px`, so that it starts 
-   at the left hand of the screen.
-3. Complete the function called catWalk() to move the cat 10 pixels to the right
-   of where it started, by changing the `left` style property.
-4. Call that function every 50 milliseconds. Your cat should now be moving 
-   across the screen from left to right. Hurrah!
-5. When the cat reaches the right-hand of the screen, restart them at the left 
-   hand side (`0px`). So they should keep walking from left to right across the 
-   screen, forever and ever.
-6. When the cat reaches the middle of the screen, replace the img with an image 
-   of a cat dancing (use this URL given below), keep it dancing for 5 seconds, 
-   and then replace the img with the original image and have it 
-   continue the walk.
-
-   Dancing cat URL:
-
-   https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif
------------------------------------------------------------------------------*/
 function catWalk() {
-  // TODO complete this function
+  const img = document.querySelector('img')
+
+  const WALK = 'http://www.anniemation.com/clip_art/images/cat-walk.gif'
+  const DANCE = 'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif'
+
+  img.style.left = '0px'
+  img.src = WALK
+
+  let position = 0
+  let timer = null
+  let isDancing = false
+  let dancedThisLap = false
+
+  function step() {
+    if (isDancing) {
+      return
+    }
+    position += 10
+    img.style.left = position + 'px'
+
+    const middle = (window.innerWidth - img.offsetWidth) / 2
+    const end = window.innerWidth - img.offsetWidth
+
+    if (!dancedThisLap && position >= middle) {
+      isDancing = true
+      dancedThisLap = true
+      clearInterval(timer)
+      img.src = DANCE
+
+      setTimeout(() => {
+        img.src = WALK
+        isDancing = false
+        timer = setInterval(step, 50)
+      }, 5000)
+    }
+
+    if (position >= end) {
+      position = 0
+      img.style.left = '0px'
+      dancedThisLap = false
+    }
+  }
+
+  function startWhenReady() {
+    if (img.complete && img.naturalWidth > 0) {
+      timer = setInterval(step, 50)
+    } else {
+      img.addEventListener('load', () => {
+        timer = setInterval(step, 50)
+      }, { once: true })
+    }
+  }
+
+  startWhenReady()
 }
 
-// TODO execute `catWalk` when the browser has completed loading the page
+window.addEventListener('DOMContentLoaded', catWalk)

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 (5.695 s)
+  br-wk1-ex1-bookList
+    ✅ HTML should be syntactically valid (88 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
+    ✅ 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:        5.854 s
+Ran all test suites matching /\/Users\/dimadoronin\/Documents\/Programming\/HackYourFuture\/Assignments-Cohort54\/.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,21 @@
+*** Unit Test Error Report ***
+
+ PASS  .dist/2-Browsers/Week1/unit-tests/ex2-aboutMe.test.js
+  br-wk1-ex2-aboutMe
+    ✅ should be syntactically valid (91 ms)
+    ✅ should have all TODO comments removed (1 ms)
+    ✅ each <li> should have the CSS class `list-item`
+    ✅ each <li> should rendered red (= rgb(255, 0, 0)) (10 ms)
+
+Test Suites: 1 passed, 1 total
+Tests:       4 passed, 4 total
+Snapshots:   0 total
+Time:        1.842 s
+Ran all test suites matching /\/Users\/dimadoronin\/Documents\/Programming\/HackYourFuture\/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:19:27 - Unknown word (Dmytro)
+2-Browsers/Week1/assignment/ex2-aboutMe/index.js:20:26 - Unknown word (Borsh)

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

@@ -0,0 +1,20 @@
+*** 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.245 s, estimated 1 s
+Ran all test suites matching /\/Users\/dimadoronin\/Documents\/Programming\/HackYourFuture\/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:10:49 - Unknown word (Xdpd)
+2-Browsers/Week1/assignment/ex3-hijackLogo.js:20:24 - 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 (91 ms)
+    ✅ should have all TODO comments removed
+    ✅ should use `setInterval()`
+    ✅ should not call `setInterval()` more than once (2001 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
+
+Test Suites: 1 passed, 1 total
+Tests:       6 passed, 6 total
+Snapshots:   0 total
+Time:        4.188 s, estimated 5 s
+Ran all test suites matching /\/Users\/dimadoronin\/Documents\/Programming\/HackYourFuture\/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 (97 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
+
+Test Suites: 1 passed, 1 total
+Tests:       5 passed, 5 total
+Snapshots:   0 total
+Time:        2.175 s
+Ran all test suites matching /\/Users\/dimadoronin\/Documents\/Programming\/HackYourFuture\/Assignments-Cohort54\/.dist\/2-Browsers\/Week1\/unit-tests\/ex5-catWalk.test.js/i.
+No linting errors detected.
+No spelling errors detected.