Skip to content

Commit 07ba4f5

Browse files
RassibassiRassibassi
committed
inclass files from js2week2
1 parent 14ba0a6 commit 07ba4f5

File tree

7 files changed

+458
-0
lines changed

7 files changed

+458
-0
lines changed

‎javascript2/week2/inclass/ex1.js

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
function randomIntFromInterval(min, max) {
2+
return Math.floor(Math.random() * (max - min + 1) + min);
3+
}
4+
function generateListings(numberOfListings) {
5+
const listings = [];
6+
7+
const listingType = ['House', 'Apartment', 'Shed', 'Dorm', 'Farm'];
8+
const listingFacilities = ['Parkering', 'Elevator', 'Altan', 'Have', 'Husdyr'];
9+
10+
for (let i = 0; i < numberOfListings; i++) {
11+
const listing = {};
12+
const randomTypeIndex = randomIntFromInterval(0, listingType.length - 1);
13+
const numberOfFacilities = randomIntFromInterval(1, listingFacilities.length - 1);
14+
const facilities = [];
15+
for(let i = 0; i < numberOfFacilities; i++) {
16+
const randomIndexFacilities = randomIntFromInterval(0, listingFacilities.length - 1);
17+
const randomFacility = listingFacilities[randomIndexFacilities];
18+
19+
if (!(facilities.includes(randomFacility))) {
20+
facilities.push(randomFacility);
21+
}
22+
}
23+
24+
listing.type = listingType[randomTypeIndex];
25+
listing.facilities = facilities;
26+
listing.price = randomIntFromInterval(1, 10000);
27+
listing.hasGarden = Boolean(randomIntFromInterval(0, 1));
28+
listing.size = randomIntFromInterval(12, 1000);
29+
listing.img = `https://loremflickr.com/200/200/${listing.type}`
30+
31+
listings.push(listing);
32+
}
33+
34+
return listings;
35+
}
36+
37+
const listings = generateListings(37);
38+
39+
listings.forEach(listing => {
40+
console.log(listing.size)
41+
})
42+
43+
const prices = listings
44+
.map(listing => listing.prices)
45+
console.log(prices)
46+
47+
const cheapListings = listings
48+
.filter(listing => listing.price < 5000)
49+
console.log(cheapListings)
50+
51+
const expensivePrices = listings
52+
.filter(listing => listing.price > 5000)
53+
.map(listing => listing.price)
54+
console.log(expensivePrices)
55+
const expensivePrices2 = prices.filter(price => price > 5000)
56+
57+
const parkingListings = listings
58+
.filter(listing => listing.facilities.includes("Parkering"))
59+
console.log(parkingListings)

‎javascript2/week2/inclass/ex2.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset='utf-8'>
5+
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
6+
<title>Listings</title>
7+
<meta name='viewport' content='width=device-width, initial-scale=1'>
8+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
9+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
10+
</head>
11+
<body class="bg-light">
12+
<div class="container">
13+
<h1 class="text-center">
14+
Listings
15+
</h1>
16+
<div class="table-responsive">
17+
<table class="table table-hover">
18+
<thead class="table-info">
19+
<tr>
20+
<th scope="col">#</th>
21+
<th scope="col">Type</th>
22+
<th scope="col">Facilities</th>
23+
<th scope="col">Price</th>
24+
<th scope="col">has Garden?</th>
25+
<th scope="col">Size</th>
26+
<th scope="col">Image</th>
27+
</tr>
28+
</thead>
29+
<tbody id="tableBody"></tbody>
30+
</table>
31+
</div>
32+
</div>
33+
<script src='ex2.js'></script>
34+
</body>
35+
</html>

