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

hinzugefügt Front-End Ordner von javascript und reactjs

Browse Source
This commit is contained in:
David Aster 2022-10-06 13:41:57 +02:00
commit 683ac104a4
255 changed files with 50270 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
javascript/.prettierrc Normal file
View File

@ -0,0 +1,4 @@
{
"singleQuote": false,
"arrowParens": "avoid"
}

30
javascript/chapter02/index.html Normal file
View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chapter02</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>Javascript Fundamentals - Part 1</h1>
<script src="script.js"></script>
</body>
</html>

33
javascript/chapter02/script.js Normal file
View File

@ -0,0 +1,33 @@
let number = "1991";
console.log(number);
console.log(typeof number);
console.log(typeof Number(number), number);
console.log(Number("jonas"));
console.log(Number(NaN));
console.log(String(123));
function randomHexColor() {
let [r, g, b] = randomRgbColor();
let hr = r.toString(16).padStart(2, "0");
let hg = g.toString(16).padStart(2, "0");
let hb = b.toString(16).padStart(2, "0");
return "#" + hr + hg + hb;
}
function randomInteger() {
return Math.floor(Math.random() * (255 + 1));
}
function randomRgbColor() {
let r = randomInteger(255);
let g = randomInteger(255);
let b = randomInteger(255);
return [r, g, b];
}
// setInterval(() => {
// console.log(randomHexColor());
// document.querySelector("body").style.background = randomHexColor();
// }, 1000);

15
javascript/chapter03/IntroObjects.js Normal file
View File

@ -0,0 +1,15 @@
const jakobArray = [
"Jonas",
"Schmedtmann",
2037 - 1986,
"developer",
["Nika", "Joanne", "Eva"],
];
const jonas = {
firstname: "Jonas",
lastName: "Schmedtmann",
age: 2037 - 1986,
job: "developer",
friends: ["Nika", "Joanne", "Eva"],
};

37
javascript/chapter03/ObjectMethods.js Normal file
View File

@ -0,0 +1,37 @@
const jonas = {
firstname: "Jonas",
lastName: "Schmedtmann",
birthYear: 1986,
job: "developer",
friends: ["Nika", "Joanne", "Eva"],
hasDriversLicence: false,
// calcAge: function () {
// console.log(this); // Ausgabe des eigenen Objektes
// return new Date().getFullYear() - this.age;
// },
calcAge: function () {
this.age = new Date().getFullYear() - this.birthYear;
return this.age;
},
getSummary: function () {
this.summary = `${this.firstname} is a ${this.age} old ${this.job} and he ${
this.hasDriversLicence ? "has" : "has not"
} a driver's license`;
return this.summary;
},
};
// console.log(jonas.calcAge(1986));
// console.log(jonas["calcAge"](1985));
// console.log(jonas["calcAge"]); // Ausgabe der Definition der Methode calcAge()
console.log(jonas.calcAge());
console.log(jonas.age);
console.log(jonas.age);
console.log(jonas.age);
// console.log(jonas.getSummary());
console.log(jonas.summary);

25
javascript/chapter03/arrayMethods.js Normal file
View File

@ -0,0 +1,25 @@
const friends = ["Michael", "Steven", "Peter"];
console.log(friends);
// add elements
console.log(friends.push("Nika"));
friends.unshift("John");
console.log(friends);
// remove elements
console.log(friends.pop());
console.log(friends);
console.log(friends.pop());
console.log(friends);
console.log(friends.shift());
console.log(friends);
console.log(friends.indexOf("Michael"));
console.log(friends.indexOf("Steven"));
console.log(friends.indexOf("David"));
console.log(friends.includes("Steven"));
console.log(friends.includes("David"));

49
javascript/chapter03/arrays.js Normal file
View File

@ -0,0 +1,49 @@
const friend1 = "Michael";
const friend2 = "Steven";
const friend3 = "Peter";
const friends = ["Michael", "Steven", "Peter"];
console.log(friends);
const years = new Array(1991, 1986, 1990);
console.log(years);
console.log(friends[0]);
console.log(friends[1]);
console.log(friends[2]);
console.log(friends.length);
console.log(friends[friends.length - 1]);
friends[2] = "Jennifer";
console.log(friends);
const firstName = "David";
const david = [
firstName,
"Aster",
new Date().getFullYear() - 1986,
"developer",
friends,
];
console.log(david);
const calcAge = function (birthYear) {
return new Date().getFullYear() - birthYear;
};
const yearsOfFriends = [1990, 1986, 1991, 2000, 1970];
const age1 = calcAge(yearsOfFriends[0]);
const age2 = calcAge(yearsOfFriends[1]);
const age3 = calcAge(yearsOfFriends[yearsOfFriends.length - 1]);
console.log(age1);
console.log(age2);
console.log(age3);
const ages = [age1, age2, age3];
console.log(yearsOfFriends);
console.log(ages);

19
javascript/chapter03/arrow_functions.js Normal file
View File

@ -0,0 +1,19 @@
// function expression
const calcAge1 = function (birthYear) {
return new Date().getFullYear() - birthYear;
};
console.log(calcAge1(1986));
// arrow function
const calcAge2 = birthYear => new Date().getFullYear() - birthYear;
console.log(calcAge2(1986));
const yearsUntilRetirement = (birthYear, firstName) => {
// const age = new Date().getFullYear() - birthYear;
const age = calcAge2(birthYear);
const retirement = 65 - age;
return `${firstName} retires in ${retirement} years`;
};
console.log(yearsUntilRetirement(1986, "David Aster"));

20
javascript/chapter03/challenge1.js Normal file
View File

@ -0,0 +1,20 @@
const calcAvg = (team1, team2, team3) => (team1 + team2 + team3) / 3;
// DATA 1
// const avgDolphins = calcAvg(44, 23, 71);
// const avgKoalas = calcAvg(85, 54, 41);
// DATA 2
const avgDolphins = calcAvg(85, 54, 41);
const avgKoalas = calcAvg(23, 34, 27);
const checkWinner = function (avgDolphins, avgKoalas) {
if (avgDolphins >= 2 * avgKoalas) {
console.log(`Dolphins win (${avgDolphins} vs. ${avgKoalas})`);
} else if (avgKoalas >= 2 * avgDolphins) {
console.log(`Koalas win (${avgKoalas} vs. ${avgDolphins})`);
} else {
console.log("No team wins...");
}
};
checkWinner(avgDolphins, avgKoalas);

8
javascript/chapter03/challenge2.js Normal file
View File

@ -0,0 +1,8 @@
const calcTip = bill => {
return bill >= 50 && bill <= 300 ? bill * 0.15 : bill * 0.2;
};
const bills = [125, 555, 44];
const tips = [calcTip(bills[0]), calcTip(bills[1]), calcTip(bills[2])];
const total = [bills[0] + tips[0], bills[1] + tips[1], bills[2] + tips[2]];
console.log(bills, tips, total);

36
javascript/chapter03/challenge3.js Normal file
View File

@ -0,0 +1,36 @@
const mark = {
firstName: "Mark",
lastName: "Miller",
fullName: `${this.firstName} ${this.lastName}`,
mass: 78,
height: 1.69,
bmi: null,
calcBMI: function () {
this.bmi = this.mass / (this.height * this.height);
return this.bmi;
},
};
const john = {
firstName: "John",
lastName: "Smith",
fullName: `${this.firstName} ${this.lastName}`,
mass: 92,
height: 1.95,
bmi: null,
calcBMI: function () {
this.bmi = this.mass / (this.height * this.height);
return this.bmi;
},
};
const higherBMI = function () {
john.calcBMI();
mark.calcBMI();
return john.BMI > mark.bmi
? `${john.firstName}'s BMI (${john.bmi}) is higher than ${mark.firstName}'s (${mark.bmi})! `
: `${mark.firstName}'s BMI (${mark.bmi}) is higher than ${john.firstName}'s (${john.bmi})! `;
};
console.log(higherBMI());

28
javascript/chapter03/challenge4.js Normal file
View File

@ -0,0 +1,28 @@
const bills = [22, 295, 176, 440, 37, 105, 10, 1100, 86, 52];
const calcTip = bill => {
return bill >= 50 && bill <= 300 ? bill * 0.15 : bill * 0.2;
};
const calcAvg = arr => {
let sum = 0;
let arrayLength = arr.length;
for (let i = 0; i < arr.length; i++) {
sum += arr[i];
}
return sum / arrayLength;
};
const tips = [];
const totals = [];
for (let i = 0; i < bills.length; i++) {
tips[i] = calcTip(bills[i]);
totals[i] = tips[i] + bills[i];
}
console.log(`Bills: ${bills}`);
console.log(`Tips: ${tips}`);
console.log(`Totals: ${totals}`);
console.log(`Average: ${calcAvg(bills)}`);
console.log(calcAvg([1, 2, 3, 4, 5, 6, 7, 8, 9]));

