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

NW6| BakhatBegum |Module-JS3| Feature/destructuring| Sprint-3 #302

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
17 changes: 17 additions & 0 deletions .vscode/launch.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/array-destructuring/exercise-2/exercise.js"
}
]
}
11 changes: 6 additions & 5 deletions array-destructuring/exercise-1/exercise.js

Choose a reason for hiding this comment

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

Great work using destructing in the function's parameters Bakhat! Just make sure you don't change lines that aren't part of the task, for example, line 13 could have stayed in.

Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
const personOne = {
let personOne = {
name: "Popeye",
age: 34,
favouriteFood: "Spinach",
favoriteFood: "Spinach",
};

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

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

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

let { firstName, lastName, house, pet} = hogwarts;

Choose a reason for hiding this comment

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

We don't need this information in the global scope, so there's no need to destructure here 🙂


function property(array){
let gryfindorHouse = array.filter(hogwarts => hogwarts.house === "Gryffindor") //filter mean to give only the elements that pass a certain condition specified by a provided function
let getAllName = gryfindorHouse.map( hogwarts =>`${hogwarts.firstName}${hogwarts.lastName}`);
return getAllName;
}
console.log(property(hogwarts));

function whoHavePet(array){
let findPet = array.filter(hogwarts => hogwarts.pet !== null)
let getPet = findPet.map( hogwarts =>`${hogwarts.firstName}${hogwarts.lastName}`);
return getPet;
}
Comment on lines +76 to +87

Choose a reason for hiding this comment

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

There's some great use of filter and map functions here, Bakhat!

Just think carefully about where we could have used destructuring. For example, on line 77, we use house as part of the lambda function. Instead of writing hogwarts before =>, what else could you use?


console.log(whoHavePet(hogwarts));


23 changes: 23 additions & 0 deletions array-destructuring/exercise-3/exercise.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,26 @@ let order = [
{ itemName: "Hot Coffee", quantity: 2, unitPrice: 1.0 },
{ itemName: "Hash Brown", quantity: 4, unitPrice: 0.4 },
];

let { quantity, itemName, unitPrice } = order;

Choose a reason for hiding this comment

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

Like in exercise 2, there's no need to destructure here 🙂


function itemList(item){
const subtitleItems = ["QTY", "ITEM", "TOTAL"];
item.forEach(order => {
const totalOrder = (order.quantity * order.unitPrice).toFixed(2);
subtitleItems.push(`${order.quantity}\t${order.itemName}\t${totalOrder}`);
});

return subtitleItems.join('\n')

}
console.log(itemList(order));


function totalPrice(num) {
const total = num.reduce((accumulator, currentValue) => accumulator + currentValue.unitPrice * currentValue.quantity, 0);
return `total: ${total}`

}
Comment on lines +12 to +29

Choose a reason for hiding this comment

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

There's some missed opportunities to use destructuring here. Like in exercise 2, take a look at your lambda functions.

Instead of accessing properties of objects like order.quantity, is there any other way we can get the quantity of the order?

console.log(totalPrice(order));

62 changes: 32 additions & 30 deletions book-library/script.js

Choose a reason for hiding this comment

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

Be careful of changes that aren't part of this exercise Bakhat. Keeping pull requests nice and tidy is a good habit to get into 🙂

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();
});
}
}
};