<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" v-cloak>
<h2>My Class</h2>
<div>Sum of all ages: {{myClassList.totalAges}}</div>
<div class="bigSpace">
My Best Friends :
<li v-for="friend in myClassList.myBFFs">{{friend}}</li>
</div>
<div class="bigSpace">
All class members:
<span>{{myClassList.names}}</span>
</div>
</div>
<div id="todoApp">
<h2>Todo App</h2>
<div v-bind:title="message" v-if="canSee">{{message}}</div>
<button v-on:click="sayHello">{{canSee ? "Hide Me" : "Show Me" }} </button>
<h3>Messages</h3>
<todo-item v-for="message in messages" v-bind:todo="message"></todo-item>
<form v-on:submit.prevent="onSubmit">
<button type="submit">Submit</button>
</form>
<div>
<span>My computed message : {{myMessage}}</span>
<input v-model="other_message">
</div>
</div>
<script src="script.js"></script>
<script src="todoapp.js"></script>
</body>
</html>
// Code goes here
let peopleInMyClass = [
{name: 'Jake', hobby: 'Baseball', age: 12},
{name: 'James', hobby: 'Software Development', age:13},
{name: 'Lisa', hobby: 'Welding', age: 11},
{name: 'Louis', hobby: 'Cooking', age: 12},
{name: 'Kathryn', hobby: 'Sowing', age: 12},
{name: 'Bryan', hobby: 'Playing with Putty', age: 13},
]
let myFavouriteThing = "Putty"
let friendsModule;
(function (friendsModule) {
/**
* Sum an array of ages
* returns a single number
*/
friendsModule.sumAges = function(people){
if(!people) throw new Error("No people!")
return people.reduce( (carry, person, index, array) => carry + person.age, 0 )
}
/**
* Takes a list of people
* returns a comma seperated list of their first names
*/
friendsModule.listNames = function(people) {
if(!people) throw new Error("No people!")
return people.map( (person) => `First Name : ${person.name}` )
.join(", ")
}
/**
* Takes a list of people objects
* returns an array of strings listing my best friends
* filtered by our similar hobbys
*/
friendsModule.myBestFriends = function(people, faveThing) {
if(!people) throw new Error("No people!")
return people.filter( (person) => person.age > 12 )
.reduce( (carry, person, index, array) => {
if(person.hobby.indexOf(faveThing) > -1){
carry.push(`${person.name} is my favourite because they also like ${faveThing}!`)
}
return carry;
}, [])
}
/**
* Build a classroom from a list of people objects
*
*/
friendsModule.listMyClass = function(people, options) {
if(!people) throw new Error("No people!")
return {
totalAges: this.sumAges(people),
names: this.listNames(people),
myBFFs: this.myBestFriends(people, myFavouriteThing)
}
}
return friendsModule
})(friendsModule || (friendsModule = {}));
new Vue({
el: '#app',
data: {
messages : [],
myClassList: {}
},
created : function() {
this.messages.push("App has been bootstrapped")
},
mounted : function() {
this.messages.push("App has been mounted")
let myClass = friendsModule.listMyClass(peopleInMyClass)
console.log(myClass)
this.myClassList = myClass
},
computed : {
},
methods: {
}
})
/* Styles go here */
.bigSpace {
margin: 8px;
}
#app {
margin-bottom: 124px;
}
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{todo}}</li>'
})
new Vue({
el: '#todoApp',
data: {
message: 'Hello Vue.js!',
other_message : '',
messages : [],
canSee : false
},
created : function() {
this.messages.push("App has been bootstrapped")
},
mounted : function() {
this.messages.push("App has been mounted")
},
computed : {
myMessage () {
return "Some great message " + this.message + ' ' + this.other_message
}
},
methods: {
sayHello () {
this.canSee = !this.canSee
},
onSubmit () {
this.messages.push("Prevented default submit")
}
}
})
let peopleInMyClass = [
{name: 'Jake', hobby: 'Baseball', age: 12},
{name: 'James', hobby: 'Software Development', age:13},
{name: 'Lisa', hobby: 'Welding', age: 11},
{name: 'Louis', hobby: 'Cooking', age: 12},
{name: 'Kathryn', hobby: 'Sowing', age: 12},
{name: 'Bryan', hobby: 'Playing with Putty', age: 13},
]
let myFavouriteThing = "Putty"
function makeAClass () {
var sumOfAges = 0
var listOfNames = ''
var myBestFriends = ''
//Add up all the ages
for(var i = 0; i < peopleInMyClass.length - 1; i++) {
var person = peopleInMyClass[i]
if(person.age){
sumOfAges += person.age
}
}
//Make a long string of names
peopleInMyClass.forEach(function(person) {
listOfNames += 'First Name: ' + person.name
})
//Find my best friend
peopleInMyClass.forEach(function(person) {
if(person.age > 12 && person.indexOf(myFavouriteThing) > -1){
myBestFriends.push(person.name + " is my favourite because they also like " + faveThing)
}
})
var data = {
myBestFriends: myBestFriends,
listOfNames: listOfNames,
sumOfAges: sumOfAges
}
return data
}