27
javascript/chapter03/dotVSBracketNotation.js Normal file
View File

@ -0,0 +1,27 @@
const jonas = {
firstName: "Jonas",
lastName: "Schmedtmann",
age: 2037 - 1986,
job: "developer",
friends: ["Nika", "Joanne", "Eva"],
};
const nameKey = "Name";
console.log(jonas.firstName);
console.log(jonas["first" + nameKey]);
console.log(jonas["last" + nameKey]);
const interestedIn = prompt(
"What do you want to know about Jonas? (firstName, lastName, age, job, friends)"
);
jonas.location = "Vienna";
jonas["twitter"] = "SynTax64";
if (jonas[interestedIn]) {
console.log(jonas[interestedIn]);
} else {
console.log("Wrong request!");
}
console.log(
`${jonas.firstName} has ${jonas.friends.length} friends and his best friend is called ${jonas.friends[0]}`
);

17
javascript/chapter03/function_declarations.js Normal file
View File

@ -0,0 +1,17 @@
// function declaration
const myAge1 = calcAge(1986);
function calcAge(birthYear) {
return 2022 - birthYear;
}
// function expression
const calcBirth = function (birthYear) {
return 2022 - birthYear;
};
const myAge2 = calcBirth(1986);
console.log(myAge1);
console.log(myAge2);

13
javascript/chapter03/functionsCallingOtherFunctions.js Normal file
View File

@ -0,0 +1,13 @@
function cutFruitPieces(fruit) {
return fruit * 3;
}
function fruitProcessor(apples, oranges) {
const applePieces = cutFruitPieces(apples);
const orangePieces = cutFruitPieces(oranges);
const juice = `Juice with ${applePieces} piece of apples and ${orangePieces} piece of oranges`;
return juice;
}
console.log(fruitProcessor(2, 4));

10
javascript/chapter03/index.html Normal file
View File

@ -0,0 +1,10 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="loops.js"></script>
</head>
<body></body>
</html>

60
javascript/chapter03/loopingArrays.js Normal file
View File

@ -0,0 +1,60 @@
const jonas = [
"Jonas",
"Schmedtmann",
2037 - 1986,
"developer",
["Nika", "Joanne", "Eva"],
];
const types = [];
const types1 = [];
for (let i = 0; i < jonas.length; i++) {
types[i] = typeof jonas[i];
types1.push(typeof jonas[i]);
if (Array.isArray(jonas[i])) {
const array = jonas[i];
for (let j = 0; j < array.length; j++) {
console.log(array[j]);
}
} else {
console.log(jonas[i]);
}
}
console.log(types);
console.log(types1);
const years = [1991, 1986, 1985, 1970, 2018];
const calcAge = years => {
const arrayOfAges = [];
years.forEach(element => {
const age = new Date().getFullYear() - element;
arrayOfAges.push(age);
});
return arrayOfAges;
};
const ages = calcAge(years);
console.log(ages);
const arrayOfStrings1 = [];
// Only strings
for (let i = 0; i < jonas.length; i++) {
if (typeof jonas[i] !== "string") continue;
arrayOfStrings1.push(jonas[i]);
}
console.log(arrayOfStrings1);
// Break witch number
const arrayOfStrings2 = [];
for (let i = 0; i < jonas.length; i++) {
if (typeof jonas[i] === "number") break;
arrayOfStrings2.push(jonas[i]);
}
console.log(arrayOfStrings2);

18
javascript/chapter03/loopingArraysReversed.js Normal file
View File

@ -0,0 +1,18 @@
const jonas = [
"Jonas",
"Schmedtmann",
new Date().getFullYear() - 1986,
"developer",
["Nika", "Joanne", "Eva"],
];
for (let i = jonas.length - 1; i >= 0; i--) {
console.log(`${i} ${jonas[i]}`);
}
for (let exercise = 1; exercise <= 3; exercise++) {
console.log(`------ Starting exercise ${exercise}`);
for (let rep = 1; rep < 6; rep++) {
console.log(`Exercise ${exercise}, lifting weight repetiton ${rep}`);
}
}

12
javascript/chapter03/loops.js Normal file
View File

@ -0,0 +1,12 @@
console.log("Lifting weigts repetition 1");
console.log("Lifting weigts repetition 2");
console.log("Lifting weigts repetition 3");
console.log("Lifting weigts repetition 4");
console.log("Lifting weigts repetition 5");
console.log("Lifting weigts repetition 6");
console.log("Lifting weigts repetition 7");
console.log("-----------");
for (let i = 1; i <= 7; i++) {
console.log(`Lifting weigts repetition ${i}`);
}

20
javascript/chapter03/reviewingFunctions.js Normal file
View File

@ -0,0 +1,20 @@
const calcAge = function (birthYear) {
return new Date().getFullYear() - birthYear;
};
const yearsUntilRetirement = (birthYear, firstName) => {
const age = calcAge(birthYear);
const retirement = 65 - age;
if (retirement > 0) {
console.log(`${firstName} retires in ${retirement} years`);
return retirement;
} else {
console.log(`${firstName} is already retired`);
return -1;
}
// return `${firstName} retires in ${retirement} years`;
};
console.log(yearsUntilRetirement(1986, "David"));
console.log(yearsUntilRetirement(1950, "David"));

49
javascript/chapter03/whileLoop.js Normal file
View File

@ -0,0 +1,49 @@
const jonas = [
"Jonas",
"Schmedtmann",
new Date().getFullYear() - 1986,
"developer",
["Nika", "Joanne", "Eva"],
];
for (let i = 0; i < jonas.length; i++) {
console.log(`${i} ${jonas[i]}`);
}
console.log("----------");
let counter = 0;
while (counter < jonas.length) {
console.log(`${counter} ${jonas[counter]}`);
counter++;
}
for (let exercise = 1; exercise <= 3; exercise++) {
console.log(`------ Starting exercise ${exercise}`);
for (let rep = 1; rep < 6; rep++) {
console.log(`Exercise ${exercise}, lifting weight repetiton ${rep}`);
}
}
console.log("---- Exercise trough the a while loop ------");
let exercise = 1;
while (exercise <= 3) {
console.log(`------ Starting exercise ${exercise}`);
let repetition = 1;
while (repetition < 6) {
console.log(`Exercise ${exercise}, lifting weight repetiton ${repetition}`);
repetition++;
}
exercise++;
}
let getRandom = () => {
return Math.trunc(Math.random() * 6 + 1);
};
let dice = getRandom();
while (dice !== 6) {
console.log(`You rolled a ${dice}`);
dice = getRandom();
if (dice === 6) console.log("Loop is ended!");
}

80
javascript/chapter05/challenge1.js Normal file
View File

@ -0,0 +1,80 @@
// PROBLEM
// We work for a company building a smart home thermometer.
// Out most recent task is this: "Given an array of temperatures"
// of one day, calculate the temperature amplitude. Keep in mind that somethimes
// there might be a sensor error"
const temperatures = [-3, -2, -6, -1, "error", 9, 13, 17, 15, 14, 9, 5];
const temperatures_doubled = [-3, -2, -6, -1, "error", 9, 13, 17, 15, 14, 9, 5];
// 1) Understanding the problem
// - What is temperature amplitude? Answer: Difference between highest and lowest temperature
// - How to compute max and min temperatures?
// - What's a sensor error? And what to do?
// 2) Breaking up into sub-problems
// - How to ignore errors?
// - Find max value in the array?
// - Find min value in the array?
// - Subtract min from max (amplitude) and return it
const getMinTemp = function (temps) {
let minTemp = temps[0];
for (let i = 0; i < temps.length; i++) {
const currTemp = temps[i];
if (currTemp < minTemp) minTemp = currTemp;
}
return minTemp;
};
const getMaxTemp = function (temps) {
let maxTemp = temps[0];
for (let i = 0; i < temps.length; i++) {
const currTemp = temps[i];
if (currTemp > maxTemp) maxTemp = currTemp;
}
return maxTemp;
};
const getOnlyNumbers = function (temps) {
let arrayOfNumbers = [];
for (let i = 0; i < temps.length; i++) {
const currTemp = temps[i];
if (typeof currTemp === "number") {
arrayOfNumbers.push(currTemp);
}
}
return arrayOfNumbers;
};
const getAmplitude = function (temps) {
const arrayOfTempsOnlyNumbers = getOnlyNumbers(temps);
const maxTemp = getMaxTemp(arrayOfTempsOnlyNumbers);
const minTemp = getMinTemp(arrayOfTempsOnlyNumbers);
return Math.abs(minTemp) + maxTemp;
};
console.log(getAmplitude(temperatures));
// PROBLEM 2
// Function should now receive 2 arrays of temps
// 1) Understanding the problem
// - With 2 arrays, should we implement functionality twice?
// NO! Just merge two arrays
// 2) Breaking up into sub-problems
// - Merge 2 arrays
const mergeArray = (temps1, temps2) => {
const mergedArray = temps1;
for (let i = 0; i < temps2.length; i++) {
mergedArray.push(temps2[i]);
}
return mergedArray;
};
const mergedArray = mergeArray(temperatures, temperatures_doubled);
console.log(mergedArray);

