Session 4
marcgauch
parent
65869fbe87
commit
f4babc01a9
|
|
@ -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");
|
||||
|
|
@ -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>
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
@ -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");
|
||||
|
|
@ -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>
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
@ -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
|
||||
*/
|
||||
|
|
@ -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>
|
||||
<button @click="changeNumber(-5)">- 5</button>
|
||||
<button @click="changeNumber(-1)">- 1</button>
|
||||
<button @click="changeNumber(1)">+ 1</button>
|
||||
<button @click="changeNumber(5)">+ 5</button>
|
||||
<button @click="changeNumber(10)">+ 10</button>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue