gauchmarc
/
software-development-2022-extra
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Session 4

main
marcgauch 2023-01-23 22:00:31 +01:00
parent 65869fbe87
commit f4babc01a9
9 changed files with 483 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
session-4/1-wilde-schlaufen-mit-watch/app.js Normal file
View File

@ -0,0 +1,89 @@
const app = Vue.createApp({
data() {
return {
contacts: [
{ name: "Hans", firstname: "Meier", dateOfBirth: "1967-12-15" },
{ name: "Luca", firstname: "Rudolf", dateOfBirth: "1999-01-12" },
{ name: "Laura", firstname: "Steiner", dateOfBirth: "2002-12-24" },
{ name: "Alfred", firstname: "Hauser", dateOfBirth: "1932-05-16" },
],
amountOfContacts: 4,
isVisible: false,
name: "",
firstname: "",
dateOfBirth: "",
};
},
methods: {
addContact() {
// Das folgende IF verhindert das Hinzufügen eines nicht kompletten Eintrags.
if (
this.name !== "" &&
this.firstname !== "" &&
this.dateOfBirth !== ""
) {
// Kontakt hinzufügen
this.contacts.push({
name: this.name,
firstname: this.firstname,
dateOfBirth: this.dateOfBirth,
});
// Kontaktzähler(amountOfContacts) erhöhen
this.amountOfContacts = this.amountOfContacts + 1; // (3 mal das gleiche Resultat)
//this.amountOfContacts += 1; // (3 mal das gleiche Resultat)
//this.amountOfContacts++ // (3 mal das gleiche Resultat)
// Eingaben leeren
this.name = "";
this.firstname = "";
this.dateOfBirth = "";
}
},
},
computed: {},
// mache einen watcher der uns mitteilt wenn wir 10 oder mehr contacts haben.
watch: {
/*
// für einen spezifischen verbotenen Namen
firstname() {
// wir wollen keine asdf* in unserer Adressliste
// * das ist einfach ein Beispiel
console.log("im watcher", this.newContactFirstname);
// wenn der firstname "asdf" ist soll eine Meldung (alert) kommen, das das keine gültige Eingabe ist.
if (this.firstname === "asdf") {
alert("dich wollen wir hier nicht");
}
},
*/
// wir wollen einen Fluchwortfilter beim Vornamen. Egal ob gross oder klein geschrieben
firstname() {
// verbotene Namen sind: ["marc", "andrea", "yaren", "stefanie", "stephanie", "stefani"]
const evils = [
"andrea",
"marc",
"stefani",
"stefanie",
"stephanie",
"yaren",
];
for (let i = 0; i < evils.length; i++) {
const evil = evils[i];
if (this.firstname === evil) {
alert("gtfo");
}
}
},
amountOfContacts() {
// wenn wir 7 oder mehr kontakte haben soll eine meldung(Zu oberst auf der Seite soll stehen "you're famous") erscheinen.
if (this.amountOfContacts >= 7) {
this.isVisible = true;
}
},
},
});
app.mount("#app");

30
session-4/1-wilde-schlaufen-mit-watch/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" />
<title>TITLE</title>
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue@next" defer></script>
<script src="app.js" defer></script>
</head>
<body>
<section id="app">
<p v-if="isVisible">YOU'RE FAMOUS</p>
<section>
Name:<input type="text" v-model="name" /><br />
Firstname:<input type="text" v-model="firstname" /><br />
Date of Birth<input type="date" v-model="dateOfBirth" /><br />
<button @click="addContact">Add to my contacts</button>
</section>
<p v-for="contact in contacts">
{{contact.firstname}}, {{contact.name}}<br />
{{contact.dateOfBirth}}
</p>
</section>
</body>
</html>

64
session-4/1-wilde-schlaufen-mit-watch/styles.css Normal file
View File

@ -0,0 +1,64 @@
* {
box-sizing: border-box;
}
html {
font-family: 'Jost', sans-serif;
}
body {
margin: 0;
}
section {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
margin: 3rem;
border-radius: 10px;
padding: 1rem;
text-align: center;
}
h2 {
font-size: 2rem;
border-bottom: 4px solid #ccc;
color: #970076;
margin: 0 0 1rem 0;
}
p {
font-size: 1.25rem;
font-weight: bold;
background-color: #970076;
padding: 0.5rem;
color: white;
border-radius: 25px;
}
input {
font: inherit;
border: 1px solid #ccc;
}
input:focus {
outline: none;
border-color: #1b995e;
background-color: #d7fdeb;
}
button {
font: inherit;
cursor: pointer;
border: 1px solid #ff0077;
background-color: #ff0077;
color: white;
padding: 0.05rem 1rem;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
}
button:hover,
button:active {
background-color: #ec3169;
border-color: #ec3169;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
}

23
session-4/2-nochmals-v-for-und-v-model/app.js Normal file
View File

@ -0,0 +1,23 @@
/*
Das Ziel dieser Anwendung ist es:
1. Eine Speisekarte für eine Pizzaria zu haben
2. Weitere Namen hinzufügen können
*/
const app = Vue.createApp({
data() {
return {
newPizza: "",
pizzas: ["Funghi", "Napoli", "Vegetariana"],
};
},
methods: {
addPizzaName() {
//hier kommt der code wo ich eine pizza in die liste packe
this.pizzas.push(this.newPizza);
},
},
});
app.mount("#app");