11
javascript/chapter05/challenge2.js Normal file
View File

@ -0,0 +1,11 @@
const printForecast = temperatures => {
let output = "";
for (let i = 0; i < temperatures.length; i++) {
output += `... ${temperatures[i]}°C in ${i + 1} days `;
}
return output;
};
console.log(printForecast([17, 21, 23]));
console.log(printForecast([12, 5, -5, 0, 4]));

30
javascript/chapter05/index.html Normal file
View File

@ -0,0 +1,30 @@
<!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" />
<title>Developer Skills & Editor Setup!</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>Developer Skills & Editor Setup</h1>
<script src="script.js"></script>
</body>
</html>

20
javascript/chapter05/script.js Normal file
View File

@ -0,0 +1,20 @@
const intoCelsuis = fahrenheit => {
return (celsius = fahrenheit * 1.8);
};
// for (let i = -100; i <= 100; i++) {
// console.log(`Fahrenheit: ${i}\t Celsius: ${intoCelsuis(i)}`);
// }
const measureKelvin = function () {
const measurment = {
type: "temp",
unit: "celsuis",
value: Number(prompt("Degrees celsuis:")),
};
const kelvin = measurment.value + 273;
return kelvin;
};
console.log(measureKelvin());

32
javascript/chapter07/index.html Normal file
View File

@ -0,0 +1,32 @@
<!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" />
<link rel="stylesheet" href="style.css" />
<title>Guess My Number!</title>
</head>
<body>
<header>
<h1>Guess My Number!</h1>
<p class="between">(Between 1 and 20)</p>
<button class="btn again">Again!</button>
<div class="number">?</div>
</header>
<main>
<section class="left">
<input type="number" class="guess" />
<button class="btn check">Check!</button>
</section>
<section class="right">
<p class="message">Start guessing...</p>
<p class="label-score">💯 Score: <span class="score">20</span></p>
<p class="label-highscore">
🥇 Highscore: <span class="highscore">0</span>
</p>
</section>
</main>
<script src="script.js"></script>
</body>
</html>

4
javascript/chapter07/modal/.prettierrc Normal file
View File

@ -0,0 +1,4 @@
{
"singleQuote": false,
"arrowParens": "avoid"
}

32
javascript/chapter07/modal/index.html Normal file
View File

@ -0,0 +1,32 @@
<!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" />
<link rel="stylesheet" href="style.css" />
<title>Modal window</title>
</head>
<body>
<button class="show-modal">Show modal 1</button>
<button class="show-modal">Show modal 2</button>
<button class="show-modal">Show modal 3</button>
<div class="modal hidden">
<button class="close-modal">&times;</button>
<h1>I'm a modal window 😍</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
<div class="overlay hidden"></div>
<script src="script.js"></script>
</body>
</html>

34
javascript/chapter07/modal/script.js Normal file
View File

@ -0,0 +1,34 @@
"use strict";
const modal = document.querySelector(".modal");
const overlay = document.querySelector(".overlay");
const btnCloseModal = document.querySelector(".close-modal");
const btnsOpenModal = document.querySelectorAll(".show-modal");
console.log(btnsOpenModal);
const openModal = function () {
modal.classList.remove("hidden");
overlay.classList.remove("hidden");
};
const closeModal = function () {
modal.classList.add("hidden");
overlay.classList.add("hidden");
};
for (let i = 0; i < btnsOpenModal.length; i++) {
btnsOpenModal[i].addEventListener("click", openModal);
}
btnCloseModal.addEventListener("click", closeModal);
overlay.addEventListener("click", closeModal);
document.addEventListener("keydown", function (event) {
console.log("A key was pressed");
console.log(event);
if (event.key === "Escape" && !modal.classList.contains("hidden")) {
closeModal();
}
});

83
javascript/chapter07/modal/style.css Normal file
View File

@ -0,0 +1,83 @@
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
font-family: sans-serif;
color: #333;
line-height: 1.5;
height: 100vh;
position: relative;
display: flex;
align-items: flex-start;
justify-content: center;
background: linear-gradient(to top left, #28b487, #7dd56f);
}
.show-modal {
font-size: 2rem;
font-weight: 600;
padding: 1.75rem 3.5rem;
margin: 5rem 2rem;
border: none;
background-color: #fff;
color: #444;
border-radius: 10rem;
cursor: pointer;
}
.close-modal {
position: absolute;
top: 1.2rem;
right: 2rem;
font-size: 5rem;
color: #333;
cursor: pointer;
border: none;
background: none;
}
h1 {
font-size: 2.5rem;
margin-bottom: 2rem;
}
p {
font-size: 1.8rem;
}
.hidden {
display: none;
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70%;
background-color: white;
padding: 6rem;
border-radius: 5px;
box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
z-index: 10;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(3px);
z-index: 5;
}

4
javascript/chapter07/pigGame/.prettierrc Normal file
View File

@ -0,0 +1,4 @@
{
"singleQuote": true,
"arrowParens": "avoid"
}

BIN
javascript/chapter07/pigGame/dice-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
javascript/chapter07/pigGame/dice-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
javascript/chapter07/pigGame/dice-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
javascript/chapter07/pigGame/dice-4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
javascript/chapter07/pigGame/dice-5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
javascript/chapter07/pigGame/dice-6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

36
javascript/chapter07/pigGame/index.html Normal file
View File

@ -0,0 +1,36 @@
<!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" />
<link rel="stylesheet" href="style.css" />
<title>Pig Game</title>
</head>
<body>
<main>
<section class="player player--0 player--active">
<h2 class="name" id="name--0">Player 1</h2>
<p class="score" id="score--0">43</p>
<div class="current">
<p class="current-label">Current</p>
<p class="current-score" id="current--0">0</p>
</div>
</section>
<section class="player player--1">
<h2 class="name" id="name--1">Player 2</h2>
<p class="score" id="score--1">24</p>
<div class="current">
<p class="current-label">Current</p>
<p class="current-score" id="current--1">0</p>
</div>
</section>
<img src="dice-5.png" alt="Playing dice" class="dice" />
<button class="btn btn--new">🔄 New game</button>
<button class="btn btn--roll">🎲 Roll dice</button>
<button class="btn btn--hold">📥 Hold</button>
</main>
<script src="script.js"></script>
</body>
</html>

BIN
javascript/chapter07/pigGame/pig-game-flowchart.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 411 KiB

111
javascript/chapter07/pigGame/script.js Normal file
View File

@ -0,0 +1,111 @@
'use strict';
// Selecting elements
const player0El = document.querySelector('.player--0');
const player1El = document.querySelector('.player--1');
const score0El = document.querySelector('#score--0');
const score1El = document.getElementById('score--1');
const current0El = document.querySelector('#current--0');
const current1El = document.querySelector('#current--1');
const diceEl = document.querySelector('.dice');
const btnNew = document.querySelector('.btn--new');
const btnRoll = document.querySelector('.btn--roll');
const btnHold = document.querySelector('.btn--hold');
// Starting conditions
score0El.textContent = 0;
score1El.textContent = 0;
diceEl.classList.add('hidden');
let scores = [0, 0],
currentScore = 0,
activePlayer = 0,
playing = true,
dice = 0;
const init = function () {
scores = [0, 0];
currentScore = 0;
activePlayer = 0;
playing = true;
dice = getDice();
diceEl.classList.add('hidden');
score0El.textContent = 0;
score1El.textContent = 0;
current0El.textContent = 0;
current1El.textContent = 0;
player0El.classList.remove('player--winner');
player1El.classList.remove('player--winner');
if (
!document
.querySelector(`.player--${activePlayer}`)
.classList.contains('player--active')
) {
player0El.classList.add('active--player');
player1El.classList.remove('active--player');
}
};
init();
function getDice() {
return Math.trunc(Math.random() * 6) + 1;
}
const switchPlayer = function () {
document.getElementById(`current--${activePlayer}`).textContent = 0;
currentScore = 0;
activePlayer = activePlayer === 0 ? 1 : 0;
player0El.classList.toggle('player--active');
player1El.classList.toggle('player--active');
};
// Rolling dice funtionality
btnRoll.addEventListener('click', function () {
if (playing) {
// 1. Generating a random dice roll
const dice = getDice();
console.log(dice);
// 2. Display a dice
diceEl.classList.remove('hidden');
diceEl.src = `dice-${dice}.png`;
// 3. Check for rolled 1: if true, switch to next player
if (dice !== 1) {
// Add dice to current score
currentScore += dice;
document.getElementById(`current--${activePlayer}`).textContent =
currentScore;
} else {
// Switch to next player
switchPlayer();
}
}
});
btnHold.addEventListener('click', function (event) {
if (playing) {
// 1. Add currentScore to active player's score
scores[activePlayer] += currentScore;
document.getElementById(`score--${activePlayer}`).textContent =
scores[activePlayer];
// 2. Check if player's score is more than 100
if (scores[activePlayer] >= 100) {
// Finish the game
playing = false;
diceEl.classList.add('hidden');
document
.querySelector(`.player--${activePlayer}`)
.classList.add('player--winner');
document
.querySelector(`.player--${activePlayer}`)
.classList.remove('player--active');
} else {
switchPlayer();
}
}
});
// Restart the game
btnNew.addEventListener('click', init);

