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

NW-6 | AREEB-SATTAR | JS3| [TECH ED] Programmer Humour | WEEK-3 #308

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

NW-6 | AREEB-SATTAR | JS3| [TECH ED] Programmer Humour | WEEK-3 #308

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
895c60d
Fixed a few bugs
areebsattar Feb 2, 2024
a8d2cd6
Fixed all the bugs
areebsattar Feb 2, 2024
802c06d
completed 2 excercises
areebsattar Feb 17, 2024
905a6bc
all excercises completed
areebsattar Feb 17, 2024
38403fb
task completed
areebsattar Feb 18, 2024
19b96d0
Update because of pushing last changes to wrong pull request
areebsattar Feb 19, 2024
016e09e
removed previous files from array destructuring
areebsattar Feb 19, 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
7 changes: 0 additions & 7 deletions array-destructuring/exercise-1/exercise.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,3 @@ const personOne = {
favouriteFood: "Spinach",
};

function introduceYourself(___________________________) {
console.log(
`Hello, my name is ${name}. I am ${age} years old and my favourite food is ${favouriteFood}.`
);
}

introduceYourself(personOne);
2 changes: 2 additions & 0 deletions array-destructuring/exercise-2/exercise.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,3 +70,5 @@ let hogwarts = [
occupation: "Teacher",
},
];


136 changes: 48 additions & 88 deletions book-library/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,96 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta
charset="utf-8"
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div class="jumbotron text-center">
<h1>Library</h1>
<p>Add books to your virtual library</p>
</div>
<head>
<title> Book Library</title>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div class="jumbotron text-center">
<h1>Library</h1>
<p>Add books to your virtual library</p>
</div>

<button data-toggle="collapse" data-target="#demo" class="btn btn-info">
Add new book
</button>
<button type="button" data-toggle="collapse" data-target="#demo" class="btn btn-info">
Add new book
</button>

<div id="demo" class="collapse">
<div class="form-group">
<label for="title">Title:</label>
<input
type="title"
class="form-control"
id="title"
name="title"
required
/>
<label for="author">Author: </label>
<input
type="author"
class="form-control"
id="author"
name="author"
required
/>
<label for="pages">Pages:</label>
<input
type="number"
class="form-control"
id="pages"
name="pages"
required
/>
<label class="form-check-label">
<input
type="checkbox"
class="form-check-input"
id="check"
value=""
/>Read
</label>
<input
type="submit"
value="Submit"
class="btn btn-primary"
onclick="submit();"
/>
</div>
<div id="demo" class="collapse">
<div class="form-group">
<label for="title">Title:</label>
<input type="text" class="form-control" id="title" name="title" required />
<label for="author">Author: </label>
<input type="text" class="form-control" id="author" name="author" required />
<label for="pages">Pages:</label>
<input type="number" class="form-control" id="pages" name="pages" required />
<label class="form-check-label">
<input type="checkbox" class="form-check-input" id="check" value="" />Read
</label>
<input type="submit" value="Submit" class="btn btn-primary" onclick="submit();" />
</div>
</div>

<table class="table" id="display">
<thead class="thead-dark">
<tr>
<th>Title</th>
<th>Author</th>
<th>Number of Pages</th>
<th>Read</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

<table class="table" id="display">
<thead class="thead-dark">
<tr>
<th>Title</th>
<th>Author</th>
<th>Number of Pages</th>
<th>Read</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<script src="script.js"></script>
</body>

<script src="script.js"></script>
</body>
</html>
</html>
17 changes: 6 additions & 11 deletions book-library/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@ function submit() {
alert("Please fill all fields!");
return false;
} else {
let book = new Book(title.value, title.value, pages.value, check.checked);
library.push(book);
let book = new Book(title.value, author.value, pages.value, check.checked);
myLibrary.push(book);
render();
}
}
Expand All @@ -54,7 +54,7 @@ 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
Expand All @@ -75,12 +75,7 @@ function render() {
changeBut.id = i;
changeBut.className = "btn btn-success";
cell4.appendChild(changeBut);
let readStatus = "";
if (myLibrary[i].check == false) {
readStatus = "Yes";
} else {
readStatus = "No";
}
let readStatus = myLibrary[i].check ? "No" : "Yes";
changeBut.innerHTML = readStatus;

changeBut.addEventListener("click", function () {
Expand All @@ -89,12 +84,12 @@ function render() {
});

//add delete button to every row and render again
let delButton = document.createElement("button");
let delBut = document.createElement("button");
delBut.id = i + 5;
cell5.appendChild(delBut);
delBut.className = "btn btn-warning";
delBut.innerHTML = "Delete";
delBut.addEventListener("clicks", function () {
delBut.addEventListener("click", function () {
alert(`You've deleted title: ${myLibrary[i].title}`);
myLibrary.splice(i, 1);
render();
Expand Down
18 changes: 18 additions & 0 deletions programmer-humour/index.html
View file
Open in desktop
Copy link

Choose a reason for hiding this comment

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

Be careful with your HTML tags here. The <footer> element appears outside of your <body>, and there are two </html> closing tags

Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script defer src="script.js"></script>
<title>Programmer humour</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<img id="comic-image" alt="image for comic fetched">
</body>
<footer></footer>

</html>
</html>
17 changes: 17 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,17 @@
const comicImage = document.getElementById("comic-image");
async function fetchComic() {
fetch("https://xkcd.now.sh/?comic=latest").then((response) => {
if (!response.ok) {
throw new Error("Can't get data");
}
return response.json();
})
.then((comic) => {
console.log(comic);
comicImage.src = comic.img
}).catch((error) => {
console.error("Error fetching image");
})
}

fetchComic();
12 changes: 12 additions & 0 deletions programmer-humour/styles.css
View file
Open in desktop
Copy link

Choose a reason for hiding this comment

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

Excellent styling!

Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
body{
background-color: aliceblue;
}

#comic-image {
max-width: 100%;
height: auto;
display: block;
margin: 20px auto;
border: 1px solid #ddd;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}