Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NW-6 | AREEB-SATTAR | JS3| [TECH ED] Array Destructuring | WEEK-3 #306

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

NW-6 | AREEB-SATTAR | JS3| [TECH ED] Array Destructuring | WEEK-3 #306

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 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
0029a67
Reverted changes
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
6 changes: 4 additions & 2 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,12 @@ const personOne = {
favouriteFood: "Spinach",
};

function introduceYourself(___________________________) {
let { name, age, favouriteFood } = personOne;

function introduceYourself(personOne) {
Copy link
Member

@JayMayer JayMayer Mar 27, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

I think this would be a good time to introduce a new way to use destructuring. This function takes a parameter that is an object. We know the object will be a person that has a name, age, and favourite food.

Because we know exactly what information we need from the object, we can destructure it right here as we define the function.

function introduceYourself({ name, age, favouriteFood }) will give us the name, age, and favouriteFood to use inside of the function block.

Every time we pass a person object to the function, the code will now magically extract those properties from the object without us doing any extra work! 🚀

Let me know if that makes sense @areebsattar

Copy link
Author

Choose a reason for hiding this comment

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

Thank you for this explanation, it does make it clearer and I believe what we were doing with props in React also made it clearer as well.

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

introduceYourself(personOne);
introduceYourself();
13 changes: 13 additions & 0 deletions array-destructuring/exercise-2/exercise.js
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

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

Great use of destructuring, Areeb!

Original file line number Diff line number Diff line change
Expand Up @@ -70,3 +70,16 @@ let hogwarts = [
occupation: "Teacher",
},
];


hogwarts.forEach(({ firstName, lastName, house })=>{
if (house === "Gryffindor") {
console.log(`Task 1 => ${firstName} ${lastName}`);
}
});

hogwarts.forEach(({ firstName, lastName, pet, occupation }) => {
if (occupation === "Teacher" && pet != null) {
console.log(`Task 2 => ${firstName} ${lastName}`)
}
});
10 changes: 10 additions & 0 deletions array-destructuring/exercise-3/exercise.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,13 @@ let order = [
{ itemName: "Hot Coffee", quantity: 2, unitPrice: 1.0 },
{ itemName: "Hash Brown", quantity: 4, unitPrice: 0.4 },
];

let sum = 0;

order.forEach(({ itemName, quantity, unitPrice }) => {
Copy link
Member

Choose a reason for hiding this comment

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

Excellent!

let total = unitPrice * quantity;
console.log(`For ${quantity} ${itemName} the total price is ${total}`);
sum += total;
});

console.log(`Total: ${+sum}`);
136 changes: 48 additions & 88 deletions book-library/index.html
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

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

There's two files from the book-library/ directory that have sneaked their way into this PR. A good habit is to make sure you're on the correct branch when you commit 🙂

Copy link
Author

Choose a reason for hiding this comment

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

I did realize this later, I will try to be more careful with this in future

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