171
javascript/chapter07/pigGame/style.css Normal file
View File

@ -0,0 +1,171 @@
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
font-family: 'Nunito', sans-serif;
font-weight: 400;
height: 100vh;
color: #333;
background-image: linear-gradient(to top left, #753682 0%, #bf2e34 100%);
display: flex;
align-items: center;
justify-content: center;
}
/* LAYOUT */
main {
position: relative;
width: 100rem;
height: 60rem;
background-color: rgba(255, 255, 255, 0.35);
backdrop-filter: blur(200px);
filter: blur();
box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
border-radius: 9px;
overflow: hidden;
display: flex;
}
.player {
flex: 50%;
padding: 9rem;
display: flex;
flex-direction: column;
align-items: center;
transition: all 0.75s;
}
/* ELEMENTS */
.name {
position: relative;
font-size: 4rem;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 2px;
font-weight: 300;
margin-bottom: 1rem;
}
.score {
font-size: 8rem;
font-weight: 300;
color: #c7365f;
margin-bottom: auto;
}
.player--active {
background-color: rgba(255, 255, 255, 0.4);
}
.player--active .name {
font-weight: 700;
}
.player--active .score {
font-weight: 400;
}
.player--active .current {
opacity: 1;
}
.current {
background-color: #c7365f;
opacity: 0.8;
border-radius: 9px;
color: #fff;
width: 65%;
padding: 2rem;
text-align: center;
transition: all 0.75s;
}
.current-label {
text-transform: uppercase;
margin-bottom: 1rem;
font-size: 1.7rem;
color: #ddd;
}
.current-score {
font-size: 3.5rem;
}
/* ABSOLUTE POSITIONED ELEMENTS */
.btn {
position: absolute;
left: 50%;
transform: translateX(-50%);
color: #444;
background: none;
border: none;
font-family: inherit;
font-size: 1.8rem;
text-transform: uppercase;
cursor: pointer;
font-weight: 400;
transition: all 0.2s;
background-color: white;
background-color: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(10px);
padding: 0.7rem 2.5rem;
border-radius: 50rem;
box-shadow: 0 1.75rem 3.5rem rgba(0, 0, 0, 0.1);
}
.btn::first-letter {
font-size: 2.4rem;
display: inline-block;
margin-right: 0.7rem;
}
.btn--new {
top: 4rem;
}
.btn--roll {
top: 39.3rem;
}
.btn--hold {
top: 46.1rem;
}
.btn:active {
transform: translate(-50%, 3px);
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
}
.btn:focus {
outline: none;
}
.dice {
position: absolute;
left: 50%;
top: 16.5rem;
transform: translateX(-50%);
height: 10rem;
box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.2);
}
.player--winner {
background-color: #2f2f2f;
}
.player--winner .name {
font-weight: 700;
color: #c7365f;
}
.hidden {
display: none;
}

73
javascript/chapter07/script.js Normal file
View File

@ -0,0 +1,73 @@
"use strict";
// console.log(document.querySelector(".message").textContent);
// document.querySelector(".message").textContent = "Correct number!";
// document.querySelector(".number").textContent = 14;
// document.querySelector(".score").textContent = 10;
// document.querySelector(".guess").value = 23;
// console.log(document.querySelector(".guess").value);
let secretNumber = Math.trunc(Math.random() * 20) + 1;
let score = 20;
let highScore = 0;
const displayMessage = function (message) {
document.querySelector(".message").textContent = message;
};
console.log(`SN: ${secretNumber}`);
document.querySelector(".check").addEventListener("click", event => {
const guess = Number(document.querySelector(".guess").value);
console.log(guess, typeof guess);
if (!guess) {
displayMessage("⛔ No number");
} else if (guess === secretNumber) {
displayMessage("🎉 Correct Number");
document.querySelector(".number").textContent = secretNumber;
document.querySelector("body").style.backgroundColor = "#60b347";
document.querySelector(".number").style.width = "30rem";
if (score > highScore) {
highScore = score;
document.querySelector(".highscore").textContent = highScore;
}
} else if (guess !== secretNumber) {
if (score > 1) {
displayMessage(guess > secretNumber ? "📈 Too high" : "📈 Too low");
score--;
document.querySelector(".score").textContent = score;
} else {
displayMessage("🧨 You lost the game");
document.querySelector(".score").textContent = 0;
}
}
});
// Coding challenge
/*
Implement a game rest funtionality, to that the player can make a new guess!
Here is how:
1. Select the element with the "again" class and attach a click event handler
2. In the handler function, restore initial value of the score and number variables
3. Restore the initial conditions of the message, number, score and guess input field
4. Restore the original background color (#222) and number width (15rem)
*/
document.querySelector(".again").addEventListener("click", function () {
secretNumber = Math.trunc(Math.random() * 20) + 1;
score = 20;
displayMessage("Start guessing...");
document.querySelector(".number").textContent = "?";
document.querySelector(".score").textContent = score;
document.querySelector("body").style.backgroundColor = "#222";
document.querySelector(".number").style = "15rem";
document.querySelector(".guess").value = "";
console.log(secretNumber);
});

119
javascript/chapter07/style.css Normal file
View File

@ -0,0 +1,119 @@
@import url("https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
font-family: "Press Start 2P", sans-serif;
color: #eee;
background-color: #222;
/* background-color: #60b347; */
}
/* LAYOUT */
header {
position: relative;
height: 35vh;
border-bottom: 7px solid #eee;
}
main {
height: 65vh;
color: #eee;
display: flex;
align-items: center;
justify-content: space-around;
}
.left {
width: 52rem;
display: flex;
flex-direction: column;
align-items: center;
}
.right {
width: 52rem;
font-size: 2rem;
}
/* ELEMENTS STYLE */
h1 {
font-size: 4rem;
text-align: center;
position: absolute;
width: 100%;
top: 52%;
left: 50%;
transform: translate(-50%, -50%);
}
.number {
background: #eee;
color: #333;
font-size: 6rem;
width: 15rem;
padding: 3rem 0rem;
text-align: center;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
}
.between {
font-size: 1.4rem;
position: absolute;
top: 2rem;
right: 2rem;
}
.again {
position: absolute;
top: 2rem;
left: 2rem;
}
.guess {
background: none;
border: 4px solid #eee;
font-family: inherit;
color: inherit;
font-size: 5rem;
padding: 2.5rem;
width: 25rem;
text-align: center;
display: block;
margin-bottom: 3rem;
}
.btn {
border: none;
background-color: #eee;
color: #222;
font-size: 2rem;
font-family: inherit;
padding: 2rem 3rem;
cursor: pointer;
}
.btn:hover {
background-color: #ccc;
}
.message {
margin-bottom: 8rem;
height: 3rem;
}
.label-score {
margin-bottom: 2rem;
}

11
javascript/chapter08/index.html Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="./scoping2.js"></script>
<title>Scoping</title>
</head>
<body></body>
</html>

15
javascript/chapter08/primitiveVSObjects.js Normal file
View File

@ -0,0 +1,15 @@
let lastName = "Aster";
let oldLastName = lastName;
lastName = "Davis";
const joanne = {
firstName: "Joanne",
lastName: "William",
age: 30,
};
const marriedJoanne = joanne;
marriedJoanne.lastName = "Davis";
const joanne2 = Object.assign({}, joanne);
joanne2.age = 22;

172
javascript/chapter08/scoping.js Normal file
View File