‎javascript2/week2/inclass/ex2.js

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
function randomIntFromInterval(min, max) {
2+
return Math.floor(Math.random() * (max - min + 1) + min);
3+
}
4+
function generateListings(numberOfListings) {
5+
const listings = [];
6+
7+
const listingType = ['House', 'Apartment', 'Shed', 'Dorm', 'Farm'];
8+
const listingFacilities = ['Parkering', 'Elevator', 'Altan', 'Have', 'Husdyr'];
9+
10+
for (let i = 0; i < numberOfListings; i++) {
11+
const listing = {};
12+
const randomTypeIndex = randomIntFromInterval(0, listingType.length - 1);
13+
const numberOfFacilities = randomIntFromInterval(1, listingFacilities.length - 1);
14+
const facilities = [];
15+
for(let i = 0; i < numberOfFacilities; i++) {
16+
const randomIndexFacilities = randomIntFromInterval(0, listingFacilities.length - 1);
17+
const randomFacility = listingFacilities[randomIndexFacilities];
18+
19+
if (!(facilities.includes(randomFacility))) {
20+
facilities.push(randomFacility);
21+
}
22+
}
23+
24+
listing.type = listingType[randomTypeIndex];
25+
listing.facilities = facilities;
26+
listing.price = randomIntFromInterval(1, 10000);
27+
listing.hasGarden = Boolean(randomIntFromInterval(0, 1));
28+
listing.size = randomIntFromInterval(12, 1000);
29+
listing.img = `https://loremflickr.com/200/200/${listing.type}`
30+
31+
listings.push(listing);
32+
}
33+
34+
return listings;
35+
}
36+
const tableBodyTag = document.getElementById("tableBody")
37+
const listings = generateListings(37);
38+
39+
// Filter listings
40+
const filter = {
41+
type: 'farm',
42+
minPrice: 1500,
43+
maxPrice: 8000,
44+
};
45+
46+
// const filterListings = (listings, filter) => {
47+
// const filteredItems = listings
48+
// .filter(listing => listing.type.toLowerCase() === filter.type)
49+
// .filter(listing => listing.price >= filter.minPrice)
50+
// return filteredItems
51+
// }
52+
53+
const filterListings = (listings, filter) => {
54+
const allowedKeys = ["type", "facilities", "minPrice", "maxPrice", "hasGarden", "minSize", "maxSize"]
55+
const filteredKeys = Object.keys(filter).filter(element => allowedKeys.includes(element))
56+
// console.log(filteredKeys)
57+
58+
const filterFunctions = {
59+
type: listing => listing.type.toLowerCase() === filter.type,
60+
minPrice: listing => listing.price >= filter.minPrice,
61+
maxPrice: listing => listing.price <= filter.maxPrice,
62+
// add key and filtering function for each allowedKey from allowedKeys
63+
}
64+
65+
filteredKeys.forEach(key => {
66+
listings = listings.filter(filterFunctions[key])
67+
})
68+
69+
return listings
70+
}
71+
72+
73+
const filteredItems = filterListings(listings, filter);
74+
75+
// Functions
76+
const resetTable = () => {
77+
tableBodyTag.innerHTML = ""
78+
}
79+
80+
const appendElement = (elementTag, innerText, trTag) => {
81+
const tag = document.createElement(elementTag)
82+
tag.innerText = innerText
83+
trTag.appendChild(tag)
84+
}
85+
86+
const renderTableBody = (listings) => {
87+
resetTable()
88+
89+
listings.forEach((listing, i) => {
90+
const trTag = document.createElement("tr")
91+
const cells = [
92+
{tag:"th", content: i + 1},
93+
{tag:"td", content: listing.type},
94+
{tag:"td", content: listing.facilities},
95+
{tag:"td", content: listing.price},
96+
{tag:"td", content: listing.hasGarden},
97+
{tag:"td", content: listing.size},
98+
{tag:"td", content: listing.img},
99+
100+
]
101+
cells.forEach(cell => {
102+
appendElement(cell.tag, cell.content, trTag)
103+
})
104+
105+
tableBodyTag.appendChild(trTag)
106+
});
107+
108+
}
109+
110+
renderTableBody(filteredItems)

