Hadidreem17 w1 browsers

.test-summary/TEST_SUMMARY.md

@@ -0,0 +1,9 @@
+## 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    |   -    |   ✓    |

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

@@ -18,9 +18,27 @@ 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');
+    p.textContent = `${book.title} - ${book.author} `;
+    const img = document.createElement ('img');
+    img.src = `https://covers.openlibrary.org/b/isbn/${book.isbn}-M.jpg`;
+    img.alt = `${book.title} cover`;
+    li.appendChild (p);
+    li.appendChild (img);
+    if (book.alreadyRead) {
+      li.style.backgroundColor = 'green';
+    }
+    else 
+  { li.style.backgroundColor = 'red'} ;
+    ul.appendChild (li);
+  });
+  return ul;
 }
 
+
 function main() {
   const myBooks = [
     {

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

@@ -1 +1,37 @@
 /* Write your style here */
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    margin: 0;
+    padding: 20px;
+}
+h1 {
+    text-align: center;
+    color: #333;
+}
+ul {
+    list-style-type: none;
+    padding: 0;
+    display : grid ;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap : 16px;
+
+}
+li {
+    background: #fff;
+    margin: 10px 0;
+    padding: 15px;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+img {
+   width: 100% ;
+   height: auto ;
+   border -radius: 5px ;
+   display : block ;
+
+}
+p {
+    margin: 0;
+    padding: 0;
+}

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

@@ -8,4 +8,16 @@ 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 aboutMe() {
+  const nickname = document.querySelector ('#nickname');
+  nickname.textContent = 'Rim';
+  const favFood = document.querySelector ('#fav-food');
+  favFood.textContent = 'Sushi';
+  const hometown = document.querySelector ('#hometown');
+  hometown.textContent = 'Tokyo';
+  const listItems = document.querySelectorAll ('li');
+  listItems.forEach(item => {
+    item.classList.add('list-item');
+  });
+}
+aboutMe();

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

@@ -1 +1,11 @@
-/* 3. Add a css rule for .list-item to make the color red. */
+
+body { 
+
+  font-family: Arial, sans-serif;
+  margin: auto;
+  padding: 20px;
+}
+
+.list-item {
+  color: red ;
+}

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

@@ -7,7 +7,10 @@ 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://www.hackyourfuture.be/static/logo.png';
+  logo.srcset = 'https://www.hackyourfuture.be/static/logo.png';
+
 }
 
 hijackGoogleLogo();

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

@@ -7,7 +7,8 @@ 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
-}
+  document.querySelector('time').textContent= new Date().toLocaleTimeString() ;
+  setInterval(addCurrentTime, 1000) ;
 
-// TODO execute `addCurrentTime` when the browser has completed loading the page
+}
+window.onload = addCurrentTime;

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

@@ -19,9 +19,43 @@ Full description at: https://github.com/HackYourFuture/Assignments/tree/main/2-B
    Dancing cat URL:
 
    https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif
------------------------------------------------------------------------------*/
-function catWalk() {
-  // TODO complete this function
-}
+   -----------------------------------------------------------------------------*/
+window.addEventListener('load', function () {
+  const cat = document.querySelector('img');
+  const originalSrc = cat.src || 'http://www.anniemation.com/clip_art/images/cat-walk.gif';
+  const danceSrc = 'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif';
+
+  cat.style.position = 'absolute';
+  cat.style.left = '0px';
+
+  let hasDanced = false;
+  let walkTimer = null;
+
+  function catWalk() {
+    const x = parseInt(cat.style.left, 10) || 0;
+    const rightEdge = window.innerWidth - cat.width;
+    const mid = rightEdge / 2;
+
+    if (x >= rightEdge) {
+      cat.style.left = '0px';
+      hasDanced = false;
+      return;
+    }
+
+    if (!hasDanced && x >= mid) {
+      hasDanced = true;
+      clearInterval(walkTimer);
+      cat.src = danceSrc;
+      setTimeout(function () {
+        cat.src = originalSrc;
+        walkTimer = setInterval(catWalk, 50);
+      }, 5000);
+      return;
+    }
+
+    cat.style.left = (x + 10) + 'px';
+  }
+
+  walkTimer = setInterval(catWalk, 50);
+});
 
-// TODO execute `catWalk` when the browser has completed loading the page