@ -0,0 +1,172 @@
"use strict";
// Scoping im Praxis
function calcAge(birthYear) {
const age = new Date().getFullYear() - birthYear;
function printAge() {
let output = `${firstName}, du bist ${age} Jahre alt, geboren den ${birthYear}`;
console.log(output);
if (birthYear >= 1981 && birthYear <= 1996) {
var millenial = true;
const firstName = "Steven";
output = "NEUE AUSGABE!";
const str = `Ah, du bist tausendjähriger, ${firstName}`;
console.log(str);
function add(a, b) {
return a + b;
}
}
// console.log(str);
console.log(millenial);
// console.log(add(2, 3));
console.log(output);
}
printAge();
return age;
}
const firstName = "David";
calcAge(1986);
// console.log(age);
// printAge();
// Hoisting und TDZ im Praxis
// Variablen
console.log(me);
var me = "David";
let job = "Entwickler";
const year = 1986;
// Functions
console.log(addDecl(2, 3));
// console.log(addExpr(2, 3));
console.log(addArrow);
// console.log(addArrow(2, 3));
function addDecl(a, b) {
return a + b;
}
const addExpr = function (a, b) {
return a + b;
};
var addArrow = (a, b) => a + b;
console.log(undefined);
if (!numProducts) deleteShoppingCart();
var numProducts = 10;
function deleteShoppingCart() {
console.log("Alle Produkte wurden entfernt!");
}
var x = 1;
let y = 2;
const z = 3;
console.log(x === window.x);
console.log(y === window.y);
console.log(z === window.z);
// Das Stichwort this im Praxis
console.log(this);
const calcAge = function (birthYear) {
console.log(new Date().getFullYear() - birthYear);
console.log(this);
};
calcAge(1991);
const calcAgeArrow = birthYear => {
console.log(new Date().getFullYear() - birthYear);
console.log(this);
};
calcAgeArrow(1980);
const david = {
year: 1991,
calcAge: function () {
console.log(this);
console.log(new Date().getFullYear() - this.year);
},
};
david.calcAge();
const matilda = {
year: 2017,
};
matilda.calcAge = david.calcAge;
matilda.calcAge();
const f = david.calcAge;
f();
// // Regulare Funktionen vs. Arrow Funktionen
// const david = {
// firstName: "David",
// year: 1986,
// calcAge: function () {
// // console.log(this);
// console.log(new Date().getFullYear() - this.year);
// const isMillenial = () => {
// console.log(this);
// console.log(this.year >= 1981 && this.year <= 1996);
// };
// isMillenial();
// },
// greet: () => {
// console.log(this);
// console.log(`Hello ${this.firstName}`);
// },
// };
// david.greet();
// david.calcAge();
// // Argument keyword
// const addExpr = function (a, b) {
// console.log(arguments);
// return a + b;
// };
// addExpr(2, 5);
// addExpr(2, 5, 8, 12);
// var addArrow = (a, b) => {
// console.log(arguments);
// return a + b;
// };
// addArrow(2, 5, 8);
// // Objekte vs. Primitive
// let age = 30;
// let oldAge = age;
// age = 31;
// console.log(age);
// console.log(oldAge);
// const me = {
// name: "David",
// age: 36,
// };
// const friend = me;
// friend.age = 27;
// console.log("Friend:", friend);
// console.log("Me", me);
// // Primitives vs. Objects im Praxis
// // Primitive types
// let lastName = "Williams";
// let oldLastName = lastName;
// lastName = "Davis";
// console.log(lastName, oldLastName);
// // Reference Typen
// const joanne = {
// firstName: "Joanne",
// lastName: "Williams",
// age: 27,
// };
// const marriedJoanne = joanne;
// marriedJoanne.lastName = "David";
// console.log("Before marriage:", joanne);
// console.log("After marriage: ", marriedJoanne);
// const joanne2 = {
// firstName: "Joanne",
// lastName: "Williams",
// age: 27,
// family: ["Alice", "Bob"],
// };
// const joanneCopy = Object.assign({}, joanne2);
// joanneCopy.lastName = "Davis";
// joanneCopy.family.push("Mary");
// joanneCopy.family.push("John");
// console.log("Before marriage:", joanne2);
// console.log("After marriage: ", joanneCopy);

32
javascript/chapter08/scoping2.js Normal file
View File

@ -0,0 +1,32 @@
"use strict";
var p = "David";
const david = {
// this is not block, this the object literal
firstName: "David",
year: 1986,
calcAge: function () {
console.log(this);
console.log(new Date().getFullYear() - this.year);
const self = this;
const isMillenial = function () {
console.log(self);
console.log(self.year >= 1981 && self <= 1996);
};
isMillenial();
},
greet: () => {
console.log(this);
console.log(`Hey ${this.firstName}`);
},
};
david.calcAge();
// arguments keyword
const addExpr = function (a, b) {
console.log(arguments);
console.log(a + b);
};
addExpr(5, 3);

48
javascript/chapter09/destructuringArrays.js Normal file
View File

@ -0,0 +1,48 @@
"use strict";
const flights =
"_Delayed_Departure;fao93766109;txl2133758440;11:25+_Arrival;bru0943384722;fao93766109;11:45+_Delayed_Arrival;hel7439299980;fao93766109;12:05+_Departure;fao93766109;lis2323639855;12:30";
const restaurant = {
name: "Classico Italiano",
location: "Via Angelo Tavanti 23, Firenze, Italy",
categories: ["Italian", "Pizzeria", "Vegetarian", "Organic"],
starterMenu: ["Focaccia", "Bruschetta", "Garlic Bread", "Caprese Salad"],
mainMenu: ["Pizza", "Pasta", "Risotto"],
order: function (starterIndex, mainIndex) {
return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];
},
};
// const arr = [2, 3, 4];
// const a = arr[0];
// const b = arr[1];
// const c = arr[2];
// console.log(a, b, c);
// const [x, y, z] = arr;
// console.log(x, y, z);
let [main, , secondary] = restaurant.categories;
console.log(main, secondary);
const temp = main;
main = secondary;
secondary = temp;
console.log(main, secondary);
// einfacher Variablen umtausch Mithilfe Destructiring, ohne temporäre Variable
[main, secondary] = [secondary, main];
console.log(main, secondary);
console.log(restaurant.order(2, 2));
console.log(restaurant.order(3, 1));
const nested = [2, 4, [3, 6]];
const [a, b, [c]] = nested;
console.log(a, b, c);
const [d = 1, f = 1, g = 1, k = 1, l = 1] = [1, 2, 3, 4];
console.log(d, f, g, k, l);

86
javascript/chapter09/destructuringObjects.js Normal file
View File

@ -0,0 +1,86 @@
"use strict";
const david = {
firstName: "David",
lastName: "Aster",
age: 36,
};
const { firstName, lastName, age } = david;
console.log(firstName, lastName, age);
const restauraunt = {
name: "Classico Italiano",
location: "Via Angelo Tavanti 23, Firenze, Italy",
categories: ["Italian", "Pizzeria", "Vegetarian", "Organic"],
starterMenu: ["Focaccia", "Bruschetta", "Garlic Bread", "Caprese Salad"],
mainMenu: ["Pizza", "Pasta", "Risotto"],
order: function (starterIndex, mainIndex) {
return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];
},
orderDelivery: function ({
starterIndex = 1,
mainIndex = 0,
time = "20:00",
address,
}) {
console.log(
`Order recieved! ${this.starterMenu[starterIndex]} and ${this.mainMenu[mainIndex]} will be delivered to ${address} at ${time}`
);
},
openingHours: {
thu: {
open: 12,
close: 22,
},
fri: {
open: 11,
close: 23,
},
sat: {
open: 0, // Open 24 hours
close: 24,
},
},
};
restauraunt.orderDelivery({
time: "22:30",
address: "Via del Sole, 21",
mainIndex: 2,
starterIndex: 2,
});
restauraunt.orderDelivery({
address: "Via del Sole, 21",
starterIndex: 2,
});
let { name, categories, openingHours } = restauraunt;
console.log(name, categories, openingHours);
const {
name: restaurauntName,
categories: restaurauntCategories,
openingHours: restaurauntOpeningHours,
} = restauraunt;
console.log(restaurauntName, restaurauntCategories, restaurauntOpeningHours);
const { menu = [], starterMenu: starters = [] } = restauraunt;
console.log(menu, starters);
let a = 111;
let b = 999;
const obj = { a: 1, b: 2, c: 3 };
({ a, b } = obj);
console.log(a, b);
const {
fri: { open: o, close: c },
} = openingHours;
console.log(o, c);

11
javascript/chapter09/index.html Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Destructuring Objects</title>
<script src="shortCircuitOperators.js"></script>
</head>
<body></body>
</html>

73
javascript/chapter09/nullishCoalescingOperator.js Normal file
View File

