Skip to content

Instantly share code, notes, and snippets.

@pyk

pyk/wisdom.html

Last active August 29, 2015 14:14
Show Gist options
  • Save pyk/ebe0c586076c497de411 to your computer and use it in GitHub Desktop.
Save pyk/ebe0c586076c497de411 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
wisdom.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, maximum-scale=1, user-scalable=no">
<title>Wisdom - Startup Quote API</title>
<!-- Bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:700,600,400,300' rel='stylesheet' type='text/css'>
<!-- custom style -->
<link href="assets/css/main.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<section id="quote-card">
<div class="black-bg">
<div class="container quote-container">
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<div class="row">
<div class="col-lg-6 col-sm-6 col-xs-6 pull-left">
<p class="author-name"></p>
<p class="company-name"></p>
</div>
<div class="col-lg-3 col-sm-3 col-xs-4 pull-right">
<a href="/" class="quote-permalink hidden">
<img class="startupquote-logo" src="http://static.tumblr.com/a388f480e725b85b7af0c7e24a8f0cd3/edv2u9o/20Pn3fq4w/tumblr_static_dark.png" alt="Startup Quote">
</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-lg-offset-3 quote-txt-container">
<h1 class="quote-content">
</h1>
</div>
</div>
</div>
</div>
<div class="description-box">
</div>
</section>
<section id="description">
<div class="container">
<div class="row">
<div class="col-lg-3 desctiption-txt">
<p class="black">Wisdom is a Startup Quote API.</p>
<p>The idea is to provide an access to famous quotes by people from startup ecosystem that can be reused by developer inside their apps.</p>
<p>Potential apps is like Product Hunt, Beta List and other related startup community.</p>
</div>
<div class="col-lg-2 desctiption-txt">
<p class="black">API</p>
<p><a href="https://github.com/gophergala/wisdom">Documentation</a></p>
</div>
<div class="col-lg-3 desctiption-txt">
<p class="black">Demo</p>
<p>
Refresh this page to see random quote displayed above.
</p>
<p>
See the source code the demo <a href="https://gist.github.com/pyk/ebe0c586076c497de411">here</a>.
</p>
</div>
<div class="col-lg-3 desctiption-txt">
<p class="black">About</p>
<p>This is a project for <a href="http://gophergala.com">Gophergala</a>, a distributed hackathon, and i'm very enjoy to build this in 48 hours.</p>
</div>
</div>
</div>
</section>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
(function(){
var randomendpoint = "https://wisdomapi.herokuapp.com/v1/random?jsonp=?"
$.getJSON(randomendpoint, {})
.done(function(data){
console.log(data)
var authorName = $("p.author-name");
var companyName = $("p.company-name");
var content = $("h1.quote-content");
var permalink = $("a.quote-permalink");
permalink.removeClass("hidden");
authorName.text(data.author.name);
companyName.text(data.author.company);
content.text(data.content);
permalink.attr("href", data.permalink);
});
})()
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment