diff --git a/2-Browsers/Week1/assignment/ex1-bookList/index.js b/2-Browsers/Week1/assignment/ex1-bookList/index.js index 24a9248..4babd99 100644 --- a/2-Browsers/Week1/assignment/ex1-bookList/index.js +++ b/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() { diff --git a/2-Browsers/Week1/assignment/ex1-bookList/style.css b/2-Browsers/Week1/assignment/ex1-bookList/style.css index 55ad76b..26b6d31 100644 --- a/2-Browsers/Week1/assignment/ex1-bookList/style.css +++ b/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; + } \ No newline at end of file diff --git a/2-Browsers/Week1/assignment/ex2-aboutMe/index.js b/2-Browsers/Week1/assignment/ex2-aboutMe/index.js index d44ae0d..5bcbcfc 100644 --- a/2-Browsers/Week1/assignment/ex2-aboutMe/index.js +++ b/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'); +}); diff --git a/2-Browsers/Week1/assignment/ex2-aboutMe/style.css b/2-Browsers/Week1/assignment/ex2-aboutMe/style.css index 4e9cc41..0a58967 100644 --- a/2-Browsers/Week1/assignment/ex2-aboutMe/style.css +++ b/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; +} \ 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 c52f6d7..35d1a43 100644 --- a/2-Browsers/Week1/assignment/ex3-hijackLogo.js +++ b/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(); diff --git a/2-Browsers/Week1/assignment/ex4-whatsTheTime/index.js b/2-Browsers/Week1/assignment/ex4-whatsTheTime/index.js index 0724f2d..5a3f81d 100644 --- a/2-Browsers/Week1/assignment/ex4-whatsTheTime/index.js +++ b/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); \ 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 ad7c83f..9ef5d11 100644 --- a/2-Browsers/Week1/assignment/ex5-catWalk/index.js +++ b/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); diff --git a/2-Browsers/Week1/assignment/ex6-gameOfLife/index.js b/2-Browsers/Week1/assignment/ex6-gameOfLife/index.js index b744fee..1ebcc9a 100644 --- a/2-Browsers/Week1/assignment/ex6-gameOfLife/index.js +++ b/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; }); } diff --git a/2-Browsers/Week1/test-reports/ex1-bookList.pass.txt b/2-Browsers/Week1/test-reports/ex1-bookList.pass.txt new file mode 100644 index 0000000..4952ced --- /dev/null +++ b/2-Browsers/Week1/test-reports/ex1-bookList.pass.txt @@ -0,0 +1 @@ +All tests passed \ No newline at end of file diff --git a/2-Browsers/Week1/test-reports/ex1-bookList.todo.txt b/2-Browsers/Week1/test-reports/ex1-bookList.todo.txt deleted file mode 100644 index d8d8689..0000000 --- a/2-Browsers/Week1/test-reports/ex1-bookList.todo.txt +++ /dev/null @@ -1 +0,0 @@ -This test has not been run. \ No newline at end of file diff --git a/2-Browsers/Week1/test-reports/ex2-aboutMe.pass.txt b/2-Browsers/Week1/test-reports/ex2-aboutMe.pass.txt new file mode 100644 index 0000000..4952ced --- /dev/null +++ b/2-Browsers/Week1/test-reports/ex2-aboutMe.pass.txt @@ -0,0 +1 @@ +All tests passed \ No newline at end of file diff --git a/2-Browsers/Week1/test-reports/ex2-aboutMe.todo.txt b/2-Browsers/Week1/test-reports/ex2-aboutMe.todo.txt deleted file mode 100644 index d8d8689..0000000 --- a/2-Browsers/Week1/test-reports/ex2-aboutMe.todo.txt +++ /dev/null @@ -1 +0,0 @@ -This test has not been run. \ No newline at end of file diff --git a/2-Browsers/Week1/test-reports/ex3-hijackLogo.fail.txt b/2-Browsers/Week1/test-reports/ex3-hijackLogo.fail.txt new file mode 100644 index 0000000..f8f4003 --- /dev/null +++ b/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) diff --git a/2-Browsers/Week1/test-reports/ex3-hijackLogo.todo.txt b/2-Browsers/Week1/test-reports/ex3-hijackLogo.todo.txt deleted file mode 100644 index d8d8689..0000000 --- a/2-Browsers/Week1/test-reports/ex3-hijackLogo.todo.txt +++ /dev/null @@ -1 +0,0 @@ -This test has not been run. \ No newline at end of file diff --git a/2-Browsers/Week1/test-reports/ex4-whatsTheTime.pass.txt b/2-Browsers/Week1/test-reports/ex4-whatsTheTime.pass.txt new file mode 100644 index 0000000..4952ced --- /dev/null +++ b/2-Browsers/Week1/test-reports/ex4-whatsTheTime.pass.txt @@ -0,0 +1 @@ +All tests passed \ No newline at end of file diff --git a/2-Browsers/Week1/test-reports/ex4-whatsTheTime.todo.txt b/2-Browsers/Week1/test-reports/ex4-whatsTheTime.todo.txt deleted file mode 100644 index d8d8689..0000000 --- a/2-Browsers/Week1/test-reports/ex4-whatsTheTime.todo.txt +++ /dev/null @@ -1 +0,0 @@ -This test has not been run. \ No newline at end of file diff --git a/2-Browsers/Week1/test-reports/ex5-catWalk.pass.txt b/2-Browsers/Week1/test-reports/ex5-catWalk.pass.txt new file mode 100644 index 0000000..4952ced --- /dev/null +++ b/2-Browsers/Week1/test-reports/ex5-catWalk.pass.txt @@ -0,0 +1 @@ +All tests passed \ No newline at end of file diff --git a/2-Browsers/Week1/test-reports/ex5-catWalk.todo.txt b/2-Browsers/Week1/test-reports/ex5-catWalk.todo.txt deleted file mode 100644 index d8d8689..0000000 --- a/2-Browsers/Week1/test-reports/ex5-catWalk.todo.txt +++ /dev/null @@ -1 +0,0 @@ -This test has not been run. \ No newline at end of file diff --git a/2-Browsers/Week1/test-reports/ex6-gameOfLife.pass.txt b/2-Browsers/Week1/test-reports/ex6-gameOfLife.pass.txt new file mode 100644 index 0000000..4952ced --- /dev/null +++ b/2-Browsers/Week1/test-reports/ex6-gameOfLife.pass.txt @@ -0,0 +1 @@ +All tests passed \ No newline at end of file diff --git a/2-Browsers/Week1/test-reports/ex6-gameOfLife.todo.txt b/2-Browsers/Week1/test-reports/ex6-gameOfLife.todo.txt deleted file mode 100644 index d8d8689..0000000 --- a/2-Browsers/Week1/test-reports/ex6-gameOfLife.todo.txt +++ /dev/null @@ -1 +0,0 @@ -This test has not been run. \ No newline at end of file diff --git a/test-runner.log b/test-runner.log index 8853c96..08da13f 100644 --- a/test-runner.log +++ b/test-runner.log @@ -856,3 +856,626 @@ Command failed: npx jest ex5-wallet.test.js --colors --reporters="/Users/hackyou 2024-07-14 11:51:17 info: -------------------------------------- 2024-07-14 11:51:18 info: All unit tests passed. 2024-07-14 11:51:20 info: All steps were completed successfully +2024-08-09 11:26:17 info: ---------------------------------------- +2024-08-09 11:26:17 info: >>> Running Unit Test `ex1-bookList` <<< +2024-08-09 11:26:17 info: ---------------------------------------- +2024-08-09 11:26:21 error: *** Unit Test Error Report *** + +Command failed: npx jest ex1-bookList.test.js --colors + FAIL 2-Browsers/Week1/unit-tests/ex1-bookList.test.js + Generated HTML + ✓ HTML should be syntactically valid (98 ms) + ✕ should have all TODO comments removed (2 ms) + ✕ should contain a