@ -0,0 +1,73 @@
const restauraunt = {
name: "Classico Italiano",
location: "Via Angelo Tavanti 23, Firenze, Italy",
categories: ["Italian", "Pizzeria", "Vegetarian", "Organic"],
starterMenu: ["Focaccia", "Bruschetta", "Garlic Bread", "Caprese Salad"],
mainMenu: ["Pizza", "Pasta", "Risotto"],
order: function (starterIndex, mainIndex) {
return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];
},
orderDelivery: function ({
starterIndex = 1,
mainIndex = 0,
time = "20:00",
address,
}) {
console.log(
`Order recieved! ${this.starterMenu[starterIndex]} and ${this.mainMenu[mainIndex]} will be delivered to ${address} at ${time}`
);
},
openingHours: {
thu: {
open: 12,
close: 22,
},
fri: {
open: 11,
close: 23,
},
sat: {
open: 0,
close: 24,
},
},
orderPasta: function (ing1, ing2, ing3) {
console.log(
`Here is your delicious pasta with ${ing1}, ${ing2} and ${ing3}`
);
},
orderPizza: function (mainIngridient, ...otherIngridients) {
console.log(mainIngridient);
console.log(otherIngridients);
},
};
restauraunt.numGuests = 0;
// nullisch Werte: null und undefined (nicht 0 und ""), wird nur dann evaluirt, nur wenn den Wert null oder undefined sein wird
const guests1 = restauraunt.numGuests ?? 10;
console.log(guests1);
const rest1 = {
name: "Capri",
numGuest: 20,
};
const rest2 = {
name: "La Piazza",
owner: "Giovanni Rossi",
};
rest1.numGuest = rest1.numGuest || 10;
rest2.numGuest = rest2.numGuest || 10;
// das Gleiche wie oben
rest2.numGuest ||= 10; // rest2.numGuest = rest2.numGuest || 10;
// verkürzte nullisch Abtreungsoperator
rest2.numGuest ??= 10; // rest2.numGuest = rest2.numGuest ?? 10;
console.log(rest1);
console.log(rest2);
rest2.owner &&= "<ANONYMOUS>";
console.log(rest2);

66
javascript/chapter09/shortCircuitOperators.js Normal file
View File

@ -0,0 +1,66 @@
const restauraunt = {
name: "Classico Italiano",
location: "Via Angelo Tavanti 23, Firenze, Italy",
categories: ["Italian", "Pizzeria", "Vegetarian", "Organic"],
starterMenu: ["Focaccia", "Bruschetta", "Garlic Bread", "Caprese Salad"],
mainMenu: ["Pizza", "Pasta", "Risotto"],
order: function (starterIndex, mainIndex) {
return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];
},
orderDelivery: function ({
starterIndex = 1,
mainIndex = 0,
time = "20:00",
address,
}) {
console.log(
`Order recieved! ${this.starterMenu[starterIndex]} and ${this.mainMenu[mainIndex]} will be delivered to ${address} at ${time}`
);
},
openingHours: {
thu: {
open: 12,
close: 22,
},
fri: {
open: 11,
close: 23,
},
sat: {
open: 0, // Open 24 hours
close: 24,
},
},
};
console.log("-------- OR --------");
//short circuiting "wenn ein Wert "richtig" ist (mehr als 0, nicht leer Wort, nicht undefined oder null )", dann wird dies Wert rausgegeben
// wird der erste richtige Wert (von links nach recht evaluirt) rausgegeben
console.log(0 || 5);
console.log("" || "jonas");
console.log(true || 0);
console.log(undefined || null);
// in unserem Fall wird der "Hello" Wert rausgeben, weil das der erste Wert ist, der nicht false ist
console.log(undefined || 0 || "" || "Hello" || 23 || null);
restauraunt.numGuests = 0;
// wenn die Anzahl der Gäste "restauraunt.numGuests" null ist, dann wird der Wert 10 rausgegeben,
// wenn es mehr als ein Gast sein wird, dann wird der Anzahl der Gäaste rausgegeben
const guests1 = restauraunt.numGuests ? restauraunt.numGuests : 10;
console.log(guests1);
//
const guests2 = restauraunt.numGuests || 10;
console.log(guests2);
console.log("-------- AND --------");
// short circuiting "wenn ein Wert "falsh" ist (0, leer Wort, undefined oder null )", dann wird dies Wert rausgegeben
// wird der erste falsche Wert (von links nach recht evaluirt) rausgegeben
console.log(0 && 5);
console.log("Hello" && 23 && undefined && 23 && null);
if (restauraunt.orderPizza) {
console.log(restauraunt.orderPizza("mushrooms", "spinach"));
}
restauraunt.orderPizza && restauraunt.orderPizza("mushrooms", "spinach");

98
javascript/chapter09/spreadOperator.js Normal file
View File

@ -0,0 +1,98 @@
const arr = [2, 4, 8, 16, 32, 64];
const badNewArr = [0, 1, arr[0], arr[1], arr[2], arr[3], arr[4], arr[5]];
const goodNewArr = [0, 1, ...arr];
console.log(badNewArr);
console.log(goodNewArr);
// output will be not [2, 4, 8, 16, 32, 64] but 2, 4, 8, 16, 32, 64
console.log(...goodNewArr);
const restauraunt = {
name: "Classico Italiano",
location: "Via Angelo Tavanti 23, Firenze, Italy",
categories: ["Italian", "Pizzeria", "Vegetarian", "Organic"],
starterMenu: ["Focaccia", "Bruschetta", "Garlic Bread", "Caprese Salad"],
mainMenu: ["Pizza", "Pasta", "Risotto"],
order: function (starterIndex, mainIndex) {
return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];
},
orderDelivery: function ({
starterIndex = 1,
mainIndex = 0,
time = "20:00",
address,
}) {
console.log(
`Order recieved! ${this.starterMenu[starterIndex]} and ${this.mainMenu[mainIndex]} will be delivered to ${address} at ${time}`
);
},
openingHours: {
thu: {
open: 12,
close: 22,
},
fri: {
open: 11,
close: 23,
},
sat: {
open: 0,
close: 24,
},
},
orderPasta: function (ing1, ing2, ing3) {
console.log(
`Here is your delicious pasta with ${ing1}, ${ing2} and ${ing3}`
);
},
orderPizza: function (mainIngridient, ...otherIngridients) {
console.log(mainIngridient);
console.log(otherIngridients);
},
};
const arr2 = [0, 1, ...[3, 4]];
const [a, b, ...others] = [1, 2, 3, 4];
console.log("REST:", a, b, others);
const [pizza, , risotto, ...otherFood] = [
...restauraunt.mainMenu,
...restauraunt.starterMenu,
];
console.log(pizza, risotto, otherFood);
const newMenu = [...restauraunt.mainMenu, "Gnocci"];
console.log(...newMenu);
const newMenuCopy = [...restauraunt.mainMenu];
const menu = [...newMenu, ...restauraunt.starterMenu];
console.log();
// Iterables: array, strings,maps,sets. But NOT Objects
const person = "David";
const letters = [...person];
//Objects with the spread operator
const { sat, ...weekDays } = restauraunt.openingHours;
console.log(sat, weekDays);
const add = function (...numbers) {
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
sum += numbers[i];
}
console.log("SUM:", sum);
};
add(2, 3);
add(2, 3, 6, 4, 8, 4);
add(2, 3, 6, 4, 76, 32, 78, 8, 4);
const x = [6, 4, 7, 4];
const y = [6, 1, 4, 5, 4, 0, 7, 9, 4];
// sum of unpacked x and y arrays
add(...x, ...y); // 6, 4, 7, 4,6, 1, 4, 5, 4, 0, 7, 9, 4 = 61
restauraunt.orderPizza("muschrooms", "onion", "olives", "spinach");

15
javascript/examples/index.html Normal file
View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Event Listeners</title>
<script src="script.js"></script>
</head>
<body>
<div>
<p class="demo">Original text</p>
</div>
</body>
</html>

8
javascript/examples/script.js Normal file
View File

@ -0,0 +1,8 @@
const myFunction = event => {
const date = new Date();
document.querySelector(".demo").innerHTML = date;
console.log(date);
console.log(event);
};
document.addEventListener("click", myFunction);

3
javascript/tips.txt Normal file
View File

@ -0,0 +1,3 @@
HTML = NOUNS <p></p> // means "paragraph" (CONTENT)
CSS = ADJECTIVES p{ color:red } // means "paragraph text is red" (PRESENTATION)
JS = VERBS p.hide() // means "h"ide the paragraph" (PROGRAMMING LANGUAGE: BUILDING WEB APPLICATION)

13
reactjs/chapter01/arrays.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<script src="arrays.js">
</script>
</head>
<body>
</body>
</html>

17
reactjs/chapter01/arrays.js Normal file
View File

