From f4babc01a9e56fac8fc0fac740cbe84665d52d9e Mon Sep 17 00:00:00 2001 From: marcgauch <34353267+marcgauch@users.noreply.github.com> Date: Mon, 23 Jan 2023 22:00:31 +0100 Subject: [PATCH] Session 4 --- session-4/1-wilde-schlaufen-mit-watch/app.js | 89 ++++++++++++++++++ .../1-wilde-schlaufen-mit-watch/index.html | 30 +++++++ .../1-wilde-schlaufen-mit-watch/styles.css | 64 +++++++++++++ session-4/2-nochmals-v-for-und-v-model/app.js | 23 +++++ .../2-nochmals-v-for-und-v-model/index.html | 24 +++++ .../2-nochmals-v-for-und-v-model/styles.css | 64 +++++++++++++ session-4/3-number-guesser/app.js | 90 +++++++++++++++++++ session-4/3-number-guesser/index.html | 27 ++++++ session-4/3-number-guesser/styles.css | 72 +++++++++++++++ 9 files changed, 483 insertions(+) create mode 100644 session-4/1-wilde-schlaufen-mit-watch/app.js create mode 100644 session-4/1-wilde-schlaufen-mit-watch/index.html create mode 100644 session-4/1-wilde-schlaufen-mit-watch/styles.css create mode 100644 session-4/2-nochmals-v-for-und-v-model/app.js create mode 100644 session-4/2-nochmals-v-for-und-v-model/index.html create mode 100644 session-4/2-nochmals-v-for-und-v-model/styles.css create mode 100644 session-4/3-number-guesser/app.js create mode 100644 session-4/3-number-guesser/index.html create mode 100644 session-4/3-number-guesser/styles.css diff --git a/session-4/1-wilde-schlaufen-mit-watch/app.js b/session-4/1-wilde-schlaufen-mit-watch/app.js new file mode 100644 index 0000000..58a507f --- /dev/null +++ b/session-4/1-wilde-schlaufen-mit-watch/app.js @@ -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"); diff --git a/session-4/1-wilde-schlaufen-mit-watch/index.html b/session-4/1-wilde-schlaufen-mit-watch/index.html new file mode 100644 index 0000000..ebb03cc --- /dev/null +++ b/session-4/1-wilde-schlaufen-mit-watch/index.html @@ -0,0 +1,30 @@ + + + + + + TITLE + + + + + + +
+

YOU'RE FAMOUS

+
+ Name:
+ Firstname:
+ Date of Birth
+ +
+

+ {{contact.firstname}}, {{contact.name}}
+ {{contact.dateOfBirth}} +

+
+ + diff --git a/session-4/1-wilde-schlaufen-mit-watch/styles.css b/session-4/1-wilde-schlaufen-mit-watch/styles.css new file mode 100644 index 0000000..1fa3dba --- /dev/null +++ b/session-4/1-wilde-schlaufen-mit-watch/styles.css @@ -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); + } + \ No newline at end of file diff --git a/session-4/2-nochmals-v-for-und-v-model/app.js b/session-4/2-nochmals-v-for-und-v-model/app.js new file mode 100644 index 0000000..74379e3 --- /dev/null +++ b/session-4/2-nochmals-v-for-und-v-model/app.js @@ -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"); diff --git a/session-4/2-nochmals-v-for-und-v-model/index.html b/session-4/2-nochmals-v-for-und-v-model/index.html new file mode 100644 index 0000000..a80b47b --- /dev/null +++ b/session-4/2-nochmals-v-for-und-v-model/index.html @@ -0,0 +1,24 @@ + + + + + + TITLE + + + + + + +
+ + + +
+ + diff --git a/session-4/2-nochmals-v-for-und-v-model/styles.css b/session-4/2-nochmals-v-for-und-v-model/styles.css new file mode 100644 index 0000000..1fa3dba --- /dev/null +++ b/session-4/2-nochmals-v-for-und-v-model/styles.css @@ -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); + } + \ No newline at end of file diff --git a/session-4/3-number-guesser/app.js b/session-4/3-number-guesser/app.js new file mode 100644 index 0000000..1c807f9 --- /dev/null +++ b/session-4/3-number-guesser/app.js @@ -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 +*/ diff --git a/session-4/3-number-guesser/index.html b/session-4/3-number-guesser/index.html new file mode 100644 index 0000000..f80909b --- /dev/null +++ b/session-4/3-number-guesser/index.html @@ -0,0 +1,27 @@ + + + + + + TITLE + + + + + + +
+

{{ result }}

+ {{number}}

+   +   +   +   +   + +
+ + diff --git a/session-4/3-number-guesser/styles.css b/session-4/3-number-guesser/styles.css new file mode 100644 index 0000000..4b5ac71 --- /dev/null +++ b/session-4/3-number-guesser/styles.css @@ -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; + } + \ No newline at end of file