Assignments
# Assignment 01
>v-bind, v-html, data, methods, mount
```html
<section id="assignment">
<!-- 1) Output your name -->
<h2>{{name}}</h2>
<!-- 2) Output your age -->
<p>{{age}}</p>
<!-- 3) Output your age + 5 -->
<p>{{age + 5}}, {{agePlus5()}}</p>
<!-- 4) Output a random number (0 to 1) -->
<p>Favorite Number: {{getRandomNumber()}}</p>
<div>
<!-- 5) Display some image you found via Google -->
<img v-bind:src="imgUrl" />
</div>
<!-- 6) Prepopulate the input field with your name via the "value" attribute -->
<input type="text" v-bind:value="name" />
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="app.js"></script>
</section>
```
```javascript
const app = Vue.createApp({
data() {
return {
name: 'Dylan',
age: 18,
imgUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png'
}
},
methods: {
getRandomNumber() {
return Math.random()
},
agePlus5(){
return this.age + 5
}
},
});
app.mount('#assignment');
```
# Assignment 02
>v-on:click, v-on:keyup.enter, v-once
```html
<section id="assignment">
<h2>Event Practice</h2>
<!-- 1) Show an alert (any text of your choice) when the button is pressed -->
<button v-on: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" v-on:keydown="showInputContent1"/>
<p>{{output1}}</p>
<hr />
<!-- 3) Repeat 2) but only output the entered value if the ENTER key was pressed -->
<input type="text" v-on:keyup.enter="showInputContent2"/>
<p>{{output2}}</p>
</section>
```
```javascript
const app = Vue.createApp({
data() {
return {
output1: '',
output2: ''
}
},
methods: {
showAlert(){
alert("hello!")
},
showInputContent1(event){
this.output1 = event.target.value
},
showInputContent2(event){
this.output2 = event.target.value
}
},
})
app.mount('#assignment')
```
# Assignment 03
> watch, computed
```html
<section id="assignment">
<button @click="addNumber(5)">Add 5</button>
<button @click="addNumber(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> {{number}}
<!-- 2) Watch for changes in "result" and reset the value to 0 after 5 seconds -->
</section>
```
```javascript
const app = Vue.createApp({
data() {
return {
number: 0
}
},
watch: {
result() {
const that = this;
console.log("watch")
setTimeout(function(){
that.number = 0
}, 5000)
}
},
computed: {
result() {
console.log("computed")
if (this.number < 37) {
return "Not there yet"
} else if (this.number == 37) {
return "Yes"
} else {
return "Too much"
}
}
},
methods: {
addNumber(num) {
this.number += num
}
},
})
app.mount('#assignment')
```
# Assignment 04
> :style, :class
```html
<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="className" />
<!-- (available classes: "user1", "user2") -->
<p :class="pClass">
Style me!
</p>
<button @click="changeVisibility">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 -->
<br><br>
<!-- 3) Add dynamic inline styling to the below paragraph and let the user enter a background-color -->
<input type="text" v-model="bgc"/>
{{bgc}}
<p :style="{backgroundColor:bgc}">Style me inline!</p>
</section>
```
```javascript
const app = Vue.createApp({
data() {
return {
className: '',
visibility: false,
bgc: ''
}
},
computed: {
pClass() {
return {
user1: this.className === 'user1',
user2: this.className === 'user2',
visible: !this.visibility,
hidden: this.visibility,
}
}
},
methods: {
changeVisibility() {
this.visibility = !this.visibility
}
},
});
app.mount('#assignment')
```
# Assignment 05
> v-if, v-for
```html
<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="inputTask">
<button @click="addTask" >Add Task</button>
<ul v-if="itemsVisibility">
<li v-for="item in items" :key="item">{{item}}</li>
<!-- 2) Output the list of tasks here -->
</ul>
<!-- 3) When the below button is pressed, the list should be shown or hidden -->
<!-- BONUS: Also update the button caption -->
<button v-if="items.length != 0" @click="changeItemsVisibility">{{buttonCaption}}</button>
</section>
```
```javascript
const app = Vue.createApp({
data() {
return {
items: [],
inputTask: '',
itemsVisibility: true,
buttonCaptions: ['Hide', 'Show List']
}
},
computed: {
itemsShow(){
return {}
},
buttonCaption(){
return this.itemsVisibility === true?this.buttonCaptions[0]:this.buttonCaptions[1]
}
},
methods: {
addTask(){
this.items.push(this.inputTask);
this.inputTask = ''
},
changeItemsVisibility(){
this.itemsVisibility = !this.itemsVisibility
}
},
})
app.mount('#assignment')
```