24
session-4/2-nochmals-v-for-und-v-model/index.html Normal file
View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TITLE</title>
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue@next" defer></script>
<script src="app.js" defer></script>
</head>
<body>
<section id="app">
<input type="text" v-model="newPizza" />
<button @click="addPizzaName">Your new pizza</button>
<ul>
<li v-for="pizza in pizzas">{{pizza}}</li>
</ul>
</section>
</body>
</html>

64
session-4/2-nochmals-v-for-und-v-model/styles.css Normal file
View File

@ -0,0 +1,64 @@
* {
box-sizing: border-box;
}
html {
font-family: 'Jost', sans-serif;
}
body {
margin: 0;
}
section {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
margin: 3rem;
border-radius: 10px;
padding: 1rem;
text-align: center;
}
h2 {
font-size: 2rem;
border-bottom: 4px solid #ccc;
color: #970076;
margin: 0 0 1rem 0;
}
p {
font-size: 1.25rem;
font-weight: bold;
background-color: #970076;
padding: 0.5rem;
color: white;
border-radius: 25px;
}
input {
font: inherit;
border: 1px solid #ccc;
}
input:focus {
outline: none;
border-color: #1b995e;
background-color: #d7fdeb;
}
button {
font: inherit;
cursor: pointer;
border: 1px solid #ff0077;
background-color: #ff0077;
color: white;
padding: 0.05rem 1rem;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
}
button:hover,
button:active {
background-color: #ec3169;
border-color: #ec3169;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
}

90
session-4/3-number-guesser/app.js Normal file
View File

@ -0,0 +1,90 @@
const app = Vue.createApp({
data() {
return {
target: Math.ceil(Math.random() * 101) - 1,
number: 0,
};
},
methods: {
changeNumber(num) {
this.number += num;
// erlaubt keine nummern kleiner als 0 oder grösser als 100
if (this.number < 0) {
this.number = 0;
} else if (this.number > 100) {
this.number = 100;
}
},
},
computed: {
result() {
if (this.number === this.target) {
return "Nice";
} else if (this.number < this.target) {
return "too low";
} else {
return "too high";
}
},
paraClasses() {
return {
low: this.number < this.target,
perfect: this.number === this.target,
high: this.number > this.target,
};
},
},
});
app.mount("#app");
/*
this.something = true //setzen auf true
!this.something // NOT true. ändert aber nichts da wir es nicht zuweisen
this.something = !this.something // zuerst rechts vom = NOT True. also wird FALSe zugewiesen
this.something // ist jetzt false
----
another = true
another != another -> Das ist KEINE zuweisung sondern ein Vergleich.
TRUE != TRUE -> das ist false weil TRUE ist nicht ungleich TRUE
---
const a = 3
const b = 4
const c = a + b + b
const d = a + 2 * b
console.log(c) // gibt 11 aus
console.log(d) // gibt 11 aus
----
Unterschied =, == und ===
// = weist dem ausdruck links das von rechts zu
// == vergleicht
// === vergleicht ebenfalls (aber strenger. es wird auf den Datentyp geachtet)
const a = "1"
const b = 1
const c = true
console.log(a == b) // true
console.log(a === b) // false. Weil der Datentyp ist nicht gleich. String und Nummer
console.log(a == c) // true
console.log(c == a) // true
console.log(a === c) // false. String und boolean
console.log(b == c) // true
console.log(b === c) // false. Nummer und boolean
*/

27
session-4/3-number-guesser/index.html Normal file
View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TITLE</title>
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue@next" defer></script>
<script src="app.js" defer></script>
</head>
<body>
<section id="app">
<p :class="paraClasses">{{ result }}</p>
{{number}}<br /><br />
<button @click="changeNumber(-10)">- 10</button>&nbsp;
<button @click="changeNumber(-5)">- 5</button>&nbsp;
<button @click="changeNumber(-1)">- 1</button>&nbsp;
<button @click="changeNumber(1)">+ 1</button>&nbsp;
<button @click="changeNumber(5)">+ 5</button>&nbsp;
<button @click="changeNumber(10)">+ 10</button>
</section>
</body>
</html>

72
session-4/3-number-guesser/styles.css Normal file
View File

@ -0,0 +1,72 @@
* {
box-sizing: border-box;
}
html {
font-family: 'Jost', sans-serif;
}
body {
margin: 0;
}
section {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
margin: 3rem;
border-radius: 10px;
padding: 1rem;
text-align: center;
}
h2 {
font-size: 2rem;
border-bottom: 4px solid #ccc;
color: #970076;
margin: 0 0 1rem 0;
}
p {
font-size: 1.25rem;
font-weight: bold;
padding: 0.5rem;
border-radius: 25px;
}
input {
font: inherit;
border: 1px solid #ccc;
}
input:focus {
outline: none;
border-color: #1b995e;
background-color: #d7fdeb;
}
button {
font: inherit;
cursor: pointer;
border: 1px solid #ff0077;
background-color: #ff0077;
color: white;
padding: 0.05rem 1rem;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
}
button:hover,
button:active {
background-color: #ec3169;
border-color: #ec3169;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
}
.low {
background-color: #6874e1;
}
.high {
background-color: #fa2424;
}
.perfect {
background-color: #7ec932;
}