Refactor. JS time!

This commit is contained in:
2023-03-07 13:29:47 -06:00
parent 11d9ecb079
commit c9bb4ba5c5
621 changed files with 780 additions and 0 deletions

Binary file not shown.

View File

@@ -0,0 +1,119 @@
body { background-color: #000040;
background-image: url(background.gif);
color: #88ffff;
font-family: Verdana, Arial, sans-serif;
}
#container { margin-left: auto;
margin-right: auto;
width:80%;
min-width:700px;
}
#logo {
text-align:center;
margin: 0;
font-family: Geneva, Arial, Helvetica, sans-serif;
padding-top: 30px;
padding-bottom: 20px;
}
#nav {
float: left;
width: 200px;
padding-top: 10px;
text-align:left;
color: #88FFFF;
font-size: 12px;
}
#nav a {text-decoration:none;
margin: 15px;
display: block;
color: #88FFFF;
font-size: 12px;
}
#content {
margin-left: 150px;
padding: 30px;
overflow:auto;
border: medium groove #88FFFF;
line-height: 135%;
}
.floatright {padding-left:20px;
float:right;
}
.floatleft {
float:left;
padding: 30px 0px 20px;
}
#footer { font-size: .60em;
font-style: italic;
text-align: center;
border-top: 2px double #000040;
padding-top: 20px;
padding-bottom: 20px;
}
h2 { text-transform: uppercase;
color: #88ffff;
font-size: 1.2em;
border-bottom: 1px none;
margin-right: 20px;
}
h3 {
color: #88ffff;
font-size: 1em;
border-bottom: 1px solid #000000;
margin-right: auto;
text-align: left;
padding-top: 20px;
padding-right: 150px;
padding-bottom: 20px;
padding-left: 150px;
line-height: 130%;
}
.details { padding-left:20%;
padding-right:20%;
}
img {border:0; }
.content {
margin: 20px;
padding: 20px;
height: 3700px;
width: 500px;
}
a {text-decoration:none;
margin: 15px;
display: block;
color: #88FFFF;
font-size: 12px;
}
a:hover {
color: #000040;
background-color: #88ffff;
}
span {
font-size: 36px;
font-weight: bold;
font-family: "Courier New", Courier, mono;
color: #88ffff;
background-position: center center;
text-align: center;
vertical-align: middle;
}
table {
border-collapse: collapse
}
td {
border: 2px solid #88ffff;
width: 5em;
font-family: "Courier New", Courier, mono;
font-size: 14px;
color: #88ffff;
}

View File

@@ -0,0 +1,49 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Greg's Gambits | Greg's Tales</title>
<link href="greg.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function startGame()
{
var gender = "boy";
var city = " ";
var monster = " ";
var food = " ";
var drink = " ";
numYears = prompt("Enter a number greater than 0: ");
gender = prompt("Is the story about a boy or a girl? ");
letter = gender.charAt(0);
gender = (letter == "b" || letter == "B")?"boy":"girl";
pronoun = (gender == "boy")?"he":"she";
name = prompt("Enter the hero's name: ");
city = prompt("Enter the name of a city: ");
monster = prompt("Enter a type of monster: ");
food = prompt("Enter a food you like: ");
drink = prompt("Enter a drink you like: ");
document.getElementById("content").innerHTML =("Once upon a time, about " + numYears + " years ago, there was a "+ gender + " named " + name + ". " + name + " lived in a small cabin in the woods just outside " + city + " limits.</p> <p>" + name + " enjoyed walking in the woods every day until... One day " + pronoun + " came upon a " + monster + " sitting on a log eating a " + food + ".</p> <p>The " + monster + " jumped up, spilling his " + drink + ". " + name + " ran home as fast as " + pronoun + " could but the " + monster + " followed and ...</p><h3>What happened? You decide! </h3> <p>Ending 1: The " + monster + " and " + name + " became best friends and lived in " + name + "'s house happily ever after.</p> <p>Ending 2: The " + monster + " overpowered " + name + " and gobbled down all the " + food + " and " + drink + " in " + name + "'s refrigerator.</p> <p>Ending 3: " + name + " screamed mean things at the " + monster + ", causing the " + monster + " to turn and run back to the woods, never to be seen again.</p>");
}
</script>
</head>
<body>
<div id="container">
<img src="images/superhero.jpg" class="floatleft" />
<h1><em>Greg's Tales</em></h1>
<h3>For this game, you will create a story by entering words as prompted. The story will change each time you run this game, as you enter different words.</h3>
<div id="nav">
<p><a href="index.html">Home</a>
<a href="greg.html">About Greg</a>
<a href="play_games.html">Play a Game</a>
<a href="sign.html">Sign In</a>
<a href="contact.html">Contact Us</a></p>
</div>
<div id="content">
<p>&nbsp;</p>
<input type="button" value = "click to begin" onclick="startGame()" />
</div>
<div id="footer">Copyright &copy; 2013 Greg's Gambits<br />
<a href="mailto:yourfirstname@yourlastname.com"> yourfirstname@yourlastname.com</a>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB