ILIA_BUBNOV-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,22 @@ 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");
+    p.textContent = `${book.title} by ${book.author}`;
+    img.src = book.imgSrc;
+    img.alt = book.title;
+    if (!book.alreadyRead) {
+      li.classList.add('not-read')
+    }
+    li.appendChild(p);
+    li.appendChild(img);
+    ul.appendChild(li);
+  });
+  return ul;
 }
 
 function main() {
@@ -28,18 +43,21 @@ function main() {
       author: 'Don Norman',
       isbn: '978-0465050659',
       alreadyRead: false,
+      imgSrc: 'assets/the_design_of_everyday_things.jpg',
     },
     {
       title: 'The Most Human Human',
       author: 'Brian Christian',
       isbn: '978-1617933431',
       alreadyRead: true,
+      imgSrc: 'assets/the_most_human_human.jpg',
     },
     {
       title: 'The Pragmatic Programmer',
       author: 'Andrew Hunt',
       isbn: '978-0201616224',
       alreadyRead: true,
+      imgSrc: 'assets/the_pragmatic_programmer.jpg',
     },
   ];
 

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

@@ -1 +1,38 @@
 /* Write your style here */
+html {
+    font-size: 62.5% !important;
+    background-color: #faf6f6;
+}
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+#bookList {
+    display: flex;
+    flex-wrap: wrap;
+}
+ul {
+    list-style-type: none;
+}
+li {
+    display: inline-block;
+    background-color: green;
+    padding: 1rem;
+    margin: 1rem;
+    border-radius: 1rem;
+    width: 40rem;
+}
+h1 {
+    font-size: 4rem;
+    text-align: center;
+    margin: 1rem;
+}
+p {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    text-align: center;
+}
+.not-read {
+    background-color: red;
+}

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.
+// function to change text value of tags
+
+const changeAboutMe = (tag, value) => {
+  document.getElementById(tag).textContent = value;
+}
+changeAboutMe('nickname', 'mbreathe');
+changeAboutMe('fav-food', 'sushi');
+changeAboutMe('hometown', 'bratsk');
+const listItems = document.querySelectorAll('li');
+listItems.forEach(liItem => liItem.classList.add('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,9 @@ 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"]');
+  logo.src = 'https://raw.githubusercontent.com/HackYourFuture/Assignments/refs/heads/main/assets/hyf-logo-black-bg-small.png';
+  logo.srcset = 'https://raw.githubusercontent.com/HackYourFuture/Assignments/refs/heads/main/assets/hyf-logo-black-bg-small.png 272w';
 }
 
 hijackGoogleLogo();

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

@@ -6,8 +6,15 @@ 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 clock = document.createElement("p");
+document.body.appendChild(clock)
+
 function addCurrentTime() {
-  // TODO complete this function
+    const date = new Date().toLocaleTimeString();
+    clock.textContent = `Current time is: ${date}`;
 }
 
-// TODO execute `addCurrentTime` when the browser has completed loading the page
+window.onload = () => {
+    addCurrentTime()
+    setInterval(addCurrentTime, 1000);
+}

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

@@ -20,8 +20,45 @@ 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
+
+const IMG_WALK = 'http://www.anniemation.com/clip_art/images/cat-walk.gif'
+const IMG_DANCE = 'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif'
+const WALK_SPEED = 10;
+const ANIMATION_INTERVAL = 50;
+const DANCE_DURATION = 5000;
+
+const imgDom = document.querySelector("img");
+let num = 0;
+const windowWidth = window.innerWidth;
+let intervalID;
+imgDom.style.left = `${num}px`;
+
+const startInterval = () => {
+  intervalID = setInterval(catWalk, ANIMATION_INTERVAL);
+}
+
+const stopAndContinueInterval = () => {
+  clearInterval(intervalID);
+  setTimeout(() => {
+    imgDom.src = IMG_WALK;
+    startInterval();
+  }, DANCE_DURATION);
 }
 
-// TODO execute `catWalk` when the browser has completed loading the page
+function catWalk() {
+  const middlePositionImg = num + ((Math.round((imgDom.offsetWidth / 2) / 10)) * 10);
+  const middleScreen = ((Math.round((windowWidth / 2) / 10)) * 10);
+
+  if (num >= (windowWidth - imgDom.offsetWidth)) {
+    num = 0;
+  }
+  if (middlePositionImg === middleScreen) {
+    imgDom.src = IMG_DANCE;
+    stopAndContinueInterval()
+  }
+  return imgDom.style.left = `${num += WALK_SPEED}px`;
+}
+window.onload = () => {
+  catWalk();
+  startInterval();
+}

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 (107 ms)
+    ✅ should have all TODO comments removed
+    ✅ 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:        3.963 s, estimated 4 s
+Ran all test suites matching /C:\\Users\\BidonLoverXXX\\WebstormProjects\\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,21 @@
+*** Unit Test Error Report ***
+
+ PASS  .dist/2-Browsers/Week1/unit-tests/ex2-aboutMe.test.js
+  br-wk1-ex2-aboutMe
+    ✅ should be syntactically valid (107 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)) (17 ms)
+
+Test Suites: 1 passed, 1 total
+Tests:       4 passed, 4 total
+Snapshots:   0 total
+Time:        3.228 s
+Ran all test suites matching /C:\\Users\\BidonLoverXXX\\WebstormProjects\\Assignments-cohort52\\.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:28 - Unknown word (mbreathe)
+2-Browsers/Week1/assignment/ex2-aboutMe/index.js:18:28 - Unknown word (bratsk)

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

@@ -0,0 +1,15 @@
+*** 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 (1 ms)
+
+Test Suites: 1 passed, 1 total
+Tests:       3 passed, 3 total
+Snapshots:   0 total
+Time:        0.572 s, estimated 1 s
+Ran all test suites matching /C:\\Users\\BidonLoverXXX\\WebstormProjects\\Assignments-cohort52\\.dist\\2-Browsers\\Week1\\unit-tests\\ex3-hijackLogo.test.js/i.
+No linting errors detected.
+No spelling errors detected.

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 (105 ms)
+    ✅ should have all TODO comments removed (1 ms)
+    ✅ should use `setInterval()`
+    ✅ should not call `setInterval()` more than once (2013 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:       6 passed, 6 total
+Snapshots:   0 total
+Time:        5.235 s
+Ran all test suites matching /C:\\Users\\BidonLoverXXX\\WebstormProjects\\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 (110 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 (1 ms)
+    ✅ `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:        3.397 s, estimated 4 s
+Ran all test suites matching /C:\\Users\\BidonLoverXXX\\WebstormProjects\\Assignments-cohort52\\.dist\\2-Browsers\\Week1\\unit-tests\\ex5-catWalk.test.js/i.
+No linting errors detected.
+No spelling errors detected.