Randall Degges rdegges

## styles.css
// /static/css/style.css

h1 {
  text-align: center;
}

td img {
  width: 25px;
}

## index.html
<div id="app">
  <table class="table table-hover">
    <thead>
      <tr>
        <td>Rank</td>
        <td>Name</td>
        <td>Symbol</td>
        <td>Price (USD)</td>
        <td>1H</td>
        <td>1D</td>

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CryptoCompare</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://bootswatch.com/simplex/bootstrap.min.css">

## method-example-vue.html
<html>
  <body>
    <div id="app">
      <p>What's your favorite color?</p>
      <input v-model="color" type="text">
      <p>Your favorite color is... {{ color }}</p>
      <input type="button" v-on:click="capitalizeColor" value="Capitalize">
    </div>

    <script src="https://unpkg.com/vue"></script>

## two-way-vue.html
<html>
  <body>
    <div id="app">
      <p>What's your favorite color?</p>
      <input v-model="color" type="text">
      <p>Your favorite color is... {{ color }}</p>
    </div>

    <script src="https://unpkg.com/vue"></script>
    <script>

## shopping-list-vue.html
<html>
  <body>
    <div id="app">
      <p>Shopping list</p>
      <ol>
        <li v-for="item in shoppingList">{{ item }}</li>
      </ol>
    </div>

    <script src="https://unpkg.com/vue"></script>

## secret-message.html
<html>
  <body>
    <div id="app">
      <h1>{{ message }}</h1>
      <p v-if="secretMessage">This is a secret HTML element.</p>
      <p v-else>Welcome to the website.</p>
    </div>

    <script src="https://unpkg.com/vue"></script>
    <script>

## modify-vue-variable.js
app.message = "yo";

## hello-world-vue.js
<html>
  <body>
    <div id="app">
      <h1>{{ message }}</h1>
    </div>

    <script src="https://unpkg.com/vue"></script>
    <script>
      let app = new Vue({
        el: "#app",

## basic-vue.html
<html>
  <body>
    <!-- All that Vue cares about is what is inside this div. -->
    <div id="app">
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script>
      let app = new Vue({
        el: "#app"
      });
	// /static/css/style.css

	h1 {
	text-align: center;
	}

	td img {
	width: 25px;
	}
	<div id="app">
	<table class="table table-hover">
	<thead>
	<tr>
	<td>Rank</td>
	<td>Name</td>
	<td>Symbol</td>
	<td>Price (USD)</td>
	<td>1H</td>
	<td>1D</td>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>CryptoCompare</title>

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link rel="stylesheet" href="https://bootswatch.com/simplex/bootstrap.min.css">
	<html>
	<body>
	<div id="app">
	<p>What's your favorite color?</p>
	<input v-model="color" type="text">
	<p>Your favorite color is... {{ color }}</p>
	<input type="button" v-on:click="capitalizeColor" value="Capitalize">
	</div>

	<script src="https://unpkg.com/vue"></script>
	<html>
	<body>
	<!-- All that Vue cares about is what is inside this div. -->
	<div id="app">
	</div>
	<script src="https://unpkg.com/vue"></script>
	<script>
	let app = new Vue({
	el: "#app"
	});