Random Words Generator
HTML
<button>Generate</button>
<h1></h1>
CSS
@import url(http://fonts.googleapis.com/css?family=Oswald:300,400);
html, body {
height: 100%;
}
body {
margin: 0;
border: 10px solid coral;
background: linear-gradient(#444, #333);
box-sizing: border-box;
overflow: hidden;
}
button {
margin: 10px;
padding: 8px 12px;
background: coral;
color: white;
border: 0;
border-radius: 0;
font-size: 14px;
cursor: pointer;
outline: 0;
text-shadow: 1px 1px 2px rgba(0,0,0,.3);
transition: all .2s;
}
button:hover {
background: tomato;
}
h1 {
position: absolute;
top: 50%;
left: 0;
right: 0;
line-height: 80px;
margin-top: -40px;
text-align: center;
font-family: 'Oswald', sans-serif;
font-size: 50px;
font-weight: 300;
color: #fafafa;
text-shadow: 3px 3px 2px rgba(0,0,0,.3);
white-space: nowrap;
}
h1 a {
color: #fafafa;
text-decoration: none;
}
h1 a:hover {
text-decoration: underline;
}
h1 small {
font-size: 35px;
}
JavaScript
var api = 'http://api.wordnik.com/v4/words.json/randomWord';
var key = 'a2a73e7b926c924fad7001ca3111acd55af2ffabf50eb4ae5';
var corpus = 100; // higher = less complex words
var def = true; // only words with definitions ?
function getWord(type, c) {
return $.get(
api +
'?includePartOfSpeech=' + type +
'&hasDictionaryDef=' + def +
'&minCorpusCount=' + corpus +
'&api_key=' + key
);
}
function link(res) {
var w = res[0].word;
var upper = w.charAt(0).toUpperCase() + w.slice(1);
return '<a target = "_blank" href="https://www.wordnik.com/words/'
+ w.toLowerCase() + '">' + upper + '</a>';
}
function generate() {
$.when(getWord('noun'), getWord('adjective'), getWord('noun'))
.then(function(a, b, c) {
var sentence =
link(a) + ' <small>of the</small> ' +
link(b) + ' ' + link(c);
$('h1').html(sentence);
})
.fail(function() { alert('ERROR'); });
}
generate();
$('button').click(generate);