‎javascript2/week2/inclass/inclass1.js

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
apples = [
2+
{weight: 175, color: 'red', isPeeled: false, price: 0.5},
3+
{weight: 180, color: 'yellow', isPeeled: false, price: 0.6},
4+
{weight: 155, color: 'green', isPeeled: false, price: 0.4},
5+
{weight: 230, color: 'pink', isPeeled: false, price: 0.8},
6+
{weight: 140, color: 'red', isPeeled: false, price: 0.3},
7+
{weight: 200, color: 'yellow', isPeeled: false, price: 0.7},
8+
{weight: 165, color: 'green', isPeeled: false, price: 0.5},
9+
{weight: 250, color: 'pink', isPeeled: false, price: 0.9}
10+
]
11+
12+
// console.log weight
13+
for (let i = 0; i < apples.length; i++) {
14+
const apple = apples[i];
15+
console.log(`${i}, ${apple.weight}`)
16+
}
17+
18+
// Peel the apples, peeling an apple reduces it's weight by 5g
19+
const peeledApples = []
20+
for (let i = 0; i < apples.length; i++) {
21+
const apple = apples[i];
22+
apple.weight -= 5
23+
apple.isPeeled = true
24+
peeledApples.push(apple)
25+
}
26+
console.log("peeledApples:")
27+
console.log(peeledApples)
28+
29+
// Whats the total price of each apple? weight * price
30+
const totalPrices = []
31+
for (let i = 0; i < apples.length; i++) {
32+
const apple = apples[i];
33+
const totalPrice = apple.weight * apple.price
34+
totalPrices.push(totalPrice)
35+
}
36+
console.log("totalPrices:")
37+
console.log(totalPrices)
38+
39+
// Only select green apples
40+
const greenApples = []
41+
for (let i = 0; i < apples.length; i++) {
42+
const apple = apples[i];
43+
if (apple.color === "green") {
44+
greenApples.push(apple)
45+
}
46+
}
47+
console.log("greenApples:")
48+
console.log(greenApples)
49+
50+
// Whats the price of all peeled green apples?
51+
const peeledGreenApples = []
52+
for (let i = 0; i < apples.length; i++) {
53+
const apple = apples[i];
54+
if(apple.color === "green") {
55+
apple.weight -= 5
56+
apple.isPeeled = true
57+
peeledGreenApples.push(apple)
58+
}
59+
}
60+
console.log("peeledGreenApples:")
61+
console.log(peeledGreenApples)

‎javascript2/week2/inclass/inclass2.js

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
apples = [
2+
{weight: 175, color: 'red', isPeeled: false, price: 0.5},
3+
{weight: 180, color: 'yellow', isPeeled: false, price: 0.6},
4+
{weight: 155, color: 'green', isPeeled: false, price: 0.4},
5+
{weight: 230, color: 'pink', isPeeled: false, price: 0.8},
6+
{weight: 140, color: 'red', isPeeled: false, price: 0.3},
7+
{weight: 200, color: 'yellow', isPeeled: false, price: 0.7},
8+
{weight: 165, color: 'green', isPeeled: false, price: 0.5},
9+
{weight: 250, color: 'pink', isPeeled: false, price: 0.9}
10+
]
11+
12+
// console.log weight
13+
apples.forEach((apple, i) => {
14+
console.log(apple.weight)
15+
});
16+
apples.forEach(console.log)
17+
18+
// Peel the apples, peeling an apple reduces it's weight by 5g
19+
const peeledApples = apples.map(apple => {
20+
apple.weight -= 5
21+
apple.isPeeled = true
22+
return apple
23+
})
24+
console.log("peeledApples:")
25+
console.log(peeledApples)
26+
27+
// Whats the total price of each apple? weight * price
28+
const totalPrices = apples.map(apple => {
29+
return apple.weight * apple.price
30+
})
31+
console.log("totalPrices:")
32+
console.log(totalPrices)
33+
34+
// Only select green apples
35+
const greenApples = apples.filter(apple => apple.color === 'green')
36+
console.log("greenApples:")
37+
console.log(greenApples)
38+
39+
// Whats the price of all peeled green apples?
40+
const peeledGreenApples = apples.filter(apple => apple.color === 'green')
41+
.map(apple => {
42+
apple.weight -= 5
43+
apple.isPeeled = true
44+
return apple
45+
})
46+
console.log("peeledGreenApples:")
47+
console.log(peeledGreenApples)
48+
49+
// sort intro, other array function
50+
const numbers = [5,2,3,4,5,20,6,7]
51+
const sortedNumbers = numbers.sort()
52+
console.log(numbers)
53+
console.log(sortedNumbers)