@ -0,0 +1,17 @@
let ninjas = ["david-1", "david-2", "david-3", "david-4"];
// ninjas[1] = "jozica"
// console.log(ninjas);
let ages = [43, 61, 23, 42, 12, 19, ninjas[0], ninjas[1]];
console.log(ninjas.length)
// let result = ninjas.join(",");
// let result = ninjas.indexOf("david-3");
let result = ninjas.concat([ninjas[0], ninjas[1], ninjas[3]])
result.push("david-5");
result.push("david-5");
result.pop();
let deleted=result.pop();
console.log(result)
console.error(deleted)

12
reactjs/chapter01/index.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<script src="sandbox.js">
</script>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph</p>
</body>
</html>

18
reactjs/chapter01/lose_vs_strict.html Normal file
View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<script src="lose_vs_strict.js">
</script>
<style>
body {
background-color: darkslategray;
}
</style>
</head>
<body>
</body>
</html>

3
reactjs/chapter01/lose_vs_strict.js Normal file
View File

@ -0,0 +1,3 @@
let score = "100"
console.log(score + 1)

3
reactjs/chapter01/main.css Normal file
View File

@ -0,0 +1,3 @@
body {
background-color: darkslategray;
}

13
reactjs/chapter01/null_comparison.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<script src="null_comparison.js">
</script>
</head>
<body>
</body>
</html>

9
reactjs/chapter01/null_comparison.js Normal file
View File

@ -0,0 +1,9 @@
console.log(true, false,"true","false")
let email = "davidaster007@gmail.com"
let result = email.includes("@")
let names = ["david","jozica","nika"]
console.log(result)
result = names.includes("a");
console.log(result)

13
reactjs/chapter01/null_undefined.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<script src="null_undefined.js">
</script>
</head>
<body>
</body>
</html>

4
reactjs/chapter01/null_undefined.js Normal file
View File

@ -0,0 +1,4 @@
let age = null;
console.log(age, age, `The age of someone is ${age}`);

13
reactjs/chapter01/numbers.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<script src="numbers.js">
</script>
</head>
<body>
</body>
</html>

6
reactjs/chapter01/numbers.js Normal file
View File

@ -0,0 +1,6 @@
let radius = 10;
const pi = 3.14;
console.log(radius.pi);

9
reactjs/chapter01/sandbox.js Normal file
View File

@ -0,0 +1,9 @@
console.log("something is happened");
console.log(1);
let age = 25;
let newAge = age + 3;
console.log(age);
console.log(newAge)
const newValue = 25;
// newValue = 28;

13
reactjs/chapter01/strings.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<script src="strings.js">
</script>
</head>
<body>
</body>
</html>

30
reactjs/chapter01/strings.js Normal file
View File

@ -0,0 +1,30 @@
// console.log("Hello world");
let email = "davidaster007@gmail.com";
// console.log(email);
// let firstName = "David";
// let lastName = "Aster";
// let fullName = firstName + " " + lastName;
// alert(fullName)
// console.log(fullName[0]);
// console.log(fullName.length);
// console.log(fullName.toUpperCase());
// console.log(fullName.toLowerCase());
// let result = email.toLowerCase();
// console.log(email.indexOf('@'));
// console.log(email.lastIndexOf("a"));
// console.log(email.slice(0, 6));
// result = email.substring(0,6);
// result = email.substr(0,6);
result = email.replace("a","o");
console.log(result)

3
reactjs/chapter01/style.css Normal file
View File

@ -0,0 +1,3 @@
body {
background-color: grey;
}

13
reactjs/chapter01/template_strings.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<script src="template_strings.js">
</script>
</head>
<body>
</body>
</html>

16
reactjs/chapter01/template_strings.js Normal file
View File

@ -0,0 +1,16 @@
const title = "Best reads of 2019";
const author = "Mario";
const likes = 10;
// let result = "The blog called " + title + " by " + author + " has " + likes + " likes";
// Mit der Template-strings
let result = `The blog called ${title} by ${author} has ${likes} likes`;
let html = `
<h1>${title}</h1>
<p>By ${author}</p>
<span>The blog has ${likes} likes</span>
`;
console.log(result);
console.log(html);

14
reactjs/chapter01/typeConversion.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<script src="typeConversion.js">
</script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>

16
reactjs/chapter01/typeConversion.js Normal file
View File

@ -0,0 +1,16 @@
let score = "100"
console.log(typeof score)
score = Number(score)
console.log(score + 1)
console.log(typeof score)
score = Number("abcdef")
console.log(score)
console.log(typeof score)
score = String(score)
console.log(typeof score)
score = Boolean(1)
console.log(score, typeof score)

13
reactjs/chapter02/block_scope.js Normal file
View File

@ -0,0 +1,13 @@
let age = 30 // global scope
if (true) {
let age = 40
let name = "David"
console.log("Inside 1st code block ", age, name);
if(true){
let age = 50;
console.log("Inside 2nd code block ", age, name);
}
}
console.log("Outside code block: ", age, name)

12
reactjs/chapter02/break_and_continue.js Normal file
View File

@ -0,0 +1,12 @@
const scores = [50, 25, 0, 30, 100, 20, 10]
for (let i = 0; i < scores.length; i++) {
if(scores[i]===0){
continue;
}
console.log(`Your score ${scores[i]}`)
if (scores[i] === 100) {
console.log("Congrats, you got the top score!")
break;
}
}

7
reactjs/chapter02/doWhile.js Normal file
View File

@ -0,0 +1,7 @@
let names = ["david", "nika", "jozica", "domen", "eva", "denis"];
let i = 0;
do {
console.log("do-while loop", i)
i++;
} while (i < 10);

26
reactjs/chapter02/ifStatements.js Normal file
View File

@ -0,0 +1,26 @@
const age = 20;
let names = ["david", "nika", "jozica", "domen", "eva", "denis"];
if (age > 20) {
console.log("Age is more that 20");
} else {
console.log("Age is is less than 20");
}
if (names.length > 5) {
console.log("Array has more than 5 items")
} else {
console.log("Array has less then 5 items")
}
const password = "ks453$%§87kj(/gf"
if (password.length >= 8 && password.includes("@")) {
console.log("The password is mighty strong")
}
else if (password.length >= 8 || password.includes('@') && password.length > 5) {
console.log("The password is long enough")
} else {
console.log("The password is not long enough")
}

14
reactjs/chapter02/index.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<script src="block_scope.js">
</script>
<!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
</head>
<body>
</body>
</html>

9
reactjs/chapter02/logical_not.js Normal file
View File

@ -0,0 +1,9 @@
// logical NOT
let user = false;
if (!user) {
console.log("You must be logged in to continue")
}
console.log(!false)
console.log(!true)

13
reactjs/chapter02/loops.js Normal file
View File

@ -0,0 +1,13 @@
// for loops
for (let i = 0; i <= 10; i++) {
console.log(`in loop ${i}`);
}
console.log("Loop finished");
let names = ["david", "nika", "jozica", "domen", "eva", "denis"];
for (let i = 0; i < names.length; i++) {
let divName = `<div>Name: ${names[i]}</div>`;
console.log(divName);
}

39
reactjs/chapter02/switch.js Normal file
View File

@ -0,0 +1,39 @@
const grade = 'v';
// if (grade == 'A') {
// } else if (grade == 'B') {
// }
// else if (grade == 'C') {
// }
// else if (grade == 'D') {
// }
// else if (grade == 'E') {
// } else {
// }
switch (grade) {
case 'A':
console.log(`You got a ${grade}`)
break;
case 'B':
console.log(`You got a ${grade}`)
break;
case 'C':
console.log(`You got a ${grade}`)
break;
case 'D':
console.log(`You got a ${grade}`)
break;
case 'E':
console.log(`You got a ${grade}`)
break;
default:
console.log(`Not a valid grade!`)
}

13
reactjs/chapter02/while.js Normal file
View File

@ -0,0 +1,13 @@
let i = 0;
while (i < 10) {
console.log("in while loop: ", i);
i++;
}
let names = ["david", "nika", "jozica", "domen", "eva", "denis"];
i = 0;
while (i < names.length) {
console.log("Name:", names[i]);
i++;
}

13
reactjs/chapter03/arguments_parameters.js Normal file
View File

@ -0,0 +1,13 @@
const speak = function (name = "David", time = "Morning") { // argument als der ursprünlgiche Wert
console.log(`Have a nice ${time}, ${name}`);
}
console.log(speak())
const calcArea = function (radius) { // die Methode, die einen Wert zurück gebe. Eine Methode ohne return Anweisung, gebe den "undefined" Wert zurück
let area = 3.14 * radius ** 2;
console.log("Area is :",area);
return area;
}
console.log(calcArea(3));

49
reactjs/chapter03/arrow_functions.js Normal file
View File

