Skip to content

Instantly share code, notes, and snippets.

@jacksonhenry3

jacksonhenry3/eliza.css

Last active December 19, 2015 03:38
Show Gist options
  • Save jacksonhenry3/5891390 to your computer and use it in GitHub Desktop.
Save jacksonhenry3/5891390 to your computer and use it in GitHub Desktop.
Download ZIP
a birthday present
Raw
eliza.css
body
{
background-color:#E74D3C;
text-align:center;
}
#main
{
font-family: 'Fauna One', serif;
padding:50px;
color:white;
font-size:75px;
position:relative;
top:50px;
margin:0px auto;
background-color:#C0392B;
min-width:500px;
max-width:1000px;
}
.adj , .noun
{
font-family: 'Lily Script One', cursive;
/*border-bottom:3px solid #D94839;*/
transition:all.5s;
cursor:pointer;
}
.adj:hover, .noun:hover
{
text-shadow:0 0 7px white;
}
#instructions
{
font-family: 'Fauna One', serif;
padding:20px;
color:white;
position:relative;
top:150px;
margin:0px auto;
background-color:#C0392B;
}
Raw
eliza.js
adjectives = ['magnanimous','beautiful','forgiving','kind','thoughtful','generous','gorgeous','great','stupendous','mirthful', 'badass']
nouns = ['princess','queen','empress','sovereign', 'monarch', 'regent', 'ruler']
adj1 = document.getElementById('1')
adj1.onclick = new_word1
adj2 = document.getElementById('2')
adj2.onclick = new_word2
noun = document.getElementById('3')
noun.onclick = new_word3
new_word1()
new_word2()
new_word3()
function new_word1()
{
var randomIndex = Math.floor(Math.random() * adjectives.length);
adj1.style.position = 'relative'
adj1.style.top = '-200px'
window.setTimeout(function(){
adj1.innerHTML = adjectives[randomIndex]
adj1.style.top = '0px'}
,100)
}
function new_word2()
{
var randomIndex = Math.floor(Math.random() * adjectives.length);
adj2.style.position = 'relative'
adj2.style.top = '-200px'
window.setTimeout(function(){
adj2.innerHTML = adjectives[randomIndex]
adj2.style.top = '0px'}
,100)
}
function new_word3()
{
var randomIndex = Math.floor(Math.random() * nouns.length);
noun.style.position = 'relative'
noun.style.top = '-200px'
window.setTimeout(function(){
noun.innerHTML = nouns[randomIndex]
noun.style.top = '0px'}
,100)
}
Raw
index.html
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Fauna+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lily+Script+One' rel='stylesheet' type='text/css'>
<link href="eliza.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id = 'main'>
You are a
<span class = 'adj' id = '1'></span> ,
and
<span class = 'adj' id = '2'></span>
fairy
<span class = 'noun' id = '3'></span>.
</div>
<span id ='instructions'>
try clicking on the pretty words
</span>
</body>
<script src = "eliza.js"></script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment