Skip to content
This repository was archived by the owner on Apr 18, 2025. It is now read-only.

NW6| BakhatBegum | Module-JS3 | Feature/humor |Sprint-3 #300

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

NW6| BakhatBegum | Module-JS3 | Feature/humor |Sprint-3 #300

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2c02a40
I added a line that was accidentally removed
BakhatBegum Feb 12, 2024
189c521
added html, script and style files, using fetch to a request rom API
BakhatBegum Feb 14, 2024
3c46bfd
I deleted div tag from html file
BakhatBegum Feb 14, 2024
f0eb9df
Deleted console.log
BakhatBegum Feb 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
62 changes: 32 additions & 30 deletions book-library/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,19 +28,24 @@ const check = document.getElementById("check");
//check the right input from forms and if its ok -> add the new book (object in array)
//via Book function and start render function
function submit() {
let titleValue = title.value;
let authorValue = author.value;
let pagesValue = pages.value;
let checkValue = check.checked;
if (
title.value == null ||
title.value == "" ||
pages.value == null ||
pages.value == ""
titleValue == null ||
authorValue == "" ||
pagesValue == null ||
checkValue == ""
) {
alert("Please fill all fields!");
return false;
} else {
let book = new Book(title.value, title.value, pages.value, check.checked);
library.push(book);
render();
}

else {
let book = new Book(titleValue, authorValue, pagesValue, checkValue);
myLibrary.push(book);
render();
}
}

function Book(title, author, pages, check) {
Expand All @@ -49,55 +54,52 @@ function Book(title, author, pages, check) {
this.pages = pages;
this.check = check;
}

function render() {
let table = document.getElementById("display");
let rowsNumber = table.rows.length;
//delete old table
for (let n = rowsNumber - 1; n > 0; n-- {
for (let n = rowsNumber - 1; n > 0; n--) {
table.deleteRow(n);
}
//insert updated row and cells
let length = myLibrary.length;
for (let i = 0; i < length; i++) {
let row = table.insertRow(1);
let cell1 = row.insertCell(0);
let cell2 = row.insertCell(1);
let cell3 = row.insertCell(2);
let cell4 = row.insertCell(3);
let cell5 = row.insertCell(4);
const row = table.insertRow(1);
const cell1 = row.insertCell(0);
const cell2 = row.insertCell(1);
const cell3 = row.insertCell(2);
const cell4 = row.insertCell(3);
const cell5 = row.insertCell(4);
cell1.innerHTML = myLibrary[i].title;
cell2.innerHTML = myLibrary[i].author;
cell3.innerHTML = myLibrary[i].pages;

//add and wait for action for read/unread button
let changeBut = document.createElement("button");
const changeBut = document.createElement("button");
changeBut.id = i;
changeBut.className = "btn btn-success";
cell4.appendChild(changeBut);
let readStatus = "";
if (myLibrary[i].check == false) {
readStatus = "Yes";
} else {
readStatus = "No";
}
changeBut.innerHTML = readStatus;

const readStatus = myLibrary[i].check ? "Yes" : "No";
changeBut.textContent = readStatus;

changeBut.addEventListener("click", function () {
myLibrary[i].check = !myLibrary[i].check;
render();
});

//add delete button to every row and render again
let delButton = document.createElement("button");
delBut.id = i + 5;
const delBut = document.createElement("button");
delBut.id = i;
cell5.appendChild(delBut);
delBut.className = "btn btn-warning";
delBut.innerHTML = "Delete";
delBut.addEventListener("clicks", function () {
delBut.innerText = "Delete";
delBut.addEventListener("click", function () {
alert(`You've deleted title: ${myLibrary[i].title}`);
myLibrary.splice(i, 1);
render();
});
}
}
};


14 changes: 14 additions & 0 deletions programmer-humour/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script defer src="script.js"></script>
<title>Programmer-humour</title>
</head>
<body>


</body>
</html>
32 changes: 32 additions & 0 deletions programmer-humour/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@

function getImageFetch(){
return fetch('https://xkcd.now.sh/?comic=latest').then((response) => {
if(!response.ok){
return "Error";
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of just returning the text "Error", we could instead throw an exception. This is a large topic to cover here, so reach out on Slack if you have any questions on what this means!

}else{
return response.json();
}
});
}
getImageFetch();
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because we call getImageFetch() from inside the displayData() function, we don't need to call it here 🙂


let imageDiv = document.createElement('div');
document.body.appendChild(imageDiv);

function displayData(){

getImageFetch().then((data) => {
if(!data){
console.log("data can not found");
}
const image = data.img;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could this variable name be a bit more descriptive? For example, imageUrl would make it clear that this is the link to the image


const createImage = document.createElement('img');
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I really like how you create the image element inside JavaScript! It means the user doesn't see a 'broken image' when they first load the page, creating a nice user experience

createImage.src = image;
imageDiv.appendChild(createImage);
} )
}
displayData();

window.onload = displayData;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When I launch the page, I see the same image appear twice. Having a look at these final lines of the JavaScript file, can you think why that might be?


9 changes: 9 additions & 0 deletions programmer-humour/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
body{

background-color: antiquewhite;
display: grid;
grid-template-columns: auto;
align-items: center;
justify-content: center;
margin-top: 90px;
}