From d5b9c54ea1ff44737a17df7a6b4d904fd714a1d5 Mon Sep 17 00:00:00 2001
From: Marc Gauch <34353267+marcgauch@users.noreply.github.com>
Date: Thu, 17 Nov 2022 15:48:17 +0100
Subject: [PATCH] stuff
---
README.md | 1 +
ToDoList/app.js | 18 +++++++
ToDoList/index.html | 44 +++++++++++++++++
assignment5-1/.DS_Store | Bin 0 -> 6148 bytes
assignment5-1/app.js | 20 ++++++++
assignment5-1/index.html | 33 +++++++++++++
assignment5-1/styles.css | 63 ++++++++++++++++++++++++
assignment5-2/app.js | 17 +++++++
assignment5-2/index.html | 33 +++++++++++++
assignment5-2/styles.css | 73 ++++++++++++++++++++++++++++
assignment5-2/test.js | 0
assignment5-3/app.js | 28 +++++++++++
assignment5-3/index.html | 30 ++++++++++++
assignment5-3/styles.css | 73 ++++++++++++++++++++++++++++
assignment5-4/app.js | 9 ++++
assignment5-4/index.html | 34 +++++++++++++
assignment5-4/styles.css | 91 +++++++++++++++++++++++++++++++++++
assignment5-5/app.js | 18 +++++++
assignment5-5/index.html | 35 ++++++++++++++
assignment5-5/styles.css | 80 ++++++++++++++++++++++++++++++
basic-vue-project/app.js | 15 ++++++
basic-vue-project/index.html | 23 +++++++++
basic-vue-project/styles.css | 40 +++++++++++++++
friendslist/app.js | 21 ++++++++
friendslist/index.html | 34 +++++++++++++
friendslist/styles.css | 63 ++++++++++++++++++++++++
test.js | 4 ++
27 files changed, 900 insertions(+)
create mode 100644 README.md
create mode 100644 ToDoList/app.js
create mode 100644 ToDoList/index.html
create mode 100644 assignment5-1/.DS_Store
create mode 100644 assignment5-1/app.js
create mode 100644 assignment5-1/index.html
create mode 100644 assignment5-1/styles.css
create mode 100644 assignment5-2/app.js
create mode 100644 assignment5-2/index.html
create mode 100644 assignment5-2/styles.css
create mode 100644 assignment5-2/test.js
create mode 100644 assignment5-3/app.js
create mode 100644 assignment5-3/index.html
create mode 100644 assignment5-3/styles.css
create mode 100644 assignment5-4/app.js
create mode 100644 assignment5-4/index.html
create mode 100644 assignment5-4/styles.css
create mode 100644 assignment5-5/app.js
create mode 100644 assignment5-5/index.html
create mode 100644 assignment5-5/styles.css
create mode 100644 basic-vue-project/app.js
create mode 100644 basic-vue-project/index.html
create mode 100644 basic-vue-project/styles.css
create mode 100644 friendslist/app.js
create mode 100644 friendslist/index.html
create mode 100644 friendslist/styles.css
create mode 100644 test.js
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..96d7c9f
--- /dev/null
+++ b/README.md
@@ -0,0 +1 @@
+# Software Developent
\ No newline at end of file
diff --git a/ToDoList/app.js b/ToDoList/app.js
new file mode 100644
index 0000000..2a9531f
--- /dev/null
+++ b/ToDoList/app.js
@@ -0,0 +1,18 @@
+const app = Vue.createApp({
+ data: () => ({
+ newItem: "",
+ items: ["buy milk"],
+ }),
+ methods: {
+ addItem() {
+ if (!this.newItem) return;
+ this.items.unshift(this.newItem);
+ this.newItem = "";
+ },
+ removeItem(index) {
+ this.items.splice(index, 1);
+ },
+ },
+});
+
+app.mount("#comp");
diff --git a/ToDoList/index.html b/ToDoList/index.html
new file mode 100644
index 0000000..619b047
--- /dev/null
+++ b/ToDoList/index.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+ Example 1 Week 5
+
+
+
+
+
+
+
+
+
diff --git a/assignment5-1/.DS_Store b/assignment5-1/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..5008ddfcf53c02e82d7eee2e57c38e5672ef89f6
GIT binary patch
literal 6148
zcmeH~Jr2S!425mzP>H1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3
zem<@ulZcFPQ@L2!n>{z**++&mCkOWA81W14cNZlEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ
zLs35+`xjp>T0 ({
+ myName: "Marc",
+ myAge: 12,
+ anImageUrl:
+ "https://images.unsplash.com/photo-1444464666168-49d633b86797?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2338&q=80",
+ myInput:
+ "Deserunt cupidatat dolor ea ex excepteur ad Lorem culpa pariatur dolore.",
+ }),
+ methods: {
+ agePlusFive() {
+ return this.myAge + 5;
+ },
+ randomNumber() {
+ return Math.random();
+ },
+ },
+});
+
+app.mount("#assignment");
diff --git a/assignment5-1/index.html b/assignment5-1/index.html
new file mode 100644
index 0000000..052f4f1
--- /dev/null
+++ b/assignment5-1/index.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+ Vue Basics
+
+
+
+
+
+
+
+
+ {{myName}}
+
+ {{myAge}}
+
+ {{ agePlusFive() }}
+
+ {{ randomNumber() }}
+
+
+
+
+
+
+
+
+
diff --git a/assignment5-1/styles.css b/assignment5-1/styles.css
new file mode 100644
index 0000000..d426d49
--- /dev/null
+++ b/assignment5-1/styles.css
@@ -0,0 +1,63 @@
+* {
+ 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);
+}
diff --git a/assignment5-2/app.js b/assignment5-2/app.js
new file mode 100644
index 0000000..93feed8
--- /dev/null
+++ b/assignment5-2/app.js
@@ -0,0 +1,17 @@
+const app = Vue.createApp({
+ data: () => ({
+ paragraph2: "",
+ paragraph3: "",
+ }),
+ methods: {
+ showAlert() {
+ alert("WTF!");
+ },
+ update2(event) {
+ this.paragraph2 = event.target.value;
+ },
+ update3(event) {
+ this.paragraph3 = event.target.value;
+ },
+ },
+});
diff --git a/assignment5-2/index.html b/assignment5-2/index.html
new file mode 100644
index 0000000..5d07d80
--- /dev/null
+++ b/assignment5-2/index.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+ Vue Basics
+
+
+
+
+
+
+
+
+
+
diff --git a/assignment5-2/styles.css b/assignment5-2/styles.css
new file mode 100644
index 0000000..6bed5b3
--- /dev/null
+++ b/assignment5-2/styles.css
@@ -0,0 +1,73 @@
+* {
+ box-sizing: border-box;
+}
+
+html {
+ font-family: 'Jost', sans-serif;
+}
+
+body {
+ margin: 0;
+}
+
+header {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ margin: 3rem;
+ border-radius: 10px;
+ padding: 1rem;
+ background-color: #1b995e;
+ color: white;
+ text-align: center;
+}
+
+#assignment {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ margin: 3rem;
+ border-radius: 10px;
+ padding: 1rem;
+ text-align: center;
+}
+
+#assignment h2 {
+ font-size: 2rem;
+ border-bottom: 4px solid #ccc;
+ color: #1b995e;
+ margin: 0 0 1rem 0;
+}
+
+#assignment p {
+ font-size: 1.25rem;
+ font-weight: bold;
+ background-color: #8ddba4;
+ padding: 0.5rem;
+ color: #1f1f1f;
+ border-radius: 25px;
+}
+
+#assignment input {
+ font: inherit;
+ border: 1px solid #ccc;
+}
+
+#assignment input:focus {
+ outline: none;
+ border-color: #1b995e;
+ background-color: #d7fdeb;
+}
+
+#assignment 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);
+}
+
+#assignment button:hover,
+#assignment button:active {
+ background-color: #ec3169;
+ border-color: #ec3169;
+ box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
+}
diff --git a/assignment5-2/test.js b/assignment5-2/test.js
new file mode 100644
index 0000000..e69de29
diff --git a/assignment5-3/app.js b/assignment5-3/app.js
new file mode 100644
index 0000000..d477b1e
--- /dev/null
+++ b/assignment5-3/app.js
@@ -0,0 +1,28 @@
+const app = Vue.createApp({
+ data: () => ({
+ sum: 0,
+ timeout: null,
+ }),
+ methods: {
+ add(amount) {
+ this.sum += amount;
+ },
+ },
+ computed: {
+ result() {
+ if (this.sum < 37) return "Not there yet";
+ if (this.sum > 37) return "Too much!";
+ return this.number;
+ },
+ },
+ watch: {
+ sum() {
+ clearTimeout(this.timeout);
+ this.timeout = setTimeout(() => {
+ this.sum = 0;
+ }, 5000);
+ },
+ },
+});
+
+app.mount("#assignment");
diff --git a/assignment5-3/index.html b/assignment5-3/index.html
new file mode 100644
index 0000000..0c28b0f
--- /dev/null
+++ b/assignment5-3/index.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+ Vue Basics
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Result: {{result}}
+ {{sum}}
+
+
+
+
diff --git a/assignment5-3/styles.css b/assignment5-3/styles.css
new file mode 100644
index 0000000..6bed5b3
--- /dev/null
+++ b/assignment5-3/styles.css
@@ -0,0 +1,73 @@
+* {
+ box-sizing: border-box;
+}
+
+html {
+ font-family: 'Jost', sans-serif;
+}
+
+body {
+ margin: 0;
+}
+
+header {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ margin: 3rem;
+ border-radius: 10px;
+ padding: 1rem;
+ background-color: #1b995e;
+ color: white;
+ text-align: center;
+}
+
+#assignment {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ margin: 3rem;
+ border-radius: 10px;
+ padding: 1rem;
+ text-align: center;
+}
+
+#assignment h2 {
+ font-size: 2rem;
+ border-bottom: 4px solid #ccc;
+ color: #1b995e;
+ margin: 0 0 1rem 0;
+}
+
+#assignment p {
+ font-size: 1.25rem;
+ font-weight: bold;
+ background-color: #8ddba4;
+ padding: 0.5rem;
+ color: #1f1f1f;
+ border-radius: 25px;
+}
+
+#assignment input {
+ font: inherit;
+ border: 1px solid #ccc;
+}
+
+#assignment input:focus {
+ outline: none;
+ border-color: #1b995e;
+ background-color: #d7fdeb;
+}
+
+#assignment 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);
+}
+
+#assignment button:hover,
+#assignment button:active {
+ background-color: #ec3169;
+ border-color: #ec3169;
+ box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
+}
diff --git a/assignment5-4/app.js b/assignment5-4/app.js
new file mode 100644
index 0000000..32e1a00
--- /dev/null
+++ b/assignment5-4/app.js
@@ -0,0 +1,9 @@
+const app = Vue.createApp({
+ data: () => ({
+ class1: "",
+ visible: true,
+ color: "",
+ }),
+});
+
+app.mount("#assignment");
diff --git a/assignment5-4/index.html b/assignment5-4/index.html
new file mode 100644
index 0000000..b1ffc41
--- /dev/null
+++ b/assignment5-4/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+ Vue Basics
+
+
+
+
+
+
+
+
+
+
diff --git a/assignment5-4/styles.css b/assignment5-4/styles.css
new file mode 100644
index 0000000..e69e40a
--- /dev/null
+++ b/assignment5-4/styles.css
@@ -0,0 +1,91 @@
+* {
+ box-sizing: border-box;
+}
+
+html {
+ font-family: 'Jost', sans-serif;
+}
+
+body {
+ margin: 0;
+}
+
+header {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ margin: 3rem;
+ border-radius: 10px;
+ padding: 1rem;
+ background-color: #1b995e;
+ color: white;
+ text-align: center;
+}
+
+#assignment {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ margin: 3rem;
+ border-radius: 10px;
+ padding: 1rem;
+ text-align: center;
+}
+
+#assignment h2 {
+ font-size: 2rem;
+ border-bottom: 4px solid #ccc;
+ color: #1b995e;
+ margin: 0 0 1rem 0;
+}
+
+p {
+ font-size: 1.25rem;
+ font-weight: bold;
+ background-color: #8ddba4;
+ padding: 0.5rem;
+ color: #1f1f1f;
+ border-radius: 25px;
+}
+
+#assignment input {
+ font: inherit;
+ border: 1px solid #ccc;
+}
+
+#assignment input:focus {
+ outline: none;
+ border-color: #1b995e;
+ background-color: #d7fdeb;
+}
+
+#assignment 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);
+}
+
+#assignment button:hover,
+#assignment button:active {
+ background-color: #ec3169;
+ border-color: #ec3169;
+ box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
+}
+
+.user1 {
+ background-color: blue;
+ color: white;
+}
+
+.user2 {
+ background-color: purple;
+ color: white;
+}
+
+.hidden {
+ display: none;
+}
+
+.visible {
+ display: block;
+}
diff --git a/assignment5-5/app.js b/assignment5-5/app.js
new file mode 100644
index 0000000..36fcadd
--- /dev/null
+++ b/assignment5-5/app.js
@@ -0,0 +1,18 @@
+const app = Vue.createApp({
+ data: () => ({
+ tasks: [],
+ newTask: "",
+ showList: true,
+ }),
+ methods: {
+ addTask() {
+ this.tasks.unshift(this.newTask);
+ this.newTask = "";
+ },
+ toggleList() {
+ this.showList ^= true;
+ },
+ },
+});
+
+app.mount("#assignment");
diff --git a/assignment5-5/index.html b/assignment5-5/index.html
new file mode 100644
index 0000000..616cf1c
--- /dev/null
+++ b/assignment5-5/index.html
@@ -0,0 +1,35 @@
+
+
+
+
+
+ Vue Basics
+
+
+
+
+
+
+
+ Vue Lists and Conditional Content
+
+
+
+
diff --git a/assignment5-5/styles.css b/assignment5-5/styles.css
new file mode 100644
index 0000000..4ee22e5
--- /dev/null
+++ b/assignment5-5/styles.css
@@ -0,0 +1,80 @@
+* {
+ box-sizing: border-box;
+}
+
+html {
+ font-family: 'Jost', sans-serif;
+}
+
+body {
+ margin: 0;
+}
+
+header {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ margin: 3rem;
+ border-radius: 10px;
+ padding: 1rem;
+ background-color: #1b995e;
+ color: white;
+ text-align: center;
+}
+
+#assignment {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ margin: 3rem;
+ border-radius: 10px;
+ padding: 1rem;
+ text-align: center;
+}
+
+#assignment h2 {
+ font-size: 2rem;
+ border-bottom: 4px solid #ccc;
+ color: #1b995e;
+ margin: 0 0 1rem 0;
+}
+
+#assignment ul {
+ list-style: none;
+ margin: 1rem 0;
+ padding: 0;
+}
+
+#assignment li {
+ margin: 1rem 0;
+ font-size: 1.25rem;
+ font-weight: bold;
+ background-color: #8ddba4;
+ padding: 0.5rem;
+ color: #1f1f1f;
+ border-radius: 25px;
+}
+
+#assignment input {
+ font: inherit;
+ border: 1px solid #ccc;
+}
+
+#assignment input:focus {
+ outline: none;
+ border-color: #1b995e;
+ background-color: #d7fdeb;
+}
+
+#assignment 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);
+}
+
+#assignment button:hover,
+#assignment button:active {
+ background-color: #ec3169;
+ border-color: #ec3169;
+ box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
+}
diff --git a/basic-vue-project/app.js b/basic-vue-project/app.js
new file mode 100644
index 0000000..b56ab32
--- /dev/null
+++ b/basic-vue-project/app.js
@@ -0,0 +1,15 @@
+Vue.createApp({
+ data() {
+ return {
+ goals: [],
+ enteredValue: ``
+ };
+ },
+ methods: {
+ addGoal() {
+ this.goals.push(this.enteredValue);
+ this.enteredValue = ``;
+ }
+ }
+}).mount(`#app`);
+
diff --git a/basic-vue-project/index.html b/basic-vue-project/index.html
new file mode 100644
index 0000000..5cdedc4
--- /dev/null
+++ b/basic-vue-project/index.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+ A First App
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/basic-vue-project/styles.css b/basic-vue-project/styles.css
new file mode 100644
index 0000000..3b23f7a
--- /dev/null
+++ b/basic-vue-project/styles.css
@@ -0,0 +1,40 @@
+* {
+ box-sizing: border-box;
+}
+
+html {
+ font-family: sans-serif;
+}
+
+body {
+ margin: 0;
+}
+
+#app {
+ margin: 3rem auto;
+ max-width: 40rem;
+ padding: 1rem;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+}
+
+label, input {
+ margin-bottom: 0.5rem;
+ display: block;
+ width: 100%;
+}
+
+label {
+ font-weight: bold;
+}
+
+ul {
+ list-style: none;
+ margin: 1rem 0;
+ padding: 0;
+}
+
+li {
+ margin: 1rem 0;
+ padding: 1rem;
+ border: 1px solid #ccc;
+}
\ No newline at end of file
diff --git a/friendslist/app.js b/friendslist/app.js
new file mode 100644
index 0000000..a6eacea
--- /dev/null
+++ b/friendslist/app.js
@@ -0,0 +1,21 @@
+const app = Vue.createApp({
+ data: () => ({
+ friends: [
+ {
+ name: "Manuel Lorenz",
+ phone: "01234 5678 991",
+ email: "manuel@localhost.com",
+ },
+ {
+ name: "Julie Jones",
+ phone: "09876 543 221",
+ email: "julie@localhost.com",
+ },
+ ],
+ }),
+ methods: {},
+ computed: {},
+ watch: {},
+});
+
+app.mount("#app");
diff --git a/friendslist/index.html b/friendslist/index.html
new file mode 100644
index 0000000..bc1c80d
--- /dev/null
+++ b/friendslist/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+ Vue Basics
+
+
+
+
+
+
+
+
+
+ -
+
{{friend.name}}
+
+
+ - Phone: {{friend.phone}}
+ - Email: {{friend.email}}
+
+
+
+
+
+
diff --git a/friendslist/styles.css b/friendslist/styles.css
new file mode 100644
index 0000000..700054f
--- /dev/null
+++ b/friendslist/styles.css
@@ -0,0 +1,63 @@
+* {
+ box-sizing: border-box;
+}
+
+html {
+ font-family: 'Jost', sans-serif;
+}
+
+body {
+ margin: 0;
+}
+
+header {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ margin: 3rem auto;
+ border-radius: 10px;
+ padding: 1rem;
+ background-color: #58004d;
+ color: white;
+ text-align: center;
+ width: 90%;
+ max-width: 40rem;
+}
+
+#app ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+#app li {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ margin: 1rem auto;
+ border-radius: 10px;
+ padding: 1rem;
+ text-align: center;
+ width: 90%;
+ max-width: 40rem;
+}
+
+#app h2 {
+ font-size: 2rem;
+ border-bottom: 4px solid #ccc;
+ color: #58004d;
+ margin: 0 0 1rem 0;
+}
+
+#app 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);
+}
+
+#app button:hover,
+#app button:active {
+ background-color: #ec3169;
+ border-color: #ec3169;
+ box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
+}
diff --git a/test.js b/test.js
new file mode 100644
index 0000000..52ff7bb
--- /dev/null
+++ b/test.js
@@ -0,0 +1,4 @@
+const min= (a, b) => a < b ? a : b
+
+console.log(min(3, 5))
+console.log(min(5, 3))
\ No newline at end of file