Skip to content

Instantly share code, notes, and snippets.

@twhite96

twhite96/index.html

Created July 25, 2015 23:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save twhite96/7770426196d3eee1c352 to your computer and use it in GitHub Desktop.
Save twhite96/7770426196d3eee1c352 to your computer and use it in GitHub Desktop.
Download ZIP
qdJoGr
Raw
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<title>The Story Maker</title>
</head>
<body>
<div class="container">
<h1>The Story Maker</h1>
<script src="story.js"></script>
</div>
</body>
</html>
Raw
script.js
var questions = 3;
var questionsLeft = " [" + questions + " questionsLeft]";
var adjective = prompt('Please type an adjective');
questions -= 1;
questionsLeft = " [" + questions + " questions left]";
var verb = prompt('Please type a verb');
questions -= 1;
questionsLeft = " [" + questions + " questions left]";
var noun = prompt('Please type a noun' + questionsLeft);
alert('All done. Ready for the message?');
var sentence = "<h2>There once was a cat named " + noun;
sentence += ". He lived to " + verb;
sentence += ". So food, much " + adjective + ". Wow. </h2>";
document.write(sentence);
Raw
style.css
html,
body,
div,
h1,
h2,
p,
ul,
section {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
ul {
list-style: none;
}
section {
display: block;
}
body {
background: #edeff0;
padding: 50px 0 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 62.5%;
}
h1,
h2 {
font-size: 2.4em;
font-weight: 400;
margin-bottom: 8px;
color: #384047;
line-height: 1.2;
}
p {
color: #8d9aa5;
font-size: 1.4em;
margin-bottom: 15px;
line-height: 1.4;
}
.container {
box-sizing: border-box;
width: 90%;
max-width: 1080px;
background: white;
padding: 30px 15px;
margin: 0 auto;
position: relative;
overflow: hidden;
border-radius: 5px;
-webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
}
.button {
background: #3f8abf;
padding: 8px 18px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.4em;
color: white;
font-weight: 500;
border: 3px solid #3f8abf;
outline: focus;
cursor: pointer;
display: moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 2px 0 0 #3574a0;
-moz-box-shadow: 0 2px 0 0 #3574a0;
box-shadow: 0 2px 0 0 #3574a0;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.button:hover {
background: #397cac;
border-color: #397cac;
-webkit-box-shadow: 0 2px 0 0 #2c6085;
-moz-box-shadow: 0 2px 0 0 #2c6085;
box-shadow: 0 2px 0 0 #2c6085;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment