Skip to content

Instantly share code, notes, and snippets.

View mathewsanders's full-sized avatar

Mathew Sanders mathewsanders

121 followers · 18 following
View GitHub Profile
@mathewsanders
mathewsanders / ContestList.vue
Last active March 3, 2016 03:26
ContestList.vue template snippet
<!-- template code -->
<template>
<div>
<ul>
<!-- loop over parties -->
<li class="party" v-for="party in APIresponse.parties">
<h3>{{ party.name }} Party</h3>
<ol>
<!-- loop over contests for a party -->
@mathewsanders
mathewsanders / cafe-grumpy.json
Last active February 20, 2016 18:23
Design in the browser, activity 6: JSON structure for information about a cafe
{
"name": "Cafe Grumpy",
"address": "224 W 20th St, New York, NY 10011",
"hours": "7am — 8pm",
"description": "Hip local coffeehouse chain serving a range of house-roasted brews in a relaxed setting."
}
@mathewsanders
mathewsanders / CafeGridView.vue
Last active February 20, 2016 18:14
Design in the browser, activity 8: create CafeCard.vue
<!-- template code -->
<template>
<nav>
<h1>☕️ Coffee Finder <a >New York</a></h1>
<ul id="sort">
<li><a href="#">Nearby</a></li>
<li><a href="#">Name</a></li>
</ul>
</nav>
@mathewsanders
mathewsanders / StyleGuideView.vue
Last active February 20, 2016 18:11
Design in the browser, activity 12: update StyleGuideView.vue
<section>
<div class="details">
<h1>Cafe Card</h1>
<p>The cafe card shows information about a specific cafe including a description, hours, and the cafe's location.</p>
<!--
v-model directive connects our 'cafe' object to the contents of the text area with what is called
a two-way binding, meaning that changes made in the textarea update the 'cafe' object, and that changes
to the 'cafe' object also update the contents of the textarea.
-->
<textarea v-model="cafe | json"></textarea>
@mathewsanders
mathewsanders / CafeGridView.vue
Last active February 20, 2016 18:04
Design in the browser, activity 9: update CafeGridView.vue
<!-- template code -->
<template>
<nav>
<h1>☕️ Coffee Finder <a >New York</a></h1>
<ul id="sort">
<li><a href="#" @click="setSortOrder('distanceMeters')">Nearby</a></li>
<li><a href="#" @click="setSortOrder('name')">Name</a></li>
</ul>
</nav>
@mathewsanders
mathewsanders / index.html
Created February 20, 2016 18:00
Design in the browser, activity 11: update index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="default.css">
</head>
<body id="app">
<!-- router-view is a component that gets's swapped out for the component that matches the current route in main.js -->
<router-view></router-view>
@mathewsanders
mathewsanders / main.js
Created February 20, 2016 17:59
Design in the browser, activity 11: update main.js
// import Vue framework
import Vue from 'vue'
import Resource from 'vue-resource'
import Router from 'vue-router'
// tell vue to use the packages loaded from vue-resource, and vue-router
Vue.use(Resource)
Vue.use(Router)
// turn on dubugging messages
@mathewsanders
mathewsanders / package.json
Created February 20, 2016 17:57
Design in the browser, activity 10: update package.json
"dependencies": {
"vue": "^1.0.0",
"vue-resource": "^0.7.0"
},
@mathewsanders
mathewsanders / main.js
Created February 20, 2016 17:56
Design in the browser, activity 10: update main.js
// import Vue framework
import Vue from 'vue'
import Resource from 'vue-resource'
// tell vue to use the package loaded from vue-resource
Vue.use(Resource)
// turn on dubugging messages
Vue.config.debug = true
@mathewsanders
mathewsanders / CafeGridView.vue
Created February 20, 2016 17:55
Design in the browser, activity 10: update CafeGridView.vue logic code
<!-- logic code -->
<script>
// you'll need to update your ID based on the book you create on Fieldbook
var bookId = '56c3c166589a1f0300c53acd'
var baseUrl = 'https://api.fieldbook.com/v1/' + bookId
export default {
// make 'cafes' and 'cafeSortOrder' avalaible as data avalaible for this component to use
data: function() {