Skip to content

Commit df832ab

Browse files
awdriggsawdriggs
committed
w8
1 parent 71eae02 commit df832ab

File tree

28 files changed

+748
-0
lines changed

28 files changed

+748
-0
lines changed

‎week8-vue/4-todo/style.css

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
2+
body{
3+
background-color: #ddd;
4+
font-family: 'Muli', sans-serif;
5+
6+
}
7+
8+
.wrapper{
9+
width: 900px;
10+
min-height: 600px;
11+
margin: 0 auto;
12+
background-color: #eee;
13+
padding: 10px;
14+
}
15+
16+
h1{
17+
text-align: center;
18+
border-bottom: 1px solid black;
19+
padding-bottom: 5px;
20+
}
21+
22+
h3{
23+
margin: 0;
24+
}
25+
26+
ul{
27+
margin: 0;
28+
}
29+
30+
li{
31+
32+
}
33+
34+
.current{
35+
color: orange;
36+
37+
background-color: #eee;
38+
}
39+
40+
.done{
41+
text-decoration: line-through;
42+
}
43+

‎week8-vue/4-todo/todo.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<html>
2+
<head>
3+
<title>Hello Vue</title>
4+
<link rel="stylesheet" type="text/css" href="style.css">
5+
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
6+
</head>
7+
<body>
8+
<div id="app" class="wrapper">
9+
10+
<pre>
11+
{{$data}}
12+
</pre>
13+
</div>
14+
<script type="text/javascript" src="todo.js"></script>
15+
</body>
16+
</html>

‎week8-vue/4-todo/todo.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
new Vue({
2+
el: '#app',
3+
data: {
4+
user: "Adam",
5+
todos: [
6+
{text: "Write Paper", done: false},
7+
{text: "Study", done: false},
8+
{text: "Call Mom", done: false},
9+
{text: "Hangout", done: true}
10+
],
11+
},
12+
});

‎week8-vue/5-api/api.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<html>
2+
3+
<head>
4+
<title>5 - API</title>
5+
<link rel="stylesheet" type="text/css" href="style.css">
6+
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
7+
<!-- axios -->
8+
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
9+
</head>
10+
11+
<body>
12+
<div id="app" class='wrapper'>
13+
14+
</div>
15+
<script type="text/javascript" src="api.js"></script>
16+
</body>
17+
18+
</html>

‎week8-vue/5-api/api.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
//storing our vue instance in a var
2+
var vue = new Vue({
3+
el: '#app',
4+
data: {
5+
6+
},
7+
})
8+
9+
//from last week
10+
//var url = 'http://api.giphy.com/v1/gifs/search?q=' + term + '&api_key=dc6zaTOxFJmzC';

‎week8-vue/5-api/style.css

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
html{
2+
font-family: helvetica;
3+
}
4+
body{
5+
background: linear-gradient(#FE6105, #EDD50A);
6+
}
7+
h2{
8+
font-size: 4rem;
9+
text-align: center;
10+
color: #eee;
11+
}
12+
13+
.wrapper{
14+
max-width: 800px;
15+
margin:0 auto;
16+
text-align: center;
17+
}
18+
19+
20+

‎week8-vue/completed-examples/1-helloVue/hello.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<html>
2+
<head>
3+
<title>Hello Vue</title>
4+
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
5+
</head>
6+
<body>
7+
<div id="app">
8+
<h1>{{message}}</h1>
9+
<p>{{'adam says ' + message}}</p>
10+
<pre>{{ $data }}</pre>
11+
12+
</div>
13+
<script type="text/javascript" src="hello.js"></script>
14+
</body>
15+
</html>

‎week8-vue/completed-examples/1-helloVue/hello.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
new Vue({
2+
el: '#app',
3+
data: {
4+
message: 'hello from vue'
5+
}
6+
});

‎week8-vue/completed-examples/2-binding/binding.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<html>
2+
<head>
3+
<title>Vue Binding</title>
4+
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
5+
</head>
6+
<body>
7+
<div id="app">
8+
<h1>{{message}}</h1>
9+
<input v-model="message">
10+
<pre>{{ $data }}</pre>
11+
</div>
12+
<script type="text/javascript" src="binding.js"></script>
13+
</body>
14+
</html>

‎week8-vue/completed-examples/2-binding/binding.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
new Vue({
2+
el: '#app',
3+
data: {
4+
message: 'hello from vue'
5+
}
6+
});

‎week8-vue/completed-examples/3-if+conditionals/if.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<html>
2+
<head>
3+
<title>Vue if</title>
4+
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
5+
</head>
6+
<body>
7+
<div id="app">
8+
<button v-on:click="toggle">{{display? "hide":"show"}}</button>
9+
<h1 v-if="display">{{message}}</h1>
10+
<pre>{{ $data }}</pre>
11+
</div>
12+
<script type="text/javascript" src="if.js"></script>
13+
</body>
14+
</html>

‎week8-vue/completed-examples/3-if+conditionals/if.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
new Vue({
2+
el: '#app',
3+
data: {
4+
display: true,
5+
message: "hello from vue"
6+
},
7+
methods: {
8+
toggle: function(){
9+
this.display = !this.display;
10+
}
11+
}
12+
});

‎week8-vue/completed-examples/4-todo/style.css

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
2+
body{
3+
background-color: #ddd;
4+
font-family: 'Muli', sans-serif;
5+
6+
}
7+
8+
.wrapper{
9+
width: 900px;
10+
min-height: 600px;
11+
margin: 0 auto;
12+
background-color: #eee;
13+
padding: 10px;
14+
}
15+
16+
h1{
17+
text-align: center;
18+
border-bottom: 1px solid black;
19+
padding-bottom: 5px;
20+
}
21+
22+
h3{
23+
margin: 0;
24+
}
25+
26+
ul{
27+
margin: 0;
28+
}
29+
30+
li{
31+
32+
}
33+
34+
.current{
35+
color: orange;
36+
37+
background-color: #eee;
38+
}
39+
40+
.done{
41+
text-decoration: line-through;
42+
}
43+

‎week8-vue/completed-examples/4-todo/todo.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<html>
2+
<head>
3+
<title>Vue ToDo</title>
4+
<link rel="stylesheet" type="text/css" href="style.css">
5+
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
6+
</head>
7+
<body>
8+
<div id="app" class="wrapper">
9+
<h1>{{user}}'s Todo List</h1>
10+
<input type="text" v-model="newTodo">
11+
<button v-on:click="add" v-if="newTodo">add</button>
12+
13+
<ol>
14+
<li v-for="todo in todos" v-on:click="toggle($event, todo)" v-bind:class="{ 'done': todo.done}">{{todo.text}}</li>
15+
</ol>
16+
17+
<pre>
18+
{{$data}}
19+
</pre>
20+
</div>
21+
<script type="text/javascript" src="todo.js"></script>
22+
</body>
23+
</html>

‎week8-vue/completed-examples/4-todo/todo.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
new Vue({
2+
el: '#app',
3+
data: {
4+
user: "Adam",
5+
todos: [
6+
{text: "Write Paper", done: false},
7+
{text: "Study", done: false},
8+
{text: "Call Mom", done: false},
9+
{text: "Hangout", done: true}
10+
],
11+
newTodo: ""
12+
},
13+
methods: {
14+
toggle: function(e, todo){
15+
todo.done = !todo.done
16+
},
17+
add: function(){
18+
this.todos.push({text: this.newTodo, done: false});
19+
this.newTodo = ""
20+
}
21+
}
22+
});

‎week8-vue/completed-examples/5-api/api.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<html>
2+
3+
<head>
4+
<title>5 - API</title>
5+
<link rel="stylesheet" type="text/css" href="style.css">
6+
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
7+
<!-- axios -->
8+
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
9+
</head>
10+
11+
<body>
12+
<div id="app" class='wrapper'>
13+
<header>
14+
<input type="text" v-model="lookup">
15+
<button v-if="lookup" v-on:click="get">go</button>
16+
</header>
17+
18+
<img v-for="gif in gifs" v-bind:src="gif.images.fixed_height.url">
19+
</div>
20+
<script type="text/javascript" src="api.js"></script>
21+
</body>
22+
23+
</html>

‎week8-vue/completed-examples/5-api/api.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
//storing our vue instance in a var
2+
var vue = new Vue({
3+
el: '#app',
4+
data: {
5+
lookup: "",
6+
gifs: []
7+
},
8+
methods: {
9+
get: function(){
10+
var url = 'http://api.giphy.com/v1/gifs/search?q=' + this.lookup+ '&api_key=dc6zaTOxFJmzC';
11+
axios.get(url).then(function (response){
12+
vue.gifs = response.data.data
13+
//why not this???
14+
})
15+
}
16+
}
17+
})

‎week8-vue/completed-examples/5-api/style.css

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
html{
2+
font-family: helvetica;
3+
}
4+
body{
5+
background: linear-gradient(#FE6105, #EDD50A);
6+
}
7+
h2{
8+
font-size: 4rem;
9+
text-align: center;
10+
color: #eee;
11+
}
12+
13+
.wrapper{
14+
max-width: 800px;
15+
margin:0 auto;
16+
text-align: center;
17+
}
18+
19+
20+

0 commit comments

Comments
 (0)