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
+
+
+ {{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