@ -0,0 +1,49 @@
// regular function
// const calcArea = function (radius) {
// let area = 3.14 * radius ** 2;
// console.log("Area is :",area);
// return area;
// }
// arrow function
// const calcArea = (radius) => {
// let area = 3.14 * radius ** 2;
// console.log("Area is :", area);
// return area;
// }
// const calcArea = radius => {
// return area = 3.14 * radius ** 2;
// }
// das Gleiche
// const calcArea = radius => 3.14 * radius ** 2;
// const helloWorld = function(){
// return "Hello World"
// }
// das Gleiche
// const helloWorld = () => "Hello World";
// const result = helloWorld();
// console.log(result);
const bill = function (products, tax) {
let total = 0;
for (let i = 0; i < products.length; i++) {
total += products[i]
}
total *= (tax / 100);
return total;
}
const bill = (products, tax) => {
let total = 0;
for (let i = 0; i < products.length; i++) {
total += products[i]
}
return total *= (tax / 100);
};

12
reactjs/chapter03/callback_Function_in_Action.js Normal file
View File

@ -0,0 +1,12 @@
var ul = document.querySelector(".people");
const people = ["david", "nika", "jozica", "domen", "eva", "denis"];
let html = ``;
people.forEach(person => {
// create HTML template
html += `<li style="color: purple">${person}</li>`;
});
console.log(html);
ul.innerHTML = html;

28
reactjs/chapter03/callbacks.js Normal file
View File

@ -0,0 +1,28 @@
// const myFunc = (callBackFunc) => {
// let value = 50;
// callBackFunc(value);
// };
// myFunc(value => {
// console.log(value)
// });
//callbacks & foreach
let people = ["david", "nika", "jozica", "domen", "eva", "denis"];
// people.forEach(function(person){
// console.log(person);
// });
// people.forEach((person, index) => {
// console.log(index, person);
// });
const logPerson = (person, index) => {
console.log(`${index}- hello ${person}`);
};
people.forEach(logPerson);

18
reactjs/chapter03/functions.js Normal file
View File

@ -0,0 +1,18 @@
// function declaration
greet();
greet();
greet();
function greet() {
console.log("Hello from a Method!")
}
// function expression
const speak = function () {
// greet();
console.log("Have a nice day");
};
speak();
speak();
speak();

10
reactjs/chapter03/functions_vs_methods.js Normal file
View File

@ -0,0 +1,10 @@
const nameOfPerson = "David"
// functions
const greet = () => "Hello";
let resultOne = greet();
console.log(resultOne);
// methods
let resultTwo = nameOfPerson.toUpperCase(); // wenn eine Function aufgerufen wird, sagt man, eine Methode auszuführen. Definition einer Function ist eine Function
console.log(resultTwo);

15
reactjs/chapter03/index.html Normal file
View File

@ -0,0 +1,15 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Callbacks</title>
</head>
<body>
<h1>Functions</h1>
<ul class="people"></ul>
<script src="callback_Function_in_Action.js">
</script>
</body>
</html>

14
reactjs/chapter04/index.html Normal file
View File

@ -0,0 +1,14 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Objects</title>
</head>
<body>
<h1>Objects</h1>
<script src="primitive_vs_reference_types.js">
</script>
</body>
</html>

17
reactjs/chapter04/math_object.js Normal file
View File

@ -0,0 +1,17 @@
// math object
console.log(Math)
console.log(Math.PI)
console.log(Math.E)
const area = 7.4
console.log(Math.round(area))
console.log(Math.floor(area))
console.log(Math.ceil(area))
console.log(Math.trunc(area))
// random numbers
const random = Math.random()
console.log(random)
console.log(Math.round(random * 100))

82
reactjs/chapter04/object_literals.js Normal file
View File

@ -0,0 +1,82 @@
// object literals
const blogs = [
{
title: "Front end and back end programming", likes: 30
},
{
title: "How to do with react.js", likes: 13
}
];
// console.log(blogs)
let user = {
name: "David",
age: 36,
email: "davidaster007@gmail.com",
location: "Wien",
blogs: [
{ title: "Front end and back end programming", likes: 30 },
{ title: "How to do with react.js", likes: 13 }
],
login() {
console.log(`${this.name} is logged in!`)
},
logout() {
console.log(`${this.name} is logged out!`)
},
logBlog() {
// for (let i = 0; i<this.blogs.length; i++) {
// console.log(`${i + 1}: ${this.blogs[i]}`)
// console.log(this)
this.blogs.forEach(blog => {
console.log(blog.title, blog.likes)
});
// }
// console.log(this)
}
// login: function () {
// console.log(`${this.name} is logged in!`)
// },
// logout: function () {
// console.log(`${this.name} is logged out!`)
// },
// logBlog:function() {
// // for (let i = 0; i<this.blogs.length; i++) {
// // console.log(`${i + 1}: ${this.blogs[i]}`)
// // console.log(this)
// this.blogs.forEach(blog => {
// console.log(`${blog}`)
// });
// // }
// console.log(this)
// }
};
// console.log(user)
// console.log(user.name)
// user.age = 40;
// console.log(user)
// console.log(user["email"])
// const key = "location";
// user[key] = "New York" // user[location] = "New York"
// console.log(user)
// console.log(typeof user)
// user.login()
// user.logout()
// const name = "Jozica"
user.logBlog()
// console.log(this)

25
reactjs/chapter04/primitive_vs_reference_types.js Normal file
View File

@ -0,0 +1,25 @@
// primitive values
let scoreOne = 50
let scoreTwo = scoreOne
scoreOne = 100;
console.log(`scoreOne: ${scoreOne}, scoreTwo: ${scoreTwo}`)
// reference values
let userOne = { nameOf: "David", age: 36 };
let userTwo = userOne
console.log(userOne)
console.log(userTwo)
userOne.age = 33;
console.log(userOne)
console.log(userTwo)
userTwo.age = 39
console.log(userOne)
console.log(userTwo)

19
reactjs/chapter05/adding_changing_page_content.js Normal file
View File

@ -0,0 +1,19 @@
const para = document.querySelector("p");
// console.log(para.innerHTML)
// para.innerHTML += " javascript is awesome"
const paras = document.querySelectorAll("p")
paras.forEach(function (para) {
console.log(para.innerHTML) // die Methode gibt die InnerHTML Eigenschaft der Paragraph<p> Elementen
para.innerHTML += " new text"
})
const content = document.querySelector(".content")
console.log(content.innerHTML)
// content.innerHTML += "<h2> THIS IS NOW A NEW H2</h2>"
const people = ["mario", "luigi", "yoshi"];
people.forEach(person => {
content.innerHTML += `<p>${person}</p>`;
});

16
reactjs/chapter05/adding_removing_classes.js Normal file
View File

@ -0,0 +1,16 @@
const paras = document.querySelectorAll("p")
paras.forEach(function (para) {
// console.log(para.textContent) // textContent Eigenschaft zeigt uns auch verschachelte Text an (span->error)
if(para.textContent.includes("error")){
para.classList.add("error") // mit der Eigeschaft classList fügt man class error ins Tag p hinzu
}
if(para.textContent.includes("success")){
para.classList.add("success") // mit der Eigeschaft classList fügt man class error ins Tag p hinzu
}
});
const title = document.querySelector(".title")
title.classList.add("test") // fügt die Klasse test ins Tag mit der Klasse "title", eine "test" Klasse hinzu
title.classList.toggle("test") // Im Fall, dass die Klasse "test" in dem Tag mit der Klasse "title" existiert, wird die Klasse test aus dem Tag h1 entfernt

31
reactjs/chapter05/adding_removing_elements.js Normal file
View File

@ -0,0 +1,31 @@
const ul = document.querySelector("ul")
// ul.remove()
// const items = document.querySelectorAll("li")
const button = document.querySelector("button")
button.addEventListener("click", (e) => {
// ul.innerHTML += "<li>something new</li>"
const li = document.createElement("li")
li.textContent = "something new to do"
// ul.append(li)
ul.prepend(li)
})
// items.forEach(item => {
// item.addEventListener("click", (e) => {
// // e.target.style.textDecoration ="line-through"
// // e.target.remove()
// e.stopPropagation()
// console.log("LI Clicked")
// })
// })
ul.addEventListener("click", (e) => {
// console.log("UL Clicked")
// console.log(e.target)
if (e.target.tagName === "LI") {
e.target.remove()
}
})

12
reactjs/chapter05/changing_css_style.js Normal file
View File

@ -0,0 +1,12 @@
const title = document.querySelector("h1")
// title.setAttribute("style" ,"margin: 50px")
console.log(title.style)
console.log(title.style.color)
title.style.margin = "50px"
title.style.color = "blue"
title.style.fontSize = "60px"
title.style.margin = ""

Some files were not shown because too many files have changed in this diff Show More