browser week1 done

2-Browsers/Week1/homework/ex1-bookList/index.js

@@ -24,25 +24,54 @@ const myBooks = [
     author: 'Don Norman',
     isbn: '978-0465050659',
     alreadyRead: false,
+    imgSrc: 'url(assets/the_design_of_everyday_things.jpg)',
   },
   {
     title: 'The Most Human Human',
     author: 'Brian Christian',
     isbn: '978-1617933431',
     alreadyRead: true,
+    imgSrc: 'url(assets/the_most_human_human.jpg)',
   },
   {
     title: 'The Pragmatic Programmer',
     author: 'Andrew Hunt',
     isbn: '978-0201616224',
     alreadyRead: true,
+    imgSrc: 'url(assets/the_pragmatic_programmer.jpg)',
   },
 ];
 
 function createBookList(books) {
-  // your code goes in here, return the ul element
-}
+  const ulElement = document.createElement('ul');
+  ulElement.style.display = 'flex';
+  document.querySelector('#bookList').appendChild(ulElement);
+
+  for (let i = 0; i < books.length; i++) {
+    const liElement = document.createElement('li');
+    liElement.setAttribute(
+      'style',
+      'width:calc(30% - 20px); display:block; margin: 10px 20px; padding: 10px;min-width:300px;background-color:red;listStyle :none'
+    );
+
+    if (books[i].alreadyRead === true) {
+      liElement.style.backgroundColor = 'green';
+    }
 
+    ulElement.appendChild(liElement);
+    const liElementText = document.createElement('p');
+    liElementText.textContent = `${books[i].title} - ${books[i].author}`;
+    const liImg = document.createElement('img');
+    liImg.src = `${books[i].imgSrc}`;
+    liImg.alt = `${books[i].imgSrc}`;
+    // the picture doesn't show up the page, but when i called as a background, it is ok. of course it is not the way we are inquired.
+    // liImg.style.backgroundImage = books[i].imgSrc;
+    liImg.setAttribute('style', ' height:400px;float:left; margin: 20px;');
+
+    liElement.appendChild(liElementText);
+    liElement.appendChild(liImg);
+  }
+}
 const ulElement = createBookList(myBooks);
 
 document.querySelector('#bookList').appendChild(ulElement);

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

@@ -9,3 +9,21 @@
 ------------------------------------------------------------------------------*/
 
 // TODO add your JavaScript code here.
+
+const body = document.querySelector('body');
+body.style.fontFamily = 'Arial, sans-serif';
+
+const name = document.getElementById('nickname');
+name.textContent = 'Hudawaerdi Aibaidula';
+
+const favFood = document.getElementById('fav-food');
+favFood.textContent = 'Pilav, Doner, Pitsa';
+
+const home = document.getElementById('hometown');
+home.textContent = 'Urumqi';
+const liElement = document.getElementsByTagName('li');
+
+for (let i = 0; i < liElement.length; i++) {
+  liElement[i].className = 'list-item';
+}
+//each <li> should rendered red  , i can't understand what they want to say 'rendered red'

2-Browsers/Week1/homework/ex3-hijackLogo.js

@@ -6,7 +6,9 @@
    HackYourFuture logo instead.
 ------------------------------------------------------------------------------*/
 function hijackGoogleLogo() {
-  // TODO your code goes in here
+  let logo = document.querySelector('.lnXdpd');
+  logo.src = 'https://www.hackyourfuture.dk/static/logo-dark.svg';
+  logo.srcset = 'https://www.hackyourfuture.dk/static/logo-dark.svg';
 }
 
 hijackGoogleLogo();

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

@@ -6,7 +6,47 @@
 2. Have the function execute when it's loading in the browser.
 ------------------------------------------------------------------------------*/
 function addCurrentTime() {
-  // TODO complete this function
+  let time = new Date();
+  let hour = time.getHours();
+  let min = time.getMinutes();
+  let sec = time.getSeconds();
+  let am_pm = 'AM';
+
+  if (hour > 12) {
+    hour = hour - 12;
+    am_pm = 'PM';
+  }
+  if (hour == 0) {
+    hour = 12;
+    am_pm = 'AM';
+  }
+  hour = hour < 10 ? '0' + hour : hour;
+  min = min < 10 ? '0' + min : min;
+  sec = sec < 10 ? '0' + sec : sec;
+
+  let currentTime = hour + ':' + min + ':' + sec + ':' + am_pm;
+  return currentTime;
 }
 
+const body = document.querySelector('body');
+const clockDiv = document.createElement('h1');
+clockDiv.className = 'clock-box';
+clockDiv.setAttribute(
+  'style',
+  ' width:200px; height:100px; margin-top:100px; font-size:50px; color:green'
+);
+clockDiv.style.borderBlockEndColor = 'orange';
+clockDiv.textContent = addCurrentTime();
+clockDiv.className = 'clock-box';
+body.appendChild(clockDiv);
+
+const clock = document
+  .querySelector('.clock-box')
+  .addEventListener('click', addCurrentTime);
+
+//  addCurrentTime();
+
+setInterval(addCurrentTime(), 1000);
+
+window.addEventListener('DOMContentLoaded', addCurrentTime);
 // TODO execute `addCurrentTime` when the browser has completed loading the page

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

@@ -20,7 +20,28 @@
    https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif
 -----------------------------------------------------------------------------*/
 function catWalk() {
-  // TODO complete this function
-}
+  let cat = document.getElementsByTagName('img')[0];
+  let position = 10;
+  cat.style.width = '200px';
+  let catMove = setInterval(moveCat, 50);
 
+  function moveCat() {
+    cat.style.left = `${position}px`;
+    position += 10;
+    let fullWidth = window.innerWidth;
+    if (position === fullWidth) {
+      position = 0;
+    }
+    if (position === fullWidth / 2) {
+      clearInterval(catMove);
+      cat.src =
+        'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif';
+      setTimeout(function () {
+        catMove = setInterval(moveCat, 50);
+        cat.src = 'http://www.anniemation.com/clip_art/images/cat-walk.gif';
+      }, 5000);
+    }
+  }
+}
+window.addEventListener('DOMContentLoaded', catWalk);
 // TODO execute `catWalk` when the browser has completed loading the page

2-Browsers/Week1/homework/ex6-gameOfLife/index.js

@@ -9,12 +9,25 @@ const NUM_ROWS = 40;
 
 // Create a cell with the given coordinates and randomly assign its begin state:
 // life or death
+/* 
+Exercise
+In the supplied JavaScript code the color of all living cells is a single shade of blue. This is in contrast to the illustration above where living cells have different shades of blue, depending on their life time. Your job is as follows:
+
+In function createCell(), add a numeric lifeTime property to the object and assign it the value of one if the cell is initially alive or zero if it is initially dead.
+
+In function drawCell(), add an opacity parameter to the rgb() value like this:
+
+context.fillStyle = `rgb(24, 215, 236, ${opacity})`;
+*/
+
 function createCell(x, y) {
   const alive = Math.random() > 0.5;
+  const lifeTime = 0;
   return {
     x,
     y,
     alive,
+    lifeTime,
   };
 }
 