‎javascript2/week2/inclass/inclass3.html

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset='utf-8'>
5+
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
6+
<title>Hungry For Apples?</title>
7+
<meta name='viewport' content='width=device-width, initial-scale=1'>
8+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
9+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
10+
</head>
11+
<body class="bg-light">
12+
<div class="container">
13+
<h1 class="text-center">
14+
<i class="bi bi-apple" style="color:orangered"></i>
15+
<i class="bi bi-apple" style="color:yellowgreen"></i>
16+
<i class="bi bi-apple" style="color:gold"></i>
17+
<i class="bi bi-apple" style="color:pink"></i>
18+
Hungry For Apples?
19+
<i class="bi bi-apple" style="color:orangered"></i>
20+
<i class="bi bi-apple" style="color:yellowgreen"></i>
21+
<i class="bi bi-apple" style="color:gold"></i>
22+
<i class="bi bi-apple" style="color:pink"></i>
23+
</h1>
24+
25+
<form class="my-4" id="radioForm">
26+
<div class="form-check form-check-inline">
27+
<input class="form-check-input" type="radio" name="appleRadios" value="all" id="allRadio" checked>
28+
<label class="form-check-label" for="allRadio">
29+
<i class="bi bi-apple" style="color:orangered"></i>
30+
<i class="bi bi-apple" style="color:yellowgreen"></i>
31+
<i class="bi bi-apple" style="color:gold"></i>
32+
<i class="bi bi-apple" style="color:pink"></i> All
33+
</label>
34+
</div>
35+
<div class="form-check form-check-inline">
36+
<input class="form-check-input" type="radio" name="appleRadios" value="red" id="redRadio">
37+
<label class="form-check-label" for="redRadio"><i class="bi bi-apple" style="color:orangered"></i> Red</label>
38+
</div>
39+
<div class="form-check form-check-inline">
40+
<input class="form-check-input" type="radio" name="appleRadios" value="yellow" id="yellowRadio">
41+
<label class="form-check-label" for="yellowRadio"><i class="bi bi-apple" style="color:gold"></i> Yellow</label>
42+
</div>
43+
<div class="form-check form-check-inline">
44+
<input class="form-check-input" type="radio" name="appleRadios" value="green" id="greenRadio">
45+
<label class="form-check-label" for="greenRadio"><i class="bi bi-apple" style="color:yellowgreen"></i> Green</label>
46+
</div>
47+
<div class="form-check form-check-inline">
48+
<input class="form-check-input" type="radio" name="appleRadios" value="pink" id="pinkRadio">
49+
<label class="form-check-label" for="pinkRadio"><i class="bi bi-apple" style="color:pink"></i> Pink</label>
50+
</div>
51+
</form>
52+
<div class="table-responsive">
53+
<table class="table table-hover">
54+
<thead class="table-info">
55+
<tr>
56+
<th scope="col">#</th>
57+
<th scope="col">Weight</th>
58+
<th scope="col">Color</th>
59+
<th scope="col">Price</th>
60+
<th scope="col">Total Price</th>
61+
</tr>
62+
</thead>
63+
<tbody id="tableBody"></tbody>
64+
</table>
65+
</div>
66+
</div>
67+
<script src='inclass3.js'></script>
68+
</body>
69+
</html>

0 commit comments

Comments
 (0)