modified

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

@@ -18,7 +18,31 @@ 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 bookList = document.getElementById('bookList');
+  const ulElement= document.createElement('ul');
+
+  books.forEach((book) => {
+    const liElement = document.createElement('li');
+    const pElement = document.createElement('p');
+    pElement.textContent = `${book.title} by ${book.author}`;
+
+    const imgElement = document.createElement('img');
+    imgElement.src = `https://covers.openlibrary.org/b/isbn/${book.isbn}-M.jpg`;
+    imgElement.alt = `Cover of ${book.title}`;
+
+    if (book.alreadyRead) {
+      liElement.style.color = 'green';  
+    } else {
+      liElement.style.color = 'red'; 
+    }
+
+    liElement.appendChild(pElement);
+    liElement.appendChild(imgElement);
+    ulElement.appendChild(liElement);
+    bookList.appendChild(ulElement);
+  });
+
+  return ulElement;
 }
 
 function main() {

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

@@ -1 +1,54 @@
 /* Write your style here */
+/* Genel sayfa stili */
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    margin: 0;
+    padding: 20px;
+  }
+
+  /* Kitap listesinin stilini belirlemek */
+  #bookList {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px; /* Kitaplar arasındaki boşluk */
+    justify-content: center; /* Kitapları yatayda ortalar */
+  }
+
+
+  #bookList li {
+    list-style-type: none;
+    background-color: #fff;
+    padding: 15px;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    align-items: center; /* İçeriği ortalar */
+    width: 200px; /* Her bir kitabın genişliği */
+    text-align: center; /* Metni ortalar */
+  }
+
+  #bookList li img {
+    max-width: 100px; /* Resmin maksimum genişliği */
+    max-height: 150px; /* Resmin maksimum yüksekliği */
+    margin-bottom: 10px;
+  }
+
+  /* Okunan kitaplar için yeşil yazı rengi */
+  #bookList li[style*="color: green"] {
+    border-left: 5px solid green;
+  }
+
+  /* Okunmamış kitaplar için kırmızı yazı rengi */
+  #bookList li[style*="color: red"] {
+    border-left: 5px solid red;
+  }
+
+  /* Sayfa başlığı için stil */
+  h1 {
+    font-size: 24px;
+    color: #333;
+    text-align: center;
+    margin-bottom: 20px;
+  }

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

@@ -9,4 +9,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.
+
+
+document.getElementById('nickname').textContent = 'TuFi';
+document.getElementById('fav-food').textContent = 'Fries';
+document.getElementById('hometown').textContent = 'Leiden';
+
+const listItems = document.querySelectorAll('ul li');
+listItems.forEach((li) => {
+   li.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

@@ -8,7 +8,13 @@ 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[class="lnXdpd"]');
+  const newLogo = 'https://www.hackyourfuture.dk/static/logo-dark.svg';
+
+  if (logo) {
+   logo.src = newLogo;
+   logo.srcset = newLogo;
+  }
 }
 
 hijackGoogleLogo();

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

@@ -8,7 +8,18 @@ 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 timeElement = document.getElementById('current-time');
+  const now = new Date();
+
+  const hours = now.getHours().toString().padStart(2, '0');
+  const minutes = now.getMinutes().toString().padStart(2, '0');
+  const seconds = now.getSeconds().toString().padStart(2, '0');
+
+  const currentTime = `${hours}:${minutes}:${seconds}`;
+
+  timeElement.textContent = currentTime;
 }
 
-// TODO execute `addCurrentTime` when the browser has completed loading the page
+setInterval(addCurrentTime, 1000);
+
+window.addEventListener('load', addCurrentTime);

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

@@ -22,7 +22,32 @@ 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 = document.querySelector('img');
+  img.style.left = '0px';
+
+  const direction = 10;
 
-// TODO execute `catWalk` when the browser has completed loading the page
+  function moveCat() {
+   const currentLeft = parseInt(img.style.left);
+   const screenWidth = window.innerWidth - img.width;
+   const middleOfScreen = screenWidth / 2;
+
+   if (currentLeft >= middleOfScreen && currentLeft < middleOfScreen + 10) {
+      img.src = 'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif';
+      setTimeout(() => {
+        img.src = 'https://www.example.com/original-cat-image.jpg'; 
+      }, 5000); 
+    }
+
+    if(currentLeft >= screenWidth) {
+      img.style.left = '0px'; 
+   } else {
+     img.style.left = `${currentLeft + direction}px`; 
+   } 
+    }
+
+    setInterval(moveCat, 50);
+
+   }
+
+   window.addEventListener('load', catWalk);

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

@@ -15,10 +15,12 @@ const NUM_ROWS = 40;
 // life or death
 function createCell(x, y) {
   const alive = Math.random() > 0.5;
+  const lifeTime = alive ? 1 : 0;
   return {
     x,
     y,
     alive,
+    lifeTime,
   };
 }
 
@@ -47,6 +49,16 @@ function createGame(context, numRows, numColumns) {
 
   // Draw a cell onto the canvas
   function drawCell(cell) {
+    let opacity = 0;
+  if (cell.lifeTime === 1) {
+    opacity = 0.25;
+  } else if (cell.lifeTime === 2) {
+    opacity = 0.5;
+  } else if (cell.lifeTime === 3) {
+    opacity = 0.75;
+  } else if (cell.lifeTime >= 4) {
+    opacity = 1;
+  }
     // Draw cell background
     context.fillStyle = '#303030';
     context.fillRect(
@@ -58,7 +70,7 @@ function createGame(context, numRows, numColumns) {
 
     if (cell.alive) {
       // Draw living cell inside background
-      context.fillStyle = `rgb(24, 215, 236)`;
+      context.fillStyle = `rgba(24, 215, 236, ${opacity})`;
       context.fillRect(
         cell.x * CELL_SIZE + 1,
         cell.y * CELL_SIZE + 1,
@@ -115,6 +127,17 @@ function createGame(context, numRows, numColumns) {
 
     // Apply the newly computed state to the cells
     forEachCell((cell) => {
+      if(cell.nextAlive) {
+        if(cell.alive) {
+          cell.lifeTime += 1;
+        } else {
+          cell.lifeTime = 1;
+        }
+      } else {
+        if(cell.alive) {
+          cell.lifeTime = 0;
+        }
+      }
       cell.alive = cell.nextAlive;
     });
   }

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

@@ -0,0 +1 @@
+All tests passed

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

@@ -0,0 +1 @@
+All tests passed

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

@@ -0,0 +1,4 @@
+
+*** Spell Checker Report ***
+
+/Users/hackyourfuture/Desktop/assignments-cohort49/2-Browsers/Week1/assignment/ex3-hijackLogo.js:11:53 - Unknown word (Xdpd)

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

@@ -0,0 +1 @@
+All tests passed

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

@@ -0,0 +1 @@
+All tests passed

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

@@ -0,0 +1 @@
+All tests passed