A random quote generator. In this app I used Jade, Sass, and CoffeeScript, and jQuery.
A Pen by Adam Recvlohe on CodePen.
A random quote generator. In this app I used Jade, Sass, and CoffeeScript, and jQuery.
A Pen by Adam Recvlohe on CodePen.
.container | |
h1 Famous Quotes | |
p This is a famous quote generator. Click the button below to generate a new famous quote. | |
div#btn New Quote | |
p#quote | |
a.fa.fa-twitter.fa-4x#tweet | |
$(document).ready -> | |
quote = -> | |
url = 'https://andruxnet-random-famous-quotes.p.mashape.com/cat=famous' | |
API_KEY = 'NvBtBmdtSImshF8Ul6PZVcHM8rPtp1HIevIjsnu6b1nua1d11M' | |
$.ajax | |
url: url | |
type: 'PUT' | |
dataType: 'json' | |
beforeSend: (xhr) -> | |
xhr.setRequestHeader 'X-Mashape-Authorization', API_KEY | |
return | |
success: (data) -> | |
document.getElementById('quote').innerHTML = data.quote + '<em id="author"> ' + data.author + '</em>' | |
twitterLink = document.getElementById('tweet') | |
twitterLink.href = 'https://twitter.com/intent/tweet?text=' + '"' + data.quote + '"' + ' --' + data.author | |
twitterLink.target = '_blank' | |
return | |
return | |
quote() | |
document.getElementById('btn').onclick = -> | |
quote() | |
return | |
return | |
# --- | |
# generated by js2coffee 2.1.0 |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
$red: rgb(215,66,60) | |
$white: #f2f2f2 | |
$twitter: rgb(64,153,255) | |
body | |
font-family: Open Sans | |
height: 100vh | |
background-image: url('https://unsplash.com/photos/shy0cEi7h1o/download') | |
background-size: cover | |
background-position: center center | |
background-repeat: no-repeat | |
padding: 2.5em | |
.container | |
width: 60% | |
margin: 0 auto | |
text-align: center | |
background-color: white | |
padding: 2em 0em | |
border-radius: 1.5em | |
background-color: rgba(0,0,0,.5) | |
box-sizing: border-box | |
h1 | |
font: | |
size: 3em | |
weight: 700 | |
margin: 0em 0em | |
border-bottom: 2px solid $white | |
display: inline | |
color: $white | |
p | |
width: 60% | |
margin: 1.5em auto | |
font-size: 1.5em | |
color: $white | |
@media (max-width: 600px) | |
width: 90% | |
#btn | |
font: | |
size: 1.5em | |
weight: 700 | |
border: 4px solid $white | |
color: $white | |
display: inline-block | |
padding: 0.5em 1.5em | |
transition: all ease-in-out .5s | |
text-transform: uppercase | |
border-radius: 2.5em | |
&:hover | |
cursor: pointer | |
color: $white | |
background-color: $red | |
border: 4px solid $red | |
#quote | |
width: 70% | |
margin: 0 auto | |
padding: 1em 2em | |
font-size: 2em | |
border-radius: 1.5em | |
#author | |
display: block | |
font-size: 0.9em | |
margin: 0.5em 0 | |
&:before, | |
&:after | |
content: ' -- ' | |
#tweet | |
color: white | |
transition: color ease-in-out 0.3s | |
text-decoration: none | |
&:hover | |
cursor: pointer | |
color: $twitter | |
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /> |