d.aster/Front-End
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: d.aster:2a4fa520b6c43205e22a33efae3fc379034fc15f
Branches Tags
d.aster:master
...
compare: d.aster:fd05f8cc592e19846082ab8bb18419be8da3c117
Branches Tags
d.aster:master

2 Commits
2a4fa520b6 ... fd05f8cc59

Author SHA1 Message Date
David
fd05f8cc59 verbessert die Aufführung des clean code Apps (berücksichtigt clean cooding im Praxis) 2022-11-17 11:43:35 +01:00
David
5f8b6f777c hinzugefügt clean coding App 2022-11-17 09:37:32 +01:00
3 changed files with 92 additions and 0 deletions
Show Stats Expand all files Collapse all files

61
javascript/Javascript Expert/chapter17/starter/clean.js Normal file
View File

@ -0,0 +1,61 @@
const budget = [
{ value: 250, description: "Sold old TV 📺", user: "david" },
{ value: -45, description: "Groceries 🥑", user: "david" },
{ value: 3500, description: "Monthly salary 👩‍💻", user: "david" },
{ value: 300, description: "Freelancing 👩‍💻", user: "david" },
{ value: -1100, description: "New iPhone 📱", user: "david" },
{ value: -20, description: "Candy 🍭", user: "joanne" },
{ value: -125, description: "Toys 🚂", user: "joanne" },
{ value: -1800, description: "New Laptop 💻", user: "david" },
];
const spendingLimits = {
david: 1500,
joanne: 100,
};
const getLimit = user => spendingLimits?.[user] ?? 0;
const addExpense = function (value, description, user = "david") {
// if (!user) user = "david"; // statt einen solchen urprünglichen Wert in der if Anweisung zu erstellen,
// es ist besser als einen urprünglichen Parameter in der Methode zu definieren const addExpense = function (value, description, user = "david") {
user = user.toLowerCase();
// let lim;
// if (spendingLimits[user]) {
// lim = spendingLimits[user];
// } else {
// lim = 0;
// } // statt die If Anwesisungen zu definieren, ist es besser solche Bedienung als ternanry Operator zu definieren
// const limit = spendingLimits[user] ? spendingLimits[user] : 0; // besseres Performance und einen schöneren Überblick aud den Code zu haben
// dritte Möglicheit/oder noch bessere Lösung mit dem Optional Chaining (wird überprüft wenn spendingLimits[user] mehr als 0 ist/exixstiert,
// wenn nicht wird automatisch der Wert 0 zugewissen, ohne das Optional Chaning Operator wäre der Wert undefined
// const limit = spendingLimits[user]?.[user];
const limit = getLimit(user); // Verwendung der Methode, damit wird DRY(Don't repeat yourself) Prinzip werwendet
if (value <= limit) {
budget.push({ value: -value, description: description, user: user });
}
};
addExpense(10, "Pizza 🍕");
addExpense(100, "Going to movies 🍿", "Matilda");
addExpense(200, "Stuff", "Jay");
const checkExpenses = function () {
// der Name einer Methode check, zu wenig beschreibt, was sie eigentlich checkiert,
// in unserem Fall wäre besser, checkExpenses, damit eindeutlich ist, was eigentlich diese Methode checkiert
// durch was das Loop geht. Besser als nur "el" für ein Element in dem Feld zu definieren, entry
for (const entry of budget)
if (entry.value < -getLimit(entry.user)) entry.flag = "limit";
};
checkExpenses();
const logBigExpenses = function (bigLimit) {
let output = "";
for (const entry of budget)
output += entry.value <= -bigLimit ? $entry.description.slice(-2) : "";
output = output.slice(0, -2);
console.log(output);
};
logBigExpenses(1);

31
javascript/Javascript Expert/chapter17/starter/index.html Normal file
View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- <script defer src="script.js"></script> -->
<script defer src="clean.js"></script>
<title>Modern JavaScript Development: Modules and Tooling</title>
<style>
body {
height: 100vh;
display: flex;
align-items: center;
background: linear-gradient(to top left, #28b487, #7dd56f);
}
h1 {
font-family: sans-serif;
font-size: 50px;
line-height: 1.3;
width: 100%;
padding: 30px;
text-align: center;
color: white;
}
</style>
</head>
<body>
<h1>Modern JavaScript Development: Modules and Tooling</h1>
</body>
</html>

0
javascript/Javascript Expert/chapter17/starter/script.js Normal file
View File