Skip to content

Instantly share code, notes, and snippets.

@rob0t7

rob0t7/app.js

Created February 10, 2016 16:08
Show Gist options
  • Save rob0t7/a7f4b16be5cb243dd1f3 to your computer and use it in GitHub Desktop.
Save rob0t7/a7f4b16be5cb243dd1f3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
app.js
var API_KEY = "MDphMmIxNDY0Mi0zYjYwLTExZTUtYTRlOS1hZjBkOWE1YzRmYzI6WWRZR1h6Q0ZwQk9JNG00YTJMcHBsOFNxcUxjeklpTmVEWGlz";
var beerTemplate = _.template($('#beer-template').html());
function getBeerList(name) {
$.ajax({
url: 'https://lcboapi.com/products',
data: {q: name},
method: 'GET',
headers: { 'Authorization': "TOKEN " + API_KEY }
}).then(function(data) {
// Parse result into the webpage
for(var i = 0; i < data.result.length; i++) {
var beer = data.result[i];
var output = beerTemplate({
name: beer.name,
abv: beer.alcohol_content / 100.0,
style: beer.secondary_category,
description: beer.description,
image: beer.image_thumb_url,
price: beer.price_in_cents / 100.0
});
$('#beer-table-results tbody').append(output);
}
});
}
$(document).ready(function() {
// Form subsmission event
$('#searchInput').on('keyup', _.debounce(function(event) {
var input = $(event.target).val();
if (input.length < 3) return;
$('#beer-table-results tbody').html('');
getBeerList(input);
}, 1000));
// Get results
});
$(function() {
$('#testForm').on('submit', function(event) {
var valid = true;
event.preventDefault();
$('.form-group').removeClass('has-error');
$('.form-group .help-block').remove();
var inputs = $(event.target).find('input');
for(var i = 0; i < inputs.length; i++) {
var input = $(inputs[i]);
if (input.val() !== 'bob') {
valid = false;
input.parent().append('<span class="help-block">This has to be bob</span>');
input.parent().addClass('has-error');
}
};
if(valid) {
event.target.submit();
}
});
});
var validationFunctions = {
'required': function(input) {
// do stuff...
},
'email': function(input) {
// do stuff..
}
};
validateFunctions['required']('my input value')
validateFunctions.required('my input value')
Raw
index.hml
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Your page title here :)</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<!-- <link rel="stylesheet" href="css/normalize.css"> -->
<!-- <link rel="stylesheet" href="css/skeleton.css"> -->
<!-- <link rel="stylesheet" href="css/app.css"> -->
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png">
</head>
<body>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container">
<h1>Validation Example</h1>
<form id="testForm">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" data-validate="required">
</div>
<button type="submit">Save</button>
</form>
</div>
<div class="container">
<h1>LCBO Beer Tracker</h1>
<div class="row">
<div id="searchForm" class="col-xs-6 col-xs-offset-3">
<div class="form-group">
<input id="searchInput" type="text" placeholder="Search..." class="form-control">
</div>
</div>
</div>
<div id="result-container">
<table class="table" id="beer-table-results">
<thead>
<tr>
<th>Name</th>
<th>ABV</th>
<th>Style</th>
<th>Price</th>
<th>Description</th>
<th>Image</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<script src="lodash.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- Template for beer results -->
<script type="text/template" id="beer-template">
<tr>
<td><%= name %></td>
<td><%= abv %></td>
<td><%= style %></td>
<td><%= price %></td>
<td><%= description %></td>
<td><img src="<%= image %>"></td>
</tr>
</script>
<!-- <script type="text/template" id="beer-template"> -->
<!-- <section class="beer"> -->
<!-- <h1><%= name %></h1> -->
<!-- <div class="row"> -->
<!-- <div class="one-half column"> -->
<!-- <dl> -->
<!-- <dt>Brewery:</dt> -->
<!-- <dd><%= breweryName %></dd> -->
<!-- <dt>Origin</dt> -->
<!-- <dd><%= origin %></dd> -->
<!-- <dt>Style</dt> -->
<!-- <dd><%= style %></dd> -->
<!-- <dt>Tasting Notes</dt> -->
<!-- <dd><%= tastingNotes %></dd> -->
<!-- </dl> -->
<!-- </div> -->
<!-- <div class="one-half column"> -->
<!-- <img class="brewery-image" src="<%= imageURL %>"> -->
<!-- </div> -->
<!-- </div> -->
<!-- </section> -->
<!-- </script> -->
<script src="app.js"></script>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment