diff --git a/.gitignore b/.gitignore index c62043e2d..ac66837f6 100644 Binary files a/.gitignore and b/.gitignore differ diff --git a/.test-summary/TEST_SUMMARY.md b/.test-summary/TEST_SUMMARY.md new file mode 100644 index 000000000..4bbb917b6 --- /dev/null +++ b/.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 | - | ✓ | diff --git a/2-Browsers/Week1/assignment/ex1-bookList/index.js b/2-Browsers/Week1/assignment/ex1-bookList/index.js index 24a92487d..90cde9dfe 100644 --- a/2-Browsers/Week1/assignment/ex1-bookList/index.js +++ b/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 = [ { diff --git a/2-Browsers/Week1/assignment/ex1-bookList/style.css b/2-Browsers/Week1/assignment/ex1-bookList/style.css index 55ad76b29..33a6e798d 100644 --- a/2-Browsers/Week1/assignment/ex1-bookList/style.css +++ b/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; +} diff --git a/2-Browsers/Week1/assignment/ex2-aboutMe/index.js b/2-Browsers/Week1/assignment/ex2-aboutMe/index.js index a03686b70..183bec1a1 100644 --- a/2-Browsers/Week1/assignment/ex2-aboutMe/index.js +++ b/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(); diff --git a/2-Browsers/Week1/assignment/ex2-aboutMe/style.css b/2-Browsers/Week1/assignment/ex2-aboutMe/style.css index 4e9cc415c..1d47736de 100644 --- a/2-Browsers/Week1/assignment/ex2-aboutMe/style.css +++ b/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 ; +} \ No newline at end of file diff --git a/2-Browsers/Week1/assignment/ex3-hijackLogo.js b/2-Browsers/Week1/assignment/ex3-hijackLogo.js index 1b3d596e9..0b39f7b0e 100644 --- a/2-Browsers/Week1/assignment/ex3-hijackLogo.js +++ b/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(); diff --git a/2-Browsers/Week1/assignment/ex4-whatsTheTime/index.js b/2-Browsers/Week1/assignment/ex4-whatsTheTime/index.js index 30dbdd61d..f2c9a6d7d 100644 --- a/2-Browsers/Week1/assignment/ex4-whatsTheTime/index.js +++ b/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; \ No newline at end of file diff --git a/2-Browsers/Week1/assignment/ex5-catWalk/index.js b/2-Browsers/Week1/assignment/ex5-catWalk/index.js index aedb02011..69540e3ca 100644 --- a/2-Browsers/Week1/assignment/ex5-catWalk/index.js +++ b/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