@@ -45,6 +58,7 @@ function createGame(context, numRows, numColumns) {
   function drawCell(cell) {
     // Draw cell background
     context.fillStyle = '#303030';
+    // context.fillStyle = `rgb(24, 215, 236, ${opacity})`;
     context.fillRect(
       cell.x * CELL_SIZE,
       cell.y * CELL_SIZE,
@@ -54,7 +68,7 @@ function createGame(context, numRows, numColumns) {
 
     if (cell.alive) {
       // Draw living cell inside background
-      context.fillStyle = `rgb(24, 215, 236)`;
+      context.fillStyle = `rgb(24, 215, 236, ${cell.lifeTime / 4})`;
       context.fillRect(
         cell.x * CELL_SIZE + 1,
         cell.y * CELL_SIZE + 1,
@@ -97,15 +111,18 @@ function createGame(context, numRows, numColumns) {
       // Count number of living neighboring cells
       const numAlive = countLivingNeighbors(cell);
 
-      if (numAlive === 2) {
+      if (numAlive === 2 && cell.alive > 0) {
         // Living cell remains living, dead cell remains dead
         cell.nextAlive = cell.alive;
+        cell.lifeTime += 1;
       } else if (numAlive === 3) {
         // Dead cell becomes living, living cell remains living
         cell.nextAlive = true;
+        cell.lifeTime += 1;
       } else {
         // Living cell dies, dead cell remains dead
         cell.nextAlive = false;
+        cell.lifeTime = 0;
       }
     });
 

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

@@ -0,0 +1,8 @@
+
+*** ESLint Report ***
+
+ex1-bookList/index.js
+  68:5  warning  Remove commented-out code  hyf/no-commented-out-code
+
+✖ 1 problem (0 errors, 1 warning)
+

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

@@ -0,0 +1,11 @@
+*** Unit Test Error Report ***
+
+- Generated HTML - each <li> should rendered red
+
+*** Spell Checker Report ***
+
+ex2-aboutMe/index.js:17:21 - Unknown word (Hudawaerdi)
+ex2-aboutMe/index.js:17:32 - Unknown word (Aibaidula)
+ex2-aboutMe/index.js:20:24 - Unknown word (Pilav)
+ex2-aboutMe/index.js:20:31 - Unknown word (Doner)
+ex2-aboutMe/index.js:20:38 - Unknown word (Pitsa)

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

@@ -0,0 +1,12 @@
+
+*** ESLint Report ***
+
+ex3-hijackLogo.js
+  9:7  warning  'logo' is never reassigned. Use 'const' instead  no-autofix/prefer-const
+
+✖ 1 problem (0 errors, 1 warning)
+
+
+*** Spell Checker Report ***
+
+ex3-hijackLogo.js:9:41 - Unknown word (Xdpd)

2-Browsers/Week1/test-reports/ex4-whatsTheTime.fail.txt

@@ -0,0 +1,13 @@
+
+*** ESLint Report ***
+
+ex4-whatsTheTime/index.js
+   9:7   warning  'time' is never reassigned. Use 'const' instead         no-autofix/prefer-const
+  13:7   warning  Identifier 'am_pm' is not in camelCase                  hyf/camelcase
+  19:12  error    Expected '===' and instead saw '=='                     eqeqeq
+  27:7   warning  'currentTime' is never reassigned. Use 'const' instead  no-autofix/prefer-const
+  43:7   error    'clock' is assigned a value but never used              no-unused-vars
+  47:1   warning  Remove commented-out code                               hyf/no-commented-out-code
+
+✖ 6 problems (2 errors, 4 warnings)
+

2-Browsers/Week1/test-reports/ex5-catWalk.fail.txt

@@ -0,0 +1,9 @@
+
+*** ESLint Report ***
+
+ex5-catWalk/index.js
+  23:7  warning  'cat' is never reassigned. Use 'const' instead        no-autofix/prefer-const
+  31:9  warning  'fullWidth' is never reassigned. Use 'const' instead  no-autofix/prefer-const
+
+✖ 2 problems (0 errors, 2 warnings)
+

2-Browsers/Week1/test-reports/ex6-gameOfLife.fail.txt

@@ -0,0 +1,8 @@
+
+*** ESLint Report ***
+
+ex6-gameOfLife/index.js
+  61:5  warning  Remove commented-out code  hyf/no-commented-out-code
+
+✖ 1 problem (0 errors, 1 warning)
+