This commit is contained in:
80
02_advanced/uebungen/#u14_avg-scores/index.html
Normal file
80
02_advanced/uebungen/#u14_avg-scores/index.html
Normal file
@@ -0,0 +1,80 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Übung 14: Durchschnittsnoten berechnen</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<div class="alert alert-primary">
|
||||
<h2>Übung 14: Durchschnittsnoten berechnen</h2>
|
||||
<p>
|
||||
Durchschnitt pro Schüler (<strong>calculateAvgGrades</strong>): Schreibe eine Funktion, die die
|
||||
Durchschnittsnote jedes Schülers (zeilenweise) berechnet. Das Ergebnis soll ein Array mit den
|
||||
Durchschnittswerten der Schüler (Anna, Ben, Clara, David) sein.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Durchschnitt pro Fach (<strong>calculateAvgSubjects</strong>): Schreibe eine Funktion, die die
|
||||
Durchschnittsnote jedes Fachs (spaltenweise) berechnet. Das Ergebnis soll ein Array mit den
|
||||
Durchschnittswerten der Fächer (Mathematics, English, Biology, History) sein.
|
||||
</p>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const gradesTable = [
|
||||
['Name', 'Mathematics', 'English', 'Biology', 'History'],
|
||||
['Anna', 85, 92, 78, 88],
|
||||
['Ben', 90, 88, 84, 79],
|
||||
['Clara', 76, 95, 89, 91],
|
||||
['David', 82, 79, 91, 85],
|
||||
];
|
||||
|
||||
const calculateAverageGrades = (ar = []) => {
|
||||
return ar.slice(1).map((row) => {
|
||||
const grades = row.slice(1); // => [85, 92, 78, 88]
|
||||
const avgGrades = grades.reduce((a, b) => a + b, 0) / grades.length;
|
||||
return Number(avgGrades.toFixed(2));
|
||||
});
|
||||
};
|
||||
|
||||
// [].reduce((INDEX_A, INDEX_B) => {}, INITIAL_VALUE)
|
||||
console.log(
|
||||
[85, 92, 78, 88].reduce((sum, n) => {
|
||||
return Number(sum) + Number(n);
|
||||
}, 0),
|
||||
); // => 343
|
||||
|
||||
const calculateAvgSubjects = (ar = []) => {
|
||||
const entries = ar.slice(1);
|
||||
const grades = entries.map((ar) => ar.slice(1));
|
||||
console.log(grades);
|
||||
// [
|
||||
// []
|
||||
// [85, 92, 78, 88]
|
||||
// [90, 88, 84, 79]
|
||||
// [76, 95, 89, 91]
|
||||
// [82, 79, 91, 85]
|
||||
// ]
|
||||
const results = grades.reduce((resAr, nAr) => {
|
||||
resAr.push(nAr[0]);
|
||||
return resAr;
|
||||
}, []);
|
||||
console.log(results);
|
||||
};
|
||||
|
||||
console.log(calculateAvgSubjects(gradesTable));
|
||||
console.log(calculateAverageGrades(gradesTable));
|
||||
outputEl.textContent = `Average grades of students are: ${calculateAverageGrades().join(' - ')}`;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,39 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Übung 14: Durchschnittsnoten berechnen</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<div class="alert alert-primary">
|
||||
<h2>Übung 14: Durchschnittsnoten berechnen</h2>
|
||||
<p>
|
||||
Schreibe eine Funktion <code>calculateAverageGrades</code>, die die Durchschnittsnote jedes Schülers (ohne
|
||||
den Namen) berechnet und als neues Array zurückgibt.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Die Funktion <code>calculateAverageGrades</code> soll die Durchschnittsnoten jedes Schülers berechnen, indem
|
||||
sie die Noten in den Fächern zusammenzählt und durch die Anzahl der Fächer teilt. Runde die
|
||||
Durchschnittswerte auf zwei Dezimalstellen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const gradesTable = [
|
||||
['Name', 'Mathematics', 'English', 'Biology', 'History'],
|
||||
['Anna', 85, 92, 78, 88],
|
||||
['Ben', 90, 88, 84, 79],
|
||||
['Clara', 76, 95, 89, 91],
|
||||
['David', 82, 79, 91, 85],
|
||||
];
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
@@ -33,6 +33,28 @@
|
||||
];
|
||||
|
||||
// Your code here
|
||||
shoppingList[0][2] = 'Grapes';
|
||||
shoppingList[1][2] = 'Tomatoes';
|
||||
shoppingList[2][2] = 'Butter';
|
||||
|
||||
// Your code here
|
||||
|
||||
const changeShoppingList = (arr, changeList = ['Grapes', 'Tomatoes', 'Butter']) => {
|
||||
return arr.map((elems, idx) => {
|
||||
elems[2] = changeList[idx];
|
||||
return elems;
|
||||
});
|
||||
};
|
||||
|
||||
const newItems = ['Grapes', 'Tomatoes', 'Butter'];
|
||||
|
||||
shoppingList.forEach((categories, index) => {
|
||||
categories.splice(2, 1, newItems[index]);
|
||||
});
|
||||
|
||||
console.log(shoppingList);
|
||||
console.log(changeShoppingList(shoppingList));
|
||||
console.log(shoppingList);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
@@ -36,7 +36,13 @@
|
||||
['Russia', 'Moscow'],
|
||||
];
|
||||
|
||||
const getCapitalOf = () => {};
|
||||
const getCapitalOf = (country) => {
|
||||
return countriesWithCapital.find((elemArr) => {
|
||||
return elemArr[0] === country;
|
||||
})[1];
|
||||
};
|
||||
|
||||
console.log(getCapitalOf('Switzerland')); // => 'Bern'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
@@ -40,7 +40,10 @@
|
||||
];
|
||||
|
||||
// Your code here
|
||||
|
||||
inventory.push([
|
||||
['Shelf 1', 'Novels', 40],
|
||||
['Shelf 2', 'Non-fiction', 35],
|
||||
]);
|
||||
console.log(inventory);
|
||||
/* Expected outcome:
|
||||
[
|
||||
@@ -62,8 +65,6 @@
|
||||
],
|
||||
]
|
||||
*/
|
||||
|
||||
// Your code here
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
@@ -45,7 +45,8 @@
|
||||
];
|
||||
|
||||
// Your code here
|
||||
|
||||
inventory[1][1][2] -= 5;
|
||||
inventory[1][1][2] = 25;
|
||||
console.log(inventory);
|
||||
/*
|
||||
Expected outcome:
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
@@ -27,7 +27,9 @@
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const image = [
|
||||
'use strict';
|
||||
|
||||
const imageAr = [
|
||||
[
|
||||
// Row 1
|
||||
[100, 150, 200], // Pixel 1
|
||||
@@ -40,12 +42,44 @@
|
||||
],
|
||||
];
|
||||
|
||||
const increaseBrightness = (image, value) => {
|
||||
const increaseBrightness = (imageAr = [], value) => {
|
||||
// Your code here
|
||||
return imageAr.map((row) => {
|
||||
return row.map((rgbValue) => {
|
||||
return rgbValue.map((elem) => {
|
||||
const result = elem + value;
|
||||
if (result > 255) {
|
||||
return 255;
|
||||
}
|
||||
return result;
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const newImage = increaseBrightness(image, 30);
|
||||
const increaseBrightness2 = (image, value) => {
|
||||
const imageAr = image.map((row) => {
|
||||
const rows = row.map((pixel) => {
|
||||
const pixels = pixel.map((color) => {
|
||||
return Math.min(255, color + value);
|
||||
});
|
||||
return pixels;
|
||||
});
|
||||
return rows;
|
||||
});
|
||||
return imageAr;
|
||||
};
|
||||
|
||||
console.time('guard');
|
||||
const newImage = increaseBrightness(imageAr, 30);
|
||||
console.log(newImage);
|
||||
console.timeEnd('guard');
|
||||
|
||||
console.time('Math');
|
||||
const newImage2 = increaseBrightness2(imageAr, 30);
|
||||
console.log(newImage2);
|
||||
console.timeEnd('Math');
|
||||
|
||||
/*
|
||||
Expected outcome:
|
||||
[
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
@@ -35,7 +35,13 @@
|
||||
['Russia', 'Moscow'],
|
||||
];
|
||||
|
||||
const getCountryForCapital = () => {};
|
||||
const getCountryFor = (capital) => {
|
||||
return countriesWithCapital.find((elemArr) => {
|
||||
return elemArr[1] === capital;
|
||||
})[0];
|
||||
};
|
||||
|
||||
console.log(getCountryFor('Paris')); // => 'France'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user