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

NW6 | Rabia Avci | JS3 Module | [TECH ED] Programmer Humour | Week 3 #315

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

NW6 | Rabia Avci | JS3 Module | [TECH ED] Programmer Humour | Week 3 #315

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e4c7725
destructure exercise-1
RbAvci Feb 12, 2024
911d2f8
destructure exercise-2
RbAvci Feb 12, 2024
e94e728
destructure exercise-3
RbAvci Feb 12, 2024
3daf9a7
Create html css js
RbAvci Mar 25, 2024
d50128b
add fetch function to get data
RbAvci Mar 25, 2024
4620836
add sytling
RbAvci Mar 25, 2024
3614e1b
add footer and styling
RbAvci Mar 25, 2024
2495a8f
fix sonar build errors
RbAvci Mar 25, 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: 2 additions & 1 deletion array-destructuring/exercise-1/exercise.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@

const personOne = {
name: "Popeye",
age: 34,
favouriteFood: "Spinach",
};

function introduceYourself(___________________________) {
function introduceYourself({name,age,favouriteFood}) {
console.log(
`Hello, my name is ${name}. I am ${age} years old and my favourite food is ${favouriteFood}.`
);
Expand Down
10 changes: 10 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,13 @@ let hogwarts = [
occupation: "Teacher",
},
];

console.log('The names of the people who belong to the Gryffindor house:')

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

console.log('The names of teachers who have pets:')

hogwarts.filter(({pet,occupation})=> pet !== null && occupation === "Teacher" )
.forEach(({firstName,lastName}) => console.log(`${firstName} ${lastName}`));
Comment on lines +74 to +82
Copy link

Choose a reason for hiding this comment

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

Perfect!

Well done

16 changes: 16 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,19 @@ let order = [
{ itemName: "Hot Coffee", quantity: 2, unitPrice: 1.0 },
{ itemName: "Hash Brown", quantity: 4, unitPrice: 0.4 },
];

function formatPrice(price) {
return price.toFixed(2);
}

console.log("QTY\tITEM\t\t\tTOTAL");

let total = 0;

for (const {quantity, itemName, unitPrice} of order) {
console.log(`${quantity}\t${itemName}\t\t${(unitPrice * quantity).toFixed(2)}`);
total += unitPrice * quantity;
}

console.log("\nTotal:", formatPrice(total));

Comment on lines +10 to +24
Copy link

Choose a reason for hiding this comment

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

Well done finding a solution!

Also, an improvement you could make to this solution would be to use Array.reduce() to create a running aggregate instead of defining totalPrice outside of the loop.

Here is a link that explains using reduce to calculate a sum.

https://linuxhint.com/call-reduce-on-an-array-of-objects-to-sum-their-properties/

Also, you have used toFixed() on line 19, but then used the formatPrice function on line 23, I would encourage you to be consistent and either use formatPrice in both instances of remove this function and use toFixed(2) on line 23.

28 changes: 28 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,28 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Programmer Humour</title>
<link rel="stylesheet" href="styles.css" />
<script defer src="script.js"></script>
</head>

<body>
<div class="container">
<h1>xkcd Comic Viewer</h1>
<div id="comicContainer">
</div>
<footer>
<p>Comic made by Randall Munroe from <a rel="noopener" href="https://xkcd.com/" target="_blank">xkcd.com</a>
</p>
<p>page by Rabia AVCI <a rel="noopener" href="https://github.com/RbAvci" target="_blank">GitHub</a>
</p>
</footer>
</div>

</body>


</html>
18 changes: 18 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,18 @@
document.addEventListener("DOMContentLoaded", function () {
fetchComic();
});

function fetchComic() {
fetch("https://xkcd.now.sh/?comic=latest")
.then((response) => response.json())
.then((data) => {
console.log(data);

const comicContainer = document.getElementById("comicContainer");
const imgElement = document.createElement("img");
imgElement.src = data.img;
imgElement.alt = data.alt;
comicContainer.appendChild(imgElement);
})
.catch((error) => console.error("Error fetching comic:", error));
}
37 changes: 37 additions & 0 deletions programmer-humour/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
body {
font-family: Arial, sans-serif;
margin: 20px;
}

.container {
max-width: 800px;
margin: 0 auto;
text-align: center;
}

h1 {
color: aliceblue;
max-width: 100%;
padding: 10px;
background-color: #c24242;

}

img {
max-width: 100%;
height: auto;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-color: #c24242;
padding: 2rem;

}

footer {
color: aliceblue;
padding: 1px;
max-width: 100%;
border: solid 2px #c24242;
margin-top: 10px;
background-color: #c24242;

}
Comment on lines +12 to +37
Copy link

Choose a reason for hiding this comment

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

It is not advisable to set CSS values on generic HTML elements such as img, div, h1, h2 etc.

Doing this will mean you will apply these styles to every element you create.

Instead, use classNames on HTML elements to apply styling to specific elements without affecting anything that doesn't have this className.

Copy link
Author

Choose a reason for hiding this comment

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

Hi Jack, yes that's good advice for me. I thought it was a small project and that it was ok to use like this, I will consider it from now on. Thank you!