CCF_100/ASDV-WebDev
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Chapter ZIP

Browse Source
This commit is contained in:
Chloe Fontenot 🏳️‍⚧️
2023-03-24 13:26:48 -05:00
parent bbce21cf8b
commit c032ee5d22
34 changed files with 1530 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
Chapter ZIPs/JavaScript/ch6/greg/greg.css Executable file
View File

@@ -0,0 +1,121 @@
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: 1.2em;
border-bottom: 1px solid #000000;
margin-right: auto;
text-align: left;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
line-height: 120%;
}
.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: 20px;
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;
color: #88ffff;
}
.nobdr {
border: none;
cell-padding: 5px;
}

BIN
Chapter ZIPs/JavaScript/ch6/greg/images/bunny.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
Chapter ZIPs/JavaScript/ch6/greg/images/elf.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
Chapter ZIPs/JavaScript/ch6/greg/images/ghost.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
Chapter ZIPs/JavaScript/ch6/greg/images/princess.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
Chapter ZIPs/JavaScript/ch6/greg/images/superhero.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
Chapter ZIPs/JavaScript/ch6/greg/images/wizard.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

204
Chapter ZIPs/JavaScript/ch6/greg/signin.html Executable file
View File

@@ -0,0 +1,204 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Greg's Gambits | Player Inventory</title>
<link href="greg.css" rel="stylesheet" type="text/css" />
<script>
function pickAvatar(picked)
{
var avatar = document.getElementById(picked).value;
document.getElementById('myavatar').innerHTML = avatar;
document.getElementById('avatar_img').innerHTML = ("<img src = 'images/"+avatar+".jpg' />");
}
function getRealName(realname)
{
var real = document.getElementById(realname).value;
document.getElementById('real_name').innerHTML = real;
}
function getUsername(username)
{
var user = document.getElementById(username).value;
document.getElementById('user_name').innerHTML = user;
}
function getPoints(points)
{
var pts = document.getElementById(points).value;
document.getElementById('user_points').innerHTML = pts;
}
function pickWeapons()
{
var i =0; var j = 0; var k = 0;
var weapon1 = "";
var weapon2 = "";
var weapon3 = " ";
for (i = 0; i <= 9; i++)
{
if (document.getElementById('w'+i).checked == true)
{
weapon1 = document.getElementById('w'+i).value;
document.getElementById('weapon_one').innerHTML = weapon1;
break;
}
}
for (j = (i+1); j <=9; j++)
{
if (document.getElementById('w'+j).checked == true)
{
weapon2 = document.getElementById('w'+j).value;
document.getElementById('weapon_two').innerHTML = weapon2;
break;
}
}
for (k = (j+1); k <=9; k++)
{
if (document.getElementById('w'+k).checked == true)
{
weapon3 = document.getElementById('w'+k).value;
document.getElementById('weapon_three').innerHTML = weapon3;
}
}
}
function pickSupplies()
{
var i =0; var j = 0; var k = 0; var m = 0; var p = 0;
var supply1 = ""; var supply2 = ""; var supply3 = " "; var supply4 = ""; var supply5 = "";
for (i = 0; i <= 9; i++)
{
if (document.getElementById('s'+i).checked == true)
{
supply1 = document.getElementById('s'+i).value;
document.getElementById('supply_one').innerHTML = supply1;
break;
}
}
for (j = (i+1); j <=9; j++)
{
if (document.getElementById('s'+j).checked == true)
{
supply2 = document.getElementById('s'+j).value;
document.getElementById('supply_two').innerHTML = supply2;
break;
}
}
for (k = (j+1); k <=9; k++)
{
if (document.getElementById('s'+k).checked == true)
{
supply3 = document.getElementById('s'+k).value;
document.getElementById('supply_three').innerHTML = supply3;
break;
}
}
for (m = (k+1); m <=9; m++)
{
if (document.getElementById('s'+m).checked == true)
{
supply4 = document.getElementById('s'+m).value;
document.getElementById('supply_four').innerHTML = supply4;
break;
}
}
for (p = (m+1); p <=9; p++)
{
if (document.getElementById('s'+p).checked == true)
{
supply5 = document.getElementById('s'+p).value;
document.getElementById('supply_five').innerHTML = supply5;
}
}
}
</script>
</head>
<body>
<div id="container">
<img src="images/superhero.jpg" class="floatleft" />
<h1 align="center"><em>Your Information and Inventory</em></h1>
<div style ="clear:both;"></div>
<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">
<h2><br />Tell Greg About You</h2>
<div>
<div><form name = "inventory">
<fieldset>
<h3>Enter the following information:</h3>
<p><label>Your name:<br /></label> <input type="text" id="realname" size = "40" value = ""/>
<input type ="button" onclick="getRealName('realname')" value = "ok"></button></p>
<p><label>Your username:<br /> </label><input type="text" id="username" size="40" value = ""/></label>
<input type ="button" onclick="getUsername('username')" value = "ok"></button></p>
<p><label>Points to date:<br /></label> <input type="text" id="points" size = "10" value = ""/>
<input type ="button" onclick="getPoints('points')" value = "ok"></button></p>
</fieldset></div>
<div style="clear:both;"></div>
<div> <table width = "100%" border = "2"> <br />
<tr><td colspan = "5" class = "nobdr"><h3>Your Avatar</h3></td></tr>
<tr><td class="nobdr"> &nbsp; &nbsp;<img src="images/bunny.jpg" /></td>
<td class="nobdr"> <img src="images/elf.jpg" /> </td>
<td class="nobdr"> <img src="images/ghost.jpg" /></td>
<td class="nobdr"><img src="images/princess.jpg" /></td>
<td class="nobdr"><img src="images/wizard.jpg" /></td></tr>
<tr><td class="nobdr">&nbsp; &nbsp;<input type = "radio" name = "avatar" id = "bunny" value = "Bunny" onclick="pickAvatar('bunny')"/></td>
<td class="nobdr">&nbsp; &nbsp;<input type = "radio" name = "avatar" id = "elf" value = "Elf" onclick="pickAvatar('elf')"/></td>
<td class="nobdr">&nbsp; &nbsp;<input type = "radio" name = "avatar" id = "ghost" value = "Ghost" onclick="pickAvatar('ghost')"/> </td>
<td class="nobdr">&nbsp; &nbsp;<input type = "radio" name = "avatar" id = "princess" value = "Princess" onclick="pickAvatar('princess')"/></td>
<td class="nobdr">&nbsp; &nbsp;<input type = "radio" name = "avatar" id = "wizard" value = "Wizard" onclick="pickAvatar('wizard')"/> </td></tr>
</table>
<div style="width: 50%; float: left;"><fieldset>
<h3>Select three weapons to help you in your quest</h3>
<input type="checkbox" name="weapons" id="w0" value="Sword" />Sword<br />
<input type="checkbox" name="weapons" id="w1" value="Slingshot" />Slingshot<br />
<input type="checkbox" name="weapons" id="w2" value="Shield" />Shield<br />
<input type="checkbox" name="weapons" id="w3" value="Bow and 10 Arrows" />Bow and 10 Arrows<br />
<input type="checkbox" name="weapons" id="w4" value="3 Magic Rocks" />3 Magic Rocks<br />
<input type="checkbox" name="weapons" id="w5" value="Knife" />Knife<br />
<input type="checkbox" name="weapons" id="w6" value="Staff" />Staff<br />
<input type="checkbox" name="weapons" id="w7" value="Wizard's Wand" />Wizard's Wand<br />
<input type="checkbox" name="weapons" id="w8" value="Extra Arrows" />10 Extra Arrows<br />
<input type="checkbox" name="weapons" id="w9" value="Cloak of Invisibility" />Cloak of Invisibility<br />
<input type ="button" onclick="pickWeapons()" value = "Enter my selections" /></button></fieldset></div>
<div style="width: 50%; float: left;"><fieldset>
<h3>Select five items to carry with you on your journeys</h3>
<input type="checkbox" name="supplies" id="s0" value="3-Day Food Supply" />3-Day Food Supply<br />
<input type="checkbox" name="supplies" id="s1" value="Backpack" />Backpack<br />
<input type="checkbox" name="supplies" id="s2" value="Kevlar Vest" />Kevlar Vest<br />
<input type="checkbox" name="supplies" id="s3" value="3-Day Water Bottle" />3-Day Supply of Water<br />
<input type="checkbox" name="supplies" id="s4" value="Box of 5 Firestarters" />Box of 4 Firestarters<br />
<input type="checkbox" name="supplies" id="s5" value="Tent" />Tent<br />
<input type="checkbox" name="supplies" id="s6" value="First Aid Kit" />First Aid Kit<br />
<input type="checkbox" name="supplies" id="s7" value="Warm Jacket" />Warm Jacket<br />
<input type="checkbox" name="supplies" id="s8" value="3 Pairs Extra Socks" />3 Pairs Extra Socks<br />
<input type="checkbox" name="supplies" id="s9" value="Pen and Notebook" />Pen and Notebook<br />
<input type ="button" onclick="pickSupplies()" value = "Enter my selections" /></button></fieldset></div>
</div>
<div style="clear:both;"></div>
<div ><br /><input type="reset" value="ooops! I made a mistake. Let me start over."><br /></div>
<div style="width: 90%; float: left;"><h3>Your information<br />
Your name: <span id = "real_name">&nbsp;</span> <br /><br />
Username: <span id = "user_name">&nbsp;</span> <br /><br />
Player points: <span id = "user_points">&nbsp;</span> <br /><br />
Avatar: <span id = "myavatar">&nbsp;</span> <span id = "avatar_img">&nbsp;</span><br /> <br />
Weapons:<br />
<span id = "weapon_one">&nbsp;</span> <br />
<span id = "weapon_two">&nbsp;</span><br />
<span id = "weapon_three">&nbsp;</span> <br /><br />
Supplies:<br />
<span id = "supply_one">&nbsp;</span> <br />
<span id = "supply_two">&nbsp;</span><br />
<span id = "supply_three">&nbsp;</span> <br />
<span id = "supply_four">&nbsp;</span><br />
<span id = "supply_five">&nbsp;</span> </h3></div>
</div></form>
<div style="clear:both;"></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>