Nebucatnetzer
/
vuejs_course
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add solution to assignment

This commit is contained in:
Andreas Zweili 2021-01-18 17:16:42 +01:00
parent 0efde6f2f5
commit 7072769214
2 changed files with 50 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
basics-assignment-1-problem/app.js
View File

@ -0,0 +1,27 @@
"use strict";
const app = Vue.createApp({
data() {
return {
person: {
name: "Max Muster",
age: 32,
ageInFiveYears() {
return this.age + 5;
},
},
imageUrl:
"https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Feral_cat_Virginia_crop.jpg/1200px-Feral_cat_Virginia_crop.jpg",
};
},
methods: {
randomNumber() {
return Math.random();
},
ageInFiveYears(age) {
return age + 5;
},
},
});
app.mount("#assignment");

45
basics-assignment-1-problem/index.html
View File

@ -1,33 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<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 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>
</head>
<body>
<section id="assignment">
<!-- 1) Output your name -->
<h2>YOUR NAME</h2>
<!-- 2) Output your age -->
<p>YOUR AGE</p>
<!-- 3) Output your age + 5 -->
<p>YOUR AGE in 5 years</p>
<!-- 4) Output a random number (0 to 1) -->
<p>Favorite Number: RANDOM NUMBER BETWEEN 0 AND 1</p>
<div>
<!-- 5) Display some image you found via Google -->
<img src="SOME IMAGE URL" />
</div>
<!-- 6) Prepopulate the input field with your name via the "value" attribute -->
<input type="text" />
<!-- 1) Output your name -->
<h2>{{ person.name }}</h2>
<!-- 2) Output your age -->
<p>{{ person.age }}</p>
<!-- 3) Output your age + 5 -->
<p>{{ ageInFiveYears(person.age) }}</p>
<!-- 4) Output a random number (0 to 1) -->
<p>Favorite Number: {{ randomNumber() }}</p>
<p>Favorite Number: {{ Math.random() }}</p>
<div>
<!-- 5) Display some image you found via Google -->
<img v-bind:src="imageUrl" />
</div>
<!-- 6) Prepopulate the input field with your name via the "value" attribute -->
<input type="text" v-bind:value="person.name" />
</section>
</body>
</body>
</html>