commit d5b9c54ea1ff44737a17df7a6b4d904fd714a1d5
Author: Marc Gauch <34353267+marcgauch@users.noreply.github.com>
Date: Thu Nov 17 15:48:17 2022 +0100
stuff
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 0000000..5008ddf
Binary files /dev/null and b/assignment5-1/.DS_Store differ
diff --git a/assignment5-1/app.js b/assignment5-1/app.js
new file mode 100644
index 0000000..e394f09
--- /dev/null
+++ b/assignment5-1/app.js
@@ -0,0 +1,20 @@
+const app = Vue.createApp({
+ data: () => ({
+ 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() }}
+
+
+
![]()
+
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
+
+
+
+
+
+
+
+
+
+
+
+ -
+
{{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