<div class="header">
<div class="container">
<div class="search-container">
<label for="font"><i class="fa fa-search"></i></label>
<input id="font-search" class="font-search" type="text" value="" data-provide="typeahead" title="Search for a Google Font">
<i class="fa fa-refresh random" title="Get a random font"></i>
</div>
</div>
</div>
<div class="container" id="content">
<div class="main">
<h1>Lorem Ipsum</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
<p>Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit quam error vitae eaque vero molestiae eius perferendis aspernatur unde earum eos sit. Perspiciatis eius similique obcaecati quasi quidem odit voluptatem.</p>
<h2>Header Level 2</h2>
<p>Repellat a possimus suscipit pariatur temporibus facilis sint modi fugit voluptate est aspernatur porro hic odit facere dolor veritatis odio nisi. Ipsum?</p>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Perspiciatis eius similique obcaecati quasi quidem odit voluptatem.</li>
</ol>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Mauris placerat eleifend leo.</li>
</ul>
</div>
<aside class="sidebar">
<div id="variants"></div>
<h2>History</h2>
<ul id="visited" class="history"></ul>
</aside>
</div>
<div class="container">
<div class="colophon">
<p>There are currently <span id="count"></span> font families.</p>
<p>Made by <a href="http://katydecorah.com">Katy DeCorah</a> with the <a href="https://www.google.com/fonts">Google Fonts API</a>.</p>
</div>
</div>
var url ="https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyDK4Jz71F7DQCrUhXYaF3xgEXoQGLDk5iE";
var family = "";
runFont(family);
var families = [];
var visited = [];
$.getJSON(url,function(json){
// counts all the families
var countFamilies = json.items.length;
$("#count").text(countFamilies);
// pushes all the font families to an array
$.each(json.items,function(i,type){
families.push(type.family);
});
});
// Bootstrap Typeahead
$('#font-search').typeahead({
source: families,
updater:function (item) {
runFont(item);
$("#font-search").attr("placeholder",item);
}
});
// Gets the font based on family name
function runFont(family) {
$.getJSON(url,function(json){
$.each(json.items,function(i,type){
if (type.family === family) {
var familyPlus = family.replace(/\s/g, '+');
var familyCSS = "https://fonts.googleapis.com/css?family=" + familyPlus + ":" + type.variants + "";
var details = $("#variants");
// Removes previous family and style
$(".style").remove();
$("style").remove();
details.empty();
// Grabs family details
details.append("<div class='detail-title'>Variants</div><ul class='list-variant'></ul>");
$(type.variants).each(function(index, item) {
$(".list-variant").append(
$(document.createElement('li')).text(item)
);
});
details.append("<div class='detail-title'>Subsets</div><ul class='list-subsets'></ul>");
$(type.subsets).each(function(index, item) {
$(".list-subsets").append(
$(document.createElement('li')).text(item)
);
});
details.append("<div class='detail-title horizontal'>Version</div><div class='detail-data'>" + type.version + "</div>");
details.append("<div class='detail-title horizontal'>Last Modified</div><div class='detail-data'>" + type.lastModified + "</div>");
details.append("<div class='detail-title'>HTML</div><div class='detail-data'><pre><code class='language-markup'><link href='"+familyCSS+"' rel='stylesheet' type='text/css'></code></pre></div>");
details.append("<div class='detail-title'>CSS</div><div class='detail-data'><pre><code class='language-css'>font-family: '"+family+"', sans-serif;</code></pre></div>");
details.append("<a href='https://www.google.com/fonts#UsePlace:use/Collection:"+familyPlus+"' class='btn'>View on Google Fonts →</a>");
// Grabs the Google Font
$("head").append("<link href='"+ familyCSS +"' rel='stylesheet' type='text/css' class='style'>");
$("body").css("font-family",family);
// If family has italic or bold, allow it
if(details.text().match('italic')){
$("head").append("<style>.main em { font-style: italic; }");
}
if(details.text().match('700')){
$("head").append("<style>.main strong,h1,h2,h3 { font-weight: 700; }");
}
else if(details.text().match('800')){
$("head").append("<style>.main strong,h1,h2,h3 { font-weight: 800; }");
}
else if(details.text().match('900')){
$("head").append("<style>.main strong,h1,h2,h3 { font-weight: 900; }");
}
// Save visited families
visited.push( family );
var visit="";
$.each(visited, function(i, val) {
visit+= "<li class='link-history' data-family='"+ val +"'>" + val + "</li>";
});
$('#visited').html(visit);
// Creates link to view that font again
$(".link-history").click(function(){
var dat = $(this).attr("data-family");
runFont(dat);
$("#font-search").attr("placeholder",dat);
// remove first instance from array
if ($.inArray(dat, visited) !== -1) {
visited.splice( $.inArray(dat, visited), 1 );
}
});
}
});
});
}
// Gets a random font
function random() {
$.getJSON(url,function(json){
var count = json.items.length,
random = Math.ceil(Math.random() * count);
$.each(json.items,function(i,type){
if(i === random){
var family = type.family;
$("#font-search").attr("placeholder", family);
runFont(family);
}
});
});
}
// Picks a random font on click
$(".random").click(function(){
random();
});
// Runs to fetch random font
random();
