gauchmarc
/
software-development-2022
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

stuff

main
Marc Gauch 2022-11-17 15:48:17 +01:00
commit d5b9c54ea1
27 changed files with 900 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md Normal file
View File

@ -0,0 +1 @@
# Software Developent

18
ToDoList/app.js Normal file
View File

@ -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");

44
ToDoList/index.html Normal file
View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example 1 Week 5</title>
<link
rel="stylesheet"
href="https://unpkg.com/mustard-ui@latest/dist/css/mustard-ui.min.css"
/>
<script src="https://unpkg.com/vue@latest" defer></script>
<script src="app.js" defer></script>
<style>
.active {
background-color: aqua;
}
</style>
</head>
<body>
<section id="comp" class="section-secondary">
<h1>ToDo List</h1>
<div class="form-control">
<label>Enter new Item</label>
<input type="text" placeholder="Fill me up" v-model="newItem" />
</div>
<button
:class="[!!newItem ? 'button-primary':'button-primary-outlined']"
@click="addItem"
>
Add
</button>
<ul>
<li v-for="(item, index) of items" :key="index">
{{ item }}&nbsp;<button
class="button-danger button-small"
@click="removeItem(index)"
>
X
</button>
</li>
</ul>
</section>
</body>
</html>

BIN
assignment5-1/.DS_Store vendored Normal file
View File

Binary file not shown.

20
assignment5-1/app.js Normal file
View File

@ -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");

33
assignment5-1/index.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Basics</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="assignment">
<!-- 1) Output your name -->
<h2>{{myName}}</h2>
<!-- 2) Output your age -->
<p>{{myAge}}</p>
<!-- 3) Output your age + 5 -->
<p>{{ agePlusFive() }}</p>
<!-- 4) Output a random number (0 to 1) -->
<p>{{ randomNumber() }}</p>
<div>
<!-- 5) Display some image you found via Google -->
<img :src="anImageUrl" height="300" />
</div>
<!-- 6) Prepopulate the input field with your name via the "value" attribute -->
<input type="text" v-model="myInput" />
</section>
</body>
</html>

63
assignment5-1/styles.css Normal file
View File

@ -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);
}

17
assignment5-2/app.js Normal file
View File

@ -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;
},
},
});

33
assignment5-2/index.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Basics</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>
<header>
<h1>Events</h1>
</header>
<section id="assignment">
<h2>Event Practice</h2>
<!-- 1) Show an alert (any text of your choice) when the button is pressed -->
<button @click="showAlert">Show Alert</button>
<hr />
<!-- 2) Register the user input on "keydown" and output it in the paragraph (hint: event.target.value helps) -->
<input type="text" @keydown="update2" />
<p>{{paragraph2}}</p>
<hr />
<!-- 3) Repeat 2) but only output the entered value if the ENTER key was pressed -->
<input type="text" @keydown.enter="update3" />
<p>{{paragraph3}}</p>
</section>
</body>
</html>

73
assignment5-2/styles.css Normal file
View File

@ -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);
}

0
assignment5-2/test.js Normal file
View File

28
assignment5-3/app.js Normal file
View File

@ -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");

30
assignment5-3/index.html Normal file
View File

@ -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>Vue Basics</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>
<header>
<h1>Reactivity in Action</h1>
</header>
<section id="assignment">
<button @click="add(5)">Add 5</button>
<button @click="add(1)">Add 1</button>
<!-- 1) Connect the buttons and calculate a value (a number) -->
<!-- Show "Not there yet" until you reach a result of exactly 37 -->
<!-- Show "Too much!" if the result is greater than 37 -->
<p>Result: {{result}}</p>
<p>{{sum}}</p>
<!-- 2) Watch for changes in "result" and reset the value to 0 after 5 seconds -->
</section>
</body>
</html>

73
assignment5-3/styles.css Normal file
View File

@ -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);
}

9
assignment5-4/app.js Normal file
View File

@ -0,0 +1,9 @@
const app = Vue.createApp({
data: () => ({
class1: "",
visible: true,
color: "",
}),
});
app.mount("#assignment");

34
assignment5-4/index.html Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Basics</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>
<header>
<h1>Vue Styling</h1>
</header>
<section id="assignment">
<!-- 1) Fetch the user input and use it as a CSS class -->
<!-- The entered class should be added to the below paragraph -->
<input type="text" v-model="class1" />
<!-- (available classes: "user1", "user2") -->
<p :class="[class1, visible ? 'visible' : 'hidden']">Style me!</p>
<button @click="visible = !visible">Toggle Paragraph</button>
<!-- 2) Use the "visible" and "hidden" classes to show/ hide the above paragraph -->
<!-- Clicking the button should toggle between the two options -->
<!-- 3) Add dynamic inline styling to the below paragraph and let the user enter a background-color -->
<input type="text" v-model="color" />
<p :style="`background-color: ${color}`">Style me inline!</p>
</section>
</body>
</html>

91
assignment5-4/styles.css Normal file
View File

@ -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;
}

18
assignment5-5/app.js Normal file
View File

@ -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");

35
assignment5-5/index.html Normal file
View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Basics</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>
<header>
<h1>Vue Lists and Conditional Content</h1>
</header>
<section id="assignment">
<h2>Assignment</h2>
<!-- 1) Add code to manage a list of tasks in a Vue app -->
<!-- When clicking "Add Task" a new task with the entered text should be added -->
<input type="text" v-model="newTask" />
<button @click="addTask">Add Task</button>
<ul v-if="showList">
<!-- 2) Output the list of tasks here -->
<li v-for="task in tasks">{{task}}</li>
</ul>
<!-- 3) When the below button is pressed, the list should be shown or hidden -->
<!-- BONUS: Also update the button caption -->
<button v-if="showList" @click="showList=false">Hide List</button>
<button v-else @click="showList=true">Show List</button>
</section>
</body>
</html>

80
assignment5-5/styles.css Normal file
View File

@ -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);
}

15
basic-vue-project/app.js Normal file
View File

@ -0,0 +1,15 @@
Vue.createApp({
data() {
return {
goals: [],
enteredValue: ``
};
},
methods: {
addGoal() {
this.goals.push(this.enteredValue);
this.enteredValue = ``;
}
}
}).mount(`#app`);

23
basic-vue-project/index.html Normal file
View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>A First App</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="app">
<div>
<label for="goal">Goal</label>
<input type="text" id="goal" v-model="enteredValue"/>
<button v-on:click="addGoal">Add Goal</button>
</div>
<ul>
<li v-for="goal in goals">{{ goal }}</li>
</ul>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script src="app.js"></script>
</body>
</html>

40
basic-vue-project/styles.css Normal file
View File

@ -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;
}

21
friendslist/app.js Normal file
View File

@ -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");

34
friendslist/index.html Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Basics</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>
<header>
<h1>FriendList</h1>
</header>
<section id="app">
<ul>
<li v-for="friend in friends" :key="friend.name">
<h2>{{friend.name}}</h2>
<button @click="friend.showDetails = !friend.showDetails">
Show Details
</button>
<ul v-if="friend.showDetails">
<li><strong>Phone:</strong> {{friend.phone}}</li>
<li><strong>Email:</strong> {{friend.email}}</li>
</ul>
</li>
</ul>
</section>
</body>
</html>

63
friendslist/styles.css Normal file
View File

@ -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);
}

4
test.js Normal file
View File

@ -0,0 +1,4 @@
const min= (a, b) => a < b ? a : b
console.log(min(3, 5))
console.log(min(5, 3))