school/cs1430
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init commit

Browse Source
This commit is contained in:
jashton
2026-08-04 06:53:36 -06:00
commit 5df8484e8f
91 changed files with 2859 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
canvas.html
+23
View File
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link href="canvasStyle.css" rel="stylesheet">
<title>Joshua Ashton</title>
</head>
<body>
<br>
</body>
</html>
canvasStyle.css
+1
View File
@@ -0,0 +1 @@
css/style.css
+98
View File
@@ -0,0 +1,98 @@
* {
border: 1px black solid;
}
body {
margin:0;
height:100vh;
background:
linear-gradient(
135deg,
hsl(279deg 33% 47%) 0%,
hsl(279deg 40% 33%) 39%,
hsl(279deg 62% 19%) 61%,
hsl(279deg 94% 7%) 100%
);
background-size:300% 100%,cover;
animation:change 4s linear infinite;
animation-direction: alternate;
}
@keyframes change {
from {
background-position:right,center;
}
}
h1, h2, h3, p {
font-family: Lato, sans-serif;
color: white;
}
.bg-light {
background-color: white;
border-color: red;
padding: 0;
}
.navbar-brand {
padding-left: 15px;
}
.nav-link {
background-color: white;
color: #4A245E;
animation: 500ms;
}
.nav-link:hover {
background-color: #4A245E;
color: white;
}
h1 {
font-size: 8vw;
}
h2 {
font-size: 4vw;
}
h3 {
font-size: 3vw;
}
p {
font-size: 2vw;
}
.container {
padding: 1vw;
align-content: center;
}
horizontal-menu/.DS_Store
Vendored
BIN
View File
Binary file not shown.
horizontal-menu/._.DS_Store
BIN
View File
Binary file not shown.
horizontal-menu/._about.html
BIN
View File
Binary file not shown.
horizontal-menu/._contact.html
BIN
View File
Binary file not shown.
horizontal-menu/._index.html
BIN
View File
Binary file not shown.
horizontal-menu/._order.html
BIN
View File
Binary file not shown.
horizontal-menu/about.html
+37
View File
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About</title>
</head>
<body>
<nav>
<ul>
<a href="index.html"><li>Home</li></a>
<a href="contact.html"><li>Contact</li></a>
<a href="about.html"><li>About</li></a>
<a href="order.html"><li>Order</li></a>
</ul>
<h1>About</h1>
</nav>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur lorem donec massa sapien faucibus et molestie ac. Senectus et netus et malesuada fames ac turpis. Integer malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Libero justo laoreet sit amet cursus. Montes nascetur ridiculus mus mauris vitae ultricies leo. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Habitant morbi tristique senectus et netus et malesuada fames. Ultricies integer quis auctor elit sed vulputate mi sit. Nullam ac tortor vitae purus faucibus ornare.</p>
<p>Elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Massa enim nec dui nunc mattis enim ut tellus. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Sapien pellentesque habitant morbi tristique senectus et netus et. Potenti nullam ac tortor vitae. Pharetra vel turpis nunc eget lorem dolor sed viverra. Amet risus nullam eget felis eget nunc lobortis. Pretium quam vulputate dignissim suspendisse in. Lacus laoreet non curabitur gravida arcu. Sit amet tellus cras adipiscing. Ut morbi tincidunt augue interdum velit euismod in. Sed id semper risus in hendrerit. Placerat orci nulla pellentesque dignissim enim sit. Sollicitudin ac orci phasellus egestas tellus. Convallis posuere morbi leo urna molestie at. In vitae turpis massa sed. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eget arcu dictum varius duis.</p>
<p>Faucibus pulvinar elementum integer enim neque volutpat ac. Ut lectus arcu bibendum at varius vel. Viverra nam libero justo laoreet sit amet cursus sit amet. Elit at imperdiet dui accumsan sit amet nulla facilisi morbi. Urna molestie at elementum eu facilisis. Non diam phasellus vestibulum lorem sed. Cras semper auctor neque vitae tempus. In hendrerit gravida rutrum quisque non tellus orci ac auctor. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Leo a diam sollicitudin tempor id eu nisl.</p>
<p>Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Urna neque viverra justo nec. Nec sagittis aliquam malesuada bibendum arcu. Sit amet consectetur adipiscing elit ut aliquam purus sit. Vestibulum lorem sed risus ultricies tristique nulla aliquet enim tortor. Massa tempor nec feugiat nisl pretium fusce id. Potenti nullam ac tortor vitae purus. Tortor at auctor urna nunc id cursus metus aliquam eleifend. Amet massa vitae tortor condimentum lacinia quis vel. Nulla facilisi cras fermentum odio eu. Elit pellentesque habitant morbi tristique senectus et netus et. Cursus in hac habitasse platea dictumst quisque sagittis. Sit amet porttitor eget dolor morbi non arcu. Nunc sed id semper risus.</p>
<p>Commodo quis imperdiet massa tincidunt nunc. In massa tempor nec feugiat nisl pretium fusce. Congue nisi vitae suscipit tellus mauris a. Quis eleifend quam adipiscing vitae proin sagittis nisl. Accumsan sit amet nulla facilisi. Vel pharetra vel turpis nunc eget lorem. Sed odio morbi quis commodo. Blandit libero volutpat sed cras ornare arcu dui vivamus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci a. Interdum posuere lorem ipsum dolor sit amet consectetur. Condimentum lacinia quis vel eros donec ac odio tempor orci. Laoreet sit amet cursus sit amet dictum. Urna nunc id cursus metus.</p>
</body>
</html>
horizontal-menu/contact.html
+37
View File
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contact</title>
</head>
<body>
<nav>
<ul>
<a href="index.html"><li>Home</li></a>
<a href="contact.html"><li>Contact</li></a>
<a href="about.html"><li>About</li></a>
<a href="order.html"><li>Order</li></a>
</ul>
<h1>Contact</h1>
</nav>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur lorem donec massa sapien faucibus et molestie ac. Senectus et netus et malesuada fames ac turpis. Integer malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Libero justo laoreet sit amet cursus. Montes nascetur ridiculus mus mauris vitae ultricies leo. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Habitant morbi tristique senectus et netus et malesuada fames. Ultricies integer quis auctor elit sed vulputate mi sit. Nullam ac tortor vitae purus faucibus ornare.</p>
<p>Elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Massa enim nec dui nunc mattis enim ut tellus. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Sapien pellentesque habitant morbi tristique senectus et netus et. Potenti nullam ac tortor vitae. Pharetra vel turpis nunc eget lorem dolor sed viverra. Amet risus nullam eget felis eget nunc lobortis. Pretium quam vulputate dignissim suspendisse in. Lacus laoreet non curabitur gravida arcu. Sit amet tellus cras adipiscing. Ut morbi tincidunt augue interdum velit euismod in. Sed id semper risus in hendrerit. Placerat orci nulla pellentesque dignissim enim sit. Sollicitudin ac orci phasellus egestas tellus. Convallis posuere morbi leo urna molestie at. In vitae turpis massa sed. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eget arcu dictum varius duis.</p>
<p>Faucibus pulvinar elementum integer enim neque volutpat ac. Ut lectus arcu bibendum at varius vel. Viverra nam libero justo laoreet sit amet cursus sit amet. Elit at imperdiet dui accumsan sit amet nulla facilisi morbi. Urna molestie at elementum eu facilisis. Non diam phasellus vestibulum lorem sed. Cras semper auctor neque vitae tempus. In hendrerit gravida rutrum quisque non tellus orci ac auctor. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Leo a diam sollicitudin tempor id eu nisl.</p>
<p>Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Urna neque viverra justo nec. Nec sagittis aliquam malesuada bibendum arcu. Sit amet consectetur adipiscing elit ut aliquam purus sit. Vestibulum lorem sed risus ultricies tristique nulla aliquet enim tortor. Massa tempor nec feugiat nisl pretium fusce id. Potenti nullam ac tortor vitae purus. Tortor at auctor urna nunc id cursus metus aliquam eleifend. Amet massa vitae tortor condimentum lacinia quis vel. Nulla facilisi cras fermentum odio eu. Elit pellentesque habitant morbi tristique senectus et netus et. Cursus in hac habitasse platea dictumst quisque sagittis. Sit amet porttitor eget dolor morbi non arcu. Nunc sed id semper risus.</p>
<p>Commodo quis imperdiet massa tincidunt nunc. In massa tempor nec feugiat nisl pretium fusce. Congue nisi vitae suscipit tellus mauris a. Quis eleifend quam adipiscing vitae proin sagittis nisl. Accumsan sit amet nulla facilisi. Vel pharetra vel turpis nunc eget lorem. Sed odio morbi quis commodo. Blandit libero volutpat sed cras ornare arcu dui vivamus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci a. Interdum posuere lorem ipsum dolor sit amet consectetur. Condimentum lacinia quis vel eros donec ac odio tempor orci. Laoreet sit amet cursus sit amet dictum. Urna nunc id cursus metus.</p>
</body>
</html>
horizontal-menu/css/style.css
+80
View File
@@ -0,0 +1,80 @@
* {
margin: 0;
}
body {
font-family: Lato, sans-serif;
background-color: #4A245E;
}
ul {
float: right;
margin-top: .6em;
}
nav {
background-color: white;
}
li {
padding-top: .5em;
padding-bottom: .5em;
padding-left: 1em;
padding-right: 1em;
display: inline-block;
background-color: #4A245E;
}
li:hover {
background-color: white;
color: #4A245E;
}
a {
font-size: 2em;
font-style: normal;
background-color: #4A245E;
color: white;
text-decoration: none;
}
a:hover {
background-color: white;
color: #4A245E;
}
h1 {
padding-left: 1em;
font-size: 5em;
color: #4A245E;
}
p {
font-size: 1em;
color: white;
padding: 1em;
padding-bottom: 2em;
text-align: justify;
}
horizontal-menu/index.html
+37
View File
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
</head>
<body>
<nav>
<ul>
<a href="index.html"><li>Home</li></a>
<a href="contact.html"><li>Contact</li></a>
<a href="about.html"><li>About</li></a>
<a href="order.html"><li>Order</li></a>
</ul>
<h1>Home</h1>
</nav>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur lorem donec massa sapien faucibus et molestie ac. Senectus et netus et malesuada fames ac turpis. Integer malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Libero justo laoreet sit amet cursus. Montes nascetur ridiculus mus mauris vitae ultricies leo. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Habitant morbi tristique senectus et netus et malesuada fames. Ultricies integer quis auctor elit sed vulputate mi sit. Nullam ac tortor vitae purus faucibus ornare.</p>
<p>Elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Massa enim nec dui nunc mattis enim ut tellus. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Sapien pellentesque habitant morbi tristique senectus et netus et. Potenti nullam ac tortor vitae. Pharetra vel turpis nunc eget lorem dolor sed viverra. Amet risus nullam eget felis eget nunc lobortis. Pretium quam vulputate dignissim suspendisse in. Lacus laoreet non curabitur gravida arcu. Sit amet tellus cras adipiscing. Ut morbi tincidunt augue interdum velit euismod in. Sed id semper risus in hendrerit. Placerat orci nulla pellentesque dignissim enim sit. Sollicitudin ac orci phasellus egestas tellus. Convallis posuere morbi leo urna molestie at. In vitae turpis massa sed. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eget arcu dictum varius duis.</p>
<p>Faucibus pulvinar elementum integer enim neque volutpat ac. Ut lectus arcu bibendum at varius vel. Viverra nam libero justo laoreet sit amet cursus sit amet. Elit at imperdiet dui accumsan sit amet nulla facilisi morbi. Urna molestie at elementum eu facilisis. Non diam phasellus vestibulum lorem sed. Cras semper auctor neque vitae tempus. In hendrerit gravida rutrum quisque non tellus orci ac auctor. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Leo a diam sollicitudin tempor id eu nisl.</p>
<p>Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Urna neque viverra justo nec. Nec sagittis aliquam malesuada bibendum arcu. Sit amet consectetur adipiscing elit ut aliquam purus sit. Vestibulum lorem sed risus ultricies tristique nulla aliquet enim tortor. Massa tempor nec feugiat nisl pretium fusce id. Potenti nullam ac tortor vitae purus. Tortor at auctor urna nunc id cursus metus aliquam eleifend. Amet massa vitae tortor condimentum lacinia quis vel. Nulla facilisi cras fermentum odio eu. Elit pellentesque habitant morbi tristique senectus et netus et. Cursus in hac habitasse platea dictumst quisque sagittis. Sit amet porttitor eget dolor morbi non arcu. Nunc sed id semper risus.</p>
<p>Commodo quis imperdiet massa tincidunt nunc. In massa tempor nec feugiat nisl pretium fusce. Congue nisi vitae suscipit tellus mauris a. Quis eleifend quam adipiscing vitae proin sagittis nisl. Accumsan sit amet nulla facilisi. Vel pharetra vel turpis nunc eget lorem. Sed odio morbi quis commodo. Blandit libero volutpat sed cras ornare arcu dui vivamus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci a. Interdum posuere lorem ipsum dolor sit amet consectetur. Condimentum lacinia quis vel eros donec ac odio tempor orci. Laoreet sit amet cursus sit amet dictum. Urna nunc id cursus metus.</p>
</body>
</html>
horizontal-menu/order.html
+37
View File
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Order</title>
</head>
<body>
<nav>
<ul>
<a href="index.html"><li>Home</li></a>
<a href="contact.html"><li>Contact</li></a>
<a href="about.html"><li>About</li></a>
<a href="order.html"><li>Order</li></a>
</ul>
<h1>Order</h1>
</nav>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur lorem donec massa sapien faucibus et molestie ac. Senectus et netus et malesuada fames ac turpis. Integer malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Libero justo laoreet sit amet cursus. Montes nascetur ridiculus mus mauris vitae ultricies leo. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Habitant morbi tristique senectus et netus et malesuada fames. Ultricies integer quis auctor elit sed vulputate mi sit. Nullam ac tortor vitae purus faucibus ornare.</p>
<p>Elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Massa enim nec dui nunc mattis enim ut tellus. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Sapien pellentesque habitant morbi tristique senectus et netus et. Potenti nullam ac tortor vitae. Pharetra vel turpis nunc eget lorem dolor sed viverra. Amet risus nullam eget felis eget nunc lobortis. Pretium quam vulputate dignissim suspendisse in. Lacus laoreet non curabitur gravida arcu. Sit amet tellus cras adipiscing. Ut morbi tincidunt augue interdum velit euismod in. Sed id semper risus in hendrerit. Placerat orci nulla pellentesque dignissim enim sit. Sollicitudin ac orci phasellus egestas tellus. Convallis posuere morbi leo urna molestie at. In vitae turpis massa sed. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eget arcu dictum varius duis.</p>
<p>Faucibus pulvinar elementum integer enim neque volutpat ac. Ut lectus arcu bibendum at varius vel. Viverra nam libero justo laoreet sit amet cursus sit amet. Elit at imperdiet dui accumsan sit amet nulla facilisi morbi. Urna molestie at elementum eu facilisis. Non diam phasellus vestibulum lorem sed. Cras semper auctor neque vitae tempus. In hendrerit gravida rutrum quisque non tellus orci ac auctor. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Leo a diam sollicitudin tempor id eu nisl.</p>
<p>Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Urna neque viverra justo nec. Nec sagittis aliquam malesuada bibendum arcu. Sit amet consectetur adipiscing elit ut aliquam purus sit. Vestibulum lorem sed risus ultricies tristique nulla aliquet enim tortor. Massa tempor nec feugiat nisl pretium fusce id. Potenti nullam ac tortor vitae purus. Tortor at auctor urna nunc id cursus metus aliquam eleifend. Amet massa vitae tortor condimentum lacinia quis vel. Nulla facilisi cras fermentum odio eu. Elit pellentesque habitant morbi tristique senectus et netus et. Cursus in hac habitasse platea dictumst quisque sagittis. Sit amet porttitor eget dolor morbi non arcu. Nunc sed id semper risus.</p>
<p>Commodo quis imperdiet massa tincidunt nunc. In massa tempor nec feugiat nisl pretium fusce. Congue nisi vitae suscipit tellus mauris a. Quis eleifend quam adipiscing vitae proin sagittis nisl. Accumsan sit amet nulla facilisi. Vel pharetra vel turpis nunc eget lorem. Sed odio morbi quis commodo. Blandit libero volutpat sed cras ornare arcu dui vivamus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci a. Interdum posuere lorem ipsum dolor sit amet consectetur. Condimentum lacinia quis vel eros donec ac odio tempor orci. Laoreet sit amet cursus sit amet dictum. Urna nunc id cursus metus.</p>
</body>
</html>
image-map/.DS_Store
Vendored
BIN
View File
Binary file not shown.
image-map/._.DS_Store
BIN
View File
Binary file not shown.
image-map/._index.html
BIN
View File
Binary file not shown.
image-map/css/.DS_Store
Vendored
BIN
View File
Binary file not shown.
image-map/css/._.DS_Store
BIN
View File
Binary file not shown.
image-map/css/._style.css
BIN
View File
Binary file not shown.
image-map/css/style.css
+21
View File
@@ -0,0 +1,21 @@
body {
background-color: #4A245E;
}
h1, p, ul {
font-family: Lato, sans-serif;
text-align: left;
color: white;
font-size: 3vw;
}
p, ul {
font-size: 1vw;
}
image-map/img/.DS_Store
Vendored
BIN
View File
Binary file not shown.
image-map/img/._.DS_Store
BIN
View File
Binary file not shown.
image-map/img/._swmap.jpeg
BIN
View File
Binary file not shown.
image-map/img/swmap.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 MiB

image-map/index.html
+127
View File
@@ -0,0 +1,127 @@
<!DOCTYPE html>
<html>
<head>
<title>Interactive Star Wars Map</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<br>
<h1>Interactive Star Wars Galaxy Map</h1>
<br>
<p>I am an enormous fan of Star Wars. For this assignment, I chose to create an image-map of the Star Wars galaxy. In other words, this map is interactable. Almost every part of the galaxy map has an associated area. The area's include, but are not limited to:</p>
<br>
<ul>
<li>Planets and moons seen in the live-action movies and TV shows;</li>
<li>Planets and moons from the video games, animated TV shows, and books;</li>
<li>Space stations and mining facilities; and</li>
<li>Regions of this galaxy far, far away.</li>
</ul>
<br>
<p>While I may have missed some notable locations, my goal was to create an interactive image map that covers every location we have ever seen or heard of. Coruscant, Endor, Hoth, Bespin, Dagobah, Tatooine and other notable planets were chosen, since such major plot points take place on these worlds. Other planets such as Christophsis, Korriban, Mortis, Dathomire, and Taris were chosen due to the community's enjoyment of storylines that took place in TV or video games on these planets.</p>
<br>
<p>Furthermore, any planets that are an alien species' home planet are also included. Neimodia, located in the Interior, is the home planet of the Neimoidians most known for their role in running the Trade Federation in the last years of the Galactic Republic, and forming the Confederacy of Independent Systems' droid army during the Clone Wars. The Bith are gifted performers, best known for their performances in cantinas, and come from the planet Bith. Devaronian's, the species of the devil-horned alien seen for a brief moment in Episode IV: A New Hope's cantina scene, hail from the planet Devaron. The infamous bounty hunter Bossk, a Trandoshan, is a member of the native species of Trandosha. Through the interactive map, you may make some interesting notes such as Trandosha's proximity to Kashyyyk, homeworld of the Wookiees, a species the Trandoshan's hunt for sport.
<br>
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="img/swmap.jpeg" usemap="#image-map"/>
<map name="image-map">
<area href="https://starwars.fandom.com/wiki/Ahch-To" coords="2509,6440,2948,6659" shape="rect">
<area href="https://starwars.fandom.com/wiki/Exegol" coords="2729,3788,3120,4036" shape="rect">
<area href="https://starwars.fandom.com/wiki/Takodana" coords="4169,7561,4627,7742" shape="rect">
<area href="https://starwars.fandom.com/wiki/Polis_Massa" coords="5218,9674,5764,9475" shape="rect">
<area href="https://starwars.fandom.com/wiki/Mustafar" coords="5118,9094,5549,9293" shape="rect">
<area href="https://starwars.fandom.com/wiki/Utapau" coords="6145,9119,6477,9284" shape="rect">
<area href="https://starwars.fandom.com/wiki/Dagobah" coords="6046,9019,6510,9119" shape="rect">
<area href="https://starwars.fandom.com/wiki/Hoth" coords="5284,8779,4969,8680" shape="rect">
<area href="https://starwars.fandom.com/wiki/Bespin" coords="4671,8605,4953,8754" shape="rect">
<area href="https://starwars.fandom.com/wiki/Jakku" coords="4141,6228,4439,6410" shape="rect">
<area href="https://starwars.fandom.com/wiki/Jedha" coords="3876,4878,4207,5060" shape="rect">
<area href="https://starwars.fandom.com/wiki/Mygeeto" coords="4820,2783,5234,2882" shape="rect">
<area href="https://starwars.fandom.com/wiki/Taris/Legends" coords="6344,3628,6642,3777" shape="rect">
<area href="https://starwars.fandom.com/wiki/Dathomir" coords="6394,3313,6808,3429" shape="rect">
<area href="https://starwars.fandom.com/wiki/Ord_Mantell" coords="5367,3810,5880,4009" shape="rect">
<area href="https://starwars.fandom.com/wiki/Ajan_Kloss" coords="5218,3089,5682,3271" shape="rect">
<area href="https://starwars.fandom.com/wiki/Dantooine" coords="5350,2435,5814,2567" shape="rect">
<area href="https://starwars.fandom.com/wiki/Mortis" coords="5102,1681,5400,1847" shape="rect">
<area href="https://starwars.fandom.com/wiki/Mandalore" coords="6758,3669,7189,3818" shape="rect">
<area href="https://starwars.fandom.com/wiki/Korriban" coords="7702,2849,8100,2998" shape="rect">
<area href="https://starwars.fandom.com/wiki/Dromund_Kaas" coords="8034,2741,8315,2874" shape="rect">
<area href="https://starwars.fandom.com/wiki/Yavin_4" coords="7321,3296,7719,3131" shape="rect">
<area href="https://starwars.fandom.com/wiki/Mon_Calamari" coords="9276,3603,9906,3421" shape="rect">
<area href="https://starwars.fandom.com/wiki/Felucia" coords="8067,3222,8365,3354" shape="rect">
<area href="https://starwars.fandom.com/wiki/Kijimi" coords="8166,4274,8448,4158" shape="rect">
<area href="https://starwars.fandom.com/wiki/Sullust" coords="6145,8365,5847,8249" shape="rect">
<area href="https://starwars.fandom.com/wiki/Crait" coords="6543,8307,6294,8175" shape="rect">
<area href="https://starwars.fandom.com/wiki/Naboo" coords="6543,7951,6874,8067" shape="rect">
<area href="https://starwars.fandom.com/wiki/Ryloth" coords="8017,8398,8348,8233" shape="rect">
<area href="https://starwars.fandom.com/wiki/Tatooine" coords="7852,7785,8183,7868" shape="rect">
<area href="https://starwars.fandom.com/wiki/Scarif" coords="8895,7446,8580,7297" shape="rect">
<area href="https://starwars.fandom.com/wiki/Kamino" coords="8531,7363,8233,7247" shape="rect">
<area href="https://starwars.fandom.com/wiki/Geonosis" coords="8150,7876,8531,7943" shape="rect">
<area href="https://starwars.fandom.com/wiki/Hosnian_Prime" coords="5516,6170,6079,6054" shape="rect">
<area href="https://starwars.fandom.com/wiki/Tython" coords="5334,5251,5698,5383" shape="rect">
<area href="https://starwars.fandom.com/wiki/Coruscant" coords="4936,4887,5433,5002" shape="rect">
<area href="https://starwars.fandom.com/wiki/Alderaan" coords="5930,5027,6344,4928" shape="rect">
<area href="https://starwars.fandom.com/wiki/Corellia" coords="5731,5723,6112,5822" shape="rect">
<area href="https://starwars.fandom.com/wiki/Nal_Hutta" coords="7868,5715,8365,5847" shape="rect">
<area href="https://starwars.fandom.com/wiki/Nar_Shadaa" coords="7901,5872,8415,5922" shape="rect">
<area href="https://starwars.fandom.com/wiki/Toydaria" coords="8166,5595,8481,5711" shape="rect">
<area href="https://starwars.fandom.com/wiki/Kessel" coords="8978,5056,9260,4924" shape="rect">
<area href="https://starwars.fandom.com/wiki/Christophsis" coords="7454,7980,7918,7881" shape="rect">
<area href="https://starwars.fandom.com/wiki/D%27Qar" coords="6825,8411,7139,8245" shape="rect">
<area href="https://starwars.fandom.com/wiki/Rakata_Prime" coords="3363,5636,3942,5785" shape="rect">
<area href="https://starwars.fandom.com/wiki/Rodia" coords="8100,7934,7934,7885" shape="rect">
<area href="https://starwars.fandom.com/wiki/Kuat" coords="6228,5309,6013,5259" shape="rect">
<area href="https://starwars.fandom.com/wiki/Neimoidia" coords="6543,5243,6228,5160" shape="rect">
<area href="https://starwars.fandom.com/wiki/Kashyyyk" coords="7603,4911,7222,4812" shape="rect">
<area href="https://starwars.fandom.com/wiki/Trandosha" coords="7106,4978,7454,4911" shape="rect">
<area href="https://starwars.fandom.com/wiki/Onderon" coords="6609,4721,6974,4837" shape="rect">
<area href="https://starwars.fandom.com/wiki/Pasaana" coords="7073,6311,7471,6145" shape="rect">
<area href="https://starwars.fandom.com/wiki/Manaan" coords="6692,5632,7023,5499" shape="rect">
<area href="https://starwars.fandom.com/wiki/Cato_Neimoidia" coords="6311,5470,6659,5619" shape="rect">
<area href="https://starwars.fandom.com/wiki/Klatooinian" coords="8448,4551,8796,4650" shape="rect">
<area href="https://starwars.fandom.com/wiki/Eadu" coords="9574,5230,9293,5114" shape="rect">
<area href="https://starwars.fandom.com/wiki/Vandor" coords="7222,6928,7537,6812" shape="rect">
<area href="https://starwars.fandom.com/wiki/Umbara" coords="7106,5023,7437,5106" shape="rect">
<area href="https://starwars.fandom.com/wiki/Lah&amp;27mu" coords="5466,2414,5831,2298" shape="rect">
<area href="https://starwars.fandom.com/wiki/Fondor" coords="5466,6613,5798,6481" shape="rect">
<area href="https://starwars.fandom.com/wiki/Ilum" coords="3545,3930,3826,3797" shape="rect">
<area href="https://starwars.fandom.com/wiki/Iridonia" coords="4870,3752,5152,3603" shape="rect">
<area href="https://starwars.fandom.com/wiki/Mimban" coords="7040,5856,6709,5723" shape="rect">
<area href="https://starwars.fandom.com/wiki/Devaron" coords="5897,6510,6228,6593" shape="rect">
<area href="https://starwars.fandom.com/wiki/Endor" coords="3710,7818,3975,7951" shape="rect">
<area href="https://starwars.fandom.com/wiki/Batuu" coords="3710,7255,4025,7371" shape="rect">
<area href="https://starwars.fandom.com/wiki/Malastare" coords="6328,7959,5996,7843" shape="rect">
<area href="https://starwars.fandom.com/wiki/Bith_(planet)" coords="5930,8845,6079,8746" shape="rect">
<area href="https://starwars.fandom.com/wiki/The_Maw" coords="8812,4887,8961,5036" shape="rect">
<area href="https://starwars.fandom.com/wiki/Lothal" coords="9375,3793,9740,3628" shape="rect">
<area href="https://starwars.fandom.com/wiki/Telos_IV" coords="7255,2427,7636,2543" shape="rect">
<area href="https://starwars.fandom.com/wiki/Peragus_II" coords="8348,2510,7934,2427" shape="rect">
<area href="https://starwars.fandom.com/wiki/Cantonica" coords="9028,2510,8514,2410" shape="rect">
<area href="https://starwars.fandom.com/wiki/Western_Reaches" coords="3816,7780,3998,7513,4131,7609,4389,7761,4608,7828,4780,7876,5066,7943,5324,7952,5505,7962,5782,7943,5944,7914,6554,10452,5953,10557,5286,10585,5295,10270,4627,10223,4169,10099,3835,9994,3778,10137,3730,10290,3396,10156,3091,10032,2729,9803,2576,9708,2471,9650,3187,8639" shape="poly">
<area href="https://starwars.fandom.com/wiki/Unknown_Regions" coords="3997,7538,3692,7281,3635,7319,3539,7252,3348,7042,3148,6679,2995,6279,2957,6202,3062,6183,2995,5802,2881,5802,2900,5458,2957,5029,3053,4743,3167,4485,3339,4189,3510,3970,3749,3741,3902,3617,4121,3445,4245,3388,3988,2873,3644,2224,3386,1747,3234,1842,2938,2024,2671,2234,2566,2319,2251,1976,2060,2148,1850,2367,1621,2615,1412,2892,1154,3321,925,3789,686,4476,486,4466,419,4800,372,5220,362,5496,353,5954,410,6326,477,6699,591,7156,734,7509,896,7862,1059,8149,1192,8340,1364,8588,1564,8826,1726,9007,1927,9208,2108,9389,2261,9494,2432,9647,3501,8168" shape="poly">
<area href="https://starwars.fandom.com/wiki/New_Territories" coords="4646,4131,4331,3520,4055,2977,3749,2385,3444,1765,3320,1593,3597,1469,3931,1336,4284,1231,4207,897,4188,763,4503,677,4894,649,5429,620,5820,649,6287,687,6631,773,7098,887,7423,1030,7785,1221,8100,1412,8434,1641,8701,1822,9025,2137,9254,2414,9531,2757,9340,2919,8940,3196,8606,3396,8377,3559,8577,3912,8186,4122,7709,4351,7346,4551,7098,4684,6993,4751,6993,4694,6774,4694,6650,4503,6411,4274,6135,4112,5877,3998,5352,3921,5076,3959" shape="poly">
<area href="https://starwars.fandom.com/wiki/The_Slice" coords="6367,6693,6701,6311,6815,6016,6176,5825,6014,5644,5966,5376,5842,5167,6167,4852,6558,4518,6625,4470,6758,4651,6854,4861,7054,4728,7445,4508,8103,4193,8580,3917,8409,3554,9554,2762,9725,3010,10031,3583,10231,4088,10298,4508,10393,5100,10422,5453,10403,6121,10336,6502,10260,6903,10107,7332,9945,7733,9754,7657,9668,7847,9468,8143,9229,8487,8972,8802,9124,8954,8628,9422,8476,9269,8186,8920,7852,8520,7594,8224,7346,7938,7222,7757,7111,7599,6749,7170" shape="poly">
<area href="https://starwars.fandom.com/wiki/Trailing_Sectors" coords="4246,3425,4704,4293,4551,4389,4255,4684,3988,5133,3950,5305,3645,5266,3616,5534,3664,6030,3902,6545,3950,6650,4227,6469,4475,6755,4789,6927,5133,7041,5658,7022,5953,6927,6345,6717,8453,9283,8119,9541,7928,9655,7613,9836,7270,9989,6984,10104,6535,10237,6373,9531,6116,8501,6020,7995,5934,7900,5715,7938,5457,7947,5104,7938,4751,7861,4522,7766,4112,7575,3912,7413,3683,7251,3587,7232,3396,7051,3234,6774,3072,6411,2986,6211,3091,6192,3015,5820,2910,5782,2958,5209,3024,4904,3225,4436,3425,4093,3864,3654" shape="poly">
<area href="https://starwars.fandom.com/wiki/The_Interior" coords="5820,5142,6583,4465,6430,4322,6125,4131,5848,4007,5324,3940,5066,4007,4656,4141,4608,4236,4541,4341,4351,4532,4122,4761,3969,5266,3625,5286,3635,5848,3730,6220,3940,6640,4198,6478,4370,6640,4560,6822,4818,6927,5133,7022,5619,7022,5944,6907,6354,6698,6640,6421,6793,6030,6201,5839,6011,5667,5963,5400" shape="poly">
<area href="https://en.wikipedia.org/wiki/B" coords="1295,1293,81" shape="circle">
<area href="https://en.wikipedia.org/wiki/C" coords="1731,1296,76" shape="circle">
<area href="https://en.wikipedia.org/wiki/D" coords="2143,1306,90" shape="circle">
<area href="https://en.wikipedia.org/wiki/E" coords="2585,1321,96" shape="circle">
</map>
</body>
</html>
index.html
+90
View File
@@ -0,0 +1,90 @@
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link href="css/style.css" rel="stylesheet">
<title>Joshua Ashton</title>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="www.joshuaashton.com">Josh Ashton</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<a class="nav-link" target="_blank" href="tables">
<li class="nav-item">YouTube Video Page</li>
</a>
<a class="nav-link" target="_blank" href="image-map">
<li class="nav-item">Mappin' It</li>
</a>
<a class="nav-link" target="_blank" href="superheroes">
<li class="nav-item">Super Heroes Page</li>
</a>
<a class="nav-link" target="_blank" href="little-boxes">
<li class="nav-item">Little Boxes</li>
</a>
<a class="nav-link" target="_blank" href="horizontal-menu">
<li class="nav-item">Horizontal Menu</li>
</a>
<a class="nav-link" target="_blank" href="js-birthday">
<li class="nav-item">Happy Birthday JS</li>
</a>
<a class="nav-link" target="_blank" href="lottery">
<li class="nav-item">Lottery Number Generator</li>
</a>
<a class="nav-link" target="_blank" href="mad-libs">
<li class="nav-item">Mad Libs</li>
</a>
<a class="nav-link" target="_blank" href="tic-tac-toe">
<li class="nav-item">Tic Tac Toe</li>
</a>
</ul>
</div>
</nav>
<div class="container" id="splash">
<h1>Hi, I'm Josh Ashton.</h1>
<h2>I'm a CS student at Salt Lake Community College, and this is my final project for CSIS1430.</h2>
<!--TODO: Need to make reflection of CSIS 1430 course.-->
<p>Lorem ipsum dolor sit amet, per ex altera ridens. Illud soleat possim eu eos, in prima libris prodesset nam, vix ex quando adolescens. In dicunt omnium cum. Mel consulatu aliquando incorrupte an, aperiri impedit scribentur ex nec. Duis omnes eum an, ad mel dicit adipiscing. An ius torquatos rationibus, no mazim graeco alterum cum.</p>
</div>
<div class="container">
<h3>Random Quote Generator</h3>
<button onclick="getQuote()">Click me</button>
</div>
<div class="container">
<h3>Reflection</h3>
</div>
</body>
<footer>
<script src="js/script.js"></script>
</footer>
</html>
js-birthday/css/style.css
+19
View File
@@ -0,0 +1,19 @@
body {
background-color: rgb(57, 36, 57);
color: white;
font-family: Lato, Helvetica, sans-serif;
}
h1, p {
text-align: center;
}
h1 {
font-size: 5em;
}
js-birthday/index.html
+16
View File
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0" lang="en">
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
<title>JS Birthday</title>
</head>
<body>
<h1 id="personalizedGreetings"></h1>
<p>It's your special time of the year, where you're another year older! What new adventures await for the next year? Only time will tell...</p>
</body>
</html>
js-birthday/js/script.js
+17
View File
@@ -0,0 +1,17 @@
var userName = prompt("What is your name?");
var userAge = prompt("What is your age?");
if(userAge < 50) {
alert("Welcome, " + userName +"! You're " + userAge + ". You're so young!");
} else {
alert("Welcome, " + userName +"! You're " + userAge + ".\n\nWhat was it like when dinosaurs roamed the Earth?");
}
window.onload = function() {
document.getElementById("personalizedGreetings").innerHTML = "Happy " + userAge + " birthday, " + userName + "!"
}
little-boxes/.DS_Store
Vendored
BIN
View File
Binary file not shown.
little-boxes/._.DS_Store
BIN
View File
Binary file not shown.
little-boxes/._index.html
BIN
View File
Binary file not shown.
little-boxes/.vscode/settings.json
Vendored
+3
View File
@@ -0,0 +1,3 @@
{
"livePreview.defaultPreviewPath": "d:\\school\\FALL 2022\\CSIS1430\\csis1430\\public_html\\little-boxes\\index.html"
}
little-boxes/css/style.css
+462
View File
@@ -0,0 +1,462 @@
/*Background color*/
html {
background-color: #4A245E;
}
/*HEAD & HAIR*/
/* Position, size, color, and shape of the head */
#head {
margin: 10em;
height: 775px;
width: 600px;
background-color: #d2a679;
border: 2px solid black;
border-radius: 90% 90% 100% 100%;
}
/*Position, size, color, and shape of the hair.*/
.hair {
position: relative;
bottom: 33px;
left: 13px;
}
#topHair {
width: 575px;
height: 170px;
background-color: #1a0d00;
border-radius: 10% 10% 0% 0% / 90% 90% 0% 0%;
}
#leftHair {
top: 170px;
left: 0;
width: 0;
height: 0;
border-bottom: 60px solid transparent;
border-left: 60px solid #1a0d00;
}
#rightHair {
top: 110px;
left: 515px;
width: 0;
height: 0;
border-bottom: 60px solid transparent;
border-right:60px solid #1a0d00;
}
/*HEADPHONES*/
/*Position, size, and shape of headphone headband.*/
#headrest {
position: relative;
bottom: 2em;
height: 5em;
background-color: black;
border: 1px solid black;
border-radius: 130% 130% 40% 40%;
}
/*Position of the headphone's stems.*/
#leftStem, #rightStem {
position: relative;
}
/*Position, size, color, and shape of the left headphone stem.*/
#leftStem {
right: 2.3em;
float: left;
height: 500px;
width: 50px;
background-color: black;
border-radius: 200% 10% 70% 25%;
}
/*Position, size, color, and shape of the left headphone's ear-cup.*/
#leftEar {
position: relative;
top: 17.05em;
right: 5em;
height: 225px;
width: 100px;
background-color: black;
border: 1px solid black;
border-radius: 45% 0% 0% 45%;
}
/*Position, size, color, and shape of the right headphone stem.*/
#rightStem {
left: 2.4em;
bottom: 5em;
float: right;
height: 500px;
width: 50px;
background-color: black;
border-radius: 10% 200% 25% 70%;
}
/*Position, size, color, and shape of the right headphone's ear-cup.*/
#rightEar {
position: relative;
top: 17.05em;
left: 2em;
height: 225px;
width: 100px;
background-color: black;
border: 1px solid black;
border-radius: 0% 45% 45% 0%;
}
/*EYEBROWS*/
/*Position and size of the eyebrow container.*/
.eyebrowContainer {
margin-top: 10%;
height: 1.3em;
width: 600px;
}
/*Size and color of the eyebrows.*/
#leftBrow, #rightBrow {
width: 12em;
height: 1.5em;
background-color: #261a0d;
}
/*Position and shape of the left eyebrow.*/
#leftBrow {
float: left;
border-radius: 180% 20% 30% 45%;
}
/*Position and shape of the right eyebrow.*/
#rightBrow {
float: right;
border-radius: 20% 180% 45% 30%;
}
/*EYES*/
/* Positioning the eyes relative to the head */
#eyeArea {
margin-top: 5%;
margin-left: 20%;
margin-right: 20%;
}
/*Positioning all contents of the eye class to the center of (x,y), and making the size, color, and shape of the eye.*/
.eye {
display: flex;
align-items: center;
justify-content: center;
height: 100px;
width: 100px;
background-color: #d9d9d9;
border-radius: 50%;
}
/*Position, size, color, and shape of the eye-color.*/
.eyeColor {
position: absolute;
height: 40px;
width: 40px;
background-color: #392613;
border-radius: 50%;
}
/*Center of the eye class, the pupil is the smallest circle within the eye. Position in z-index,
size, color, and shape of the pupil.*/
.pupil {
position: absolute;
height: 13px;
width: 13px;
background-color: black;
border-radius: 50%;
}
.topLid {
position: relative;
bottom: 25px;
height: 25px;
width: 100px;
background-color: #cc9966;
border: 1px solid #d2a679;
border-radius: 125px 125px 0 0;
}
.bottomLid {
position: relative;
top: 25px;
height: 30px;
width: 100px;
background-color: #cc9966;
border: 1px solid #d2a679;
border-radius: 0 0 200px 200px ;
}
/*Position of the left eye.*/
#leftEye {
float: left;
}
/*Position of the right eye.*/
#rightEye {
float: right;
}
/*GLASSES*/
/*Position, size, color, and shape of the glasses.*/
.glasses {
position: absolute;
z-index: 50;
height: 140px;
width: 200px;
border: 4px solid black;
border-radius: 35%;
border-width: 5px;
}
/*Position, size, and color of the glasses' ear hooks. Also applied to the nose bridge part of the
glasses.*/
.earHook, #bridge {
display: inline-block;
position: relative;
height: 4px;
width: 150px;
background-color: black;
}
/*Positions the glasses' left ear hook.*/
#leftEarHook {
float: left;
left: 100px;
position: absolute;
}
/*Positions and re-sizes the glasses' nose bridge.*/
#bridge {
left: 50px;
width: 60px;
}
/*Positions the glasses' right ear hook.*/
#rightEarHook {
float: right;
right: 70px;
position: absolute;
}
/*NOSE*/
/*Position and size of the nose container.*/
.nose {
position: relative;
display: inline-block;
left: 21px;
width: 115px;
height: 150px;
}
/*Position, size, color, and shape of the nose's ridge.*/
#noseRidge {
position: relative;
left: 25px;
z-index: 1;
height: 140px;
width: 60px;
background-color: #d2a679;
border: 3px solid #cc9966;
border-radius: 100% 100% 75% 75%;
}
/*Common position, size, color, and shape of the left and right nostril.*/
#leftNostril, #rightNostril {
position: relative;
bottom: 50px;
height: 40px;
width: 40px;
border: 4px solid #cc9966;
border-radius: 50%;
}
/*Left nostril's specific positioning.*/
#leftNostril {
float: left;
left: 10px;
}
/*Left nostril's specific positioning.*/
#rightNostril {
float: right;
right: 10px;
}
/*MOUTH*/
/*Position and size of the mouth container.*/
.mouthContainer {
position: relative;
display: flex;
align-items: center;
justify-content: center;
bottom: 20px;
left: 125px;
width: 350px;
height: 200px;
}
/*Size, color, and shape of the mouth.*/
#mouth {
height: 70px;
width: 220px;
background-color: #cc9966;
border-radius: 60px 60px 175px 175px;
}
/*Size, color, and shape of the mouth's lips together.*/
#lips {
height: 30px;
border-top: none;
border-bottom: 3px solid #bf8040;
border-radius: 60px 60px 175px 175px;
}
little-boxes/index.html
+115
View File
@@ -0,0 +1,115 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Self-portrait | Little-Boxes</title>
</head>
<body>
<div id="head">
<div class="headphone">
<div id="leftStem">
<div id="leftEar"></div>
</div>
<div id="headrest"></div>
<div id="rightStem">
<div id="rightEar"></div>
</div>
</div>
<div class="hair" id="topHair">
<div class="hair" id="leftHair"></div>
<div class="hair" id="rightHair"></div>
</div>
<div class="eyebrowContainer">
<div id="leftBrow"></div>
<div id="rightBrow"></div>
</div>
<div id="eyeArea">
<div class="earHook" id="leftEarHook"></div>
<div class="face eye" id="leftEye">
<div class="eyeColor"></div>
<div class="eyeLid">
<div class="topLid"></div>
<div class="bottomLid"></div>
</div>
<div class="glasses"></div>
<div class="pupil"></div>
</div>
<div id="bridge"></div>
<div class="face eye" id="rightEye">
<div class="eyeColor"></div>
<div class="eyeLid">
<div class="topLid"></div>
<div class="bottomLid"></div>
</div>
<div class="glasses"></div>
<div class="pupil"></div>
</div>
<div class="earHook" id="rightEarHook"></div>
</div>
<div class="nose">
<div id="noseRidge"></div>
<div id="leftNostril"></div>
<div id="rightNostril"></div>
</div>
<div class="mouthContainer">
<div id="mouth">
<div id="lips"></div>
</div>
</div>
</div>
</body>
</html>
lottery/css/1
+45
View File
@@ -0,0 +1,45 @@
body {
margin: auto;
position: relative;
background-color: #4A245E;
font-family: Lato sans-serif;
color: white;
}
h1 {
padding: 25px;
font-size: 5em;
}
div {
display: inline-block;
margin: auto;
}
button {
background-color: white;
color: #4A245E;
border: none;
padding: 25px;
text-decoration: none;
font-size: 1.5em;
font-family: Lato sans-serif;
display: inline-block;
}
p {
padding : 25px;
font-size: 2em;
display: inline-block;
}
lottery/css/style.css
+48
View File
@@ -0,0 +1,48 @@
body {
margin: auto;
position: relative;
background-color: #4A245E;
font-family: Lato sans-serif;
color: white;
text-align: center;
}
h1 {
padding: 25px;
font-size: 5em;
}
div {
display: inline-block;
margin: auto;
width: 50%;
}
button {
background-color: white;
color: #4A245E;
border: none;
padding: 25px;
text-decoration: none;
font-size: 1.5em;
font-family: Lato sans-serif;
display: inline-block;
}
p {
padding : 25px;
font-size: 2em;
display: inline-block;
}
lottery/favicon.ico
View File
lottery/index.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1" charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>Lottery</title>
</head>
<body>
<h1>Ashton's Lottery</h1>
<div>
<button onclick="refresh()">Play Again!</button>
<p id="output">Awaiting player...</p>
</div>
</body>
<footer>
<script src="js/script.js"></script>
</footer>
</html>
lottery/js/index.js
+71
View File
@@ -0,0 +1,71 @@
//function userPrompt() {
let size = prompt("Please enter the lottery size you\'d like:");
console.log(size);
function clickRegistered() {
console.log("Click registered, printing to console.");
}
//}
/*
const playButton = document.querySelector("#playbutton")
function userPrompt() {
let size = prompt("Please enter the lottery size you\'d like:");
if((size == null) || (size < 1) || (size < 10)) {
userPrompt();
} else {
createArray(size);
}
}
function createArray(size) {
const lotteryPool = [];
for(let i = 0; i < size; i ++) {
lotteryPool[i] = Math.floor(Math.random() * 100);
}
displayOutput(lotteryPool);
}
function displayOutput(lotteryPool) {
let result = "";
for(let i = 0; i < lotteryPool.length; i++) {
if(i < lotteryPool.length - 1) {
result += lotteryPool[i] + "-";
} else {
result += lotteryPool[i];
}
}
document.getElementById("output").innerHtml = result;
}
*/
lottery/js/script.js
+61
View File
@@ -0,0 +1,61 @@
const size = prompt("Please enter the size of the lottery pool:");
const lotteryValues = [];
window.onLoad = start();
function start() {
createArray();
}
function refresh() {
createArray();
}
function createArray() {
for(let i = 0; i < size; i++) {
lotteryValues[i] = getRandomInt();
}
generateOutput();
}
function generateOutput() {
let output = "";
for(let i = 0; i < lotteryValues.length; i++) {
output += lotteryValues[i];
if(i < lotteryValues.length - 1) {
output += "-";
}
}
document.getElementById("output").innerHTML = output
}
function getRandomInt() {
let min = 1;
let max = 100;
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min) + min);
}
mad-lib/css/style.css
+82
View File
@@ -0,0 +1,82 @@
* {
margin: auto;
position: relative;
font-family: Lato sans-serif;
font-size: 1em;
color: white;
background-color: #4A245E;
}
form {
width: 60%;
}
input {
padding: 1em;
margin: .5em;
min-width: 6.1em;
border-radius: 10px;
border: none;
color: #4A245E;
background-color: white;
transition: 500ms;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input::placeholder {
color: #4A245E;
}
input:focus {
background-color: #4A245E;
color: white;
}
h1 {
margin: auto;
position:relative;
font-size: 5em;
text-align: center;
}
h4 {
margin: auto;
position: relative;
width: 60%;
font-size: 2em;
text-align: center;
}
p {
margin: auto;
position: relative;
width: 50%;
}
mad-lib/index.html
+63
View File
@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1" charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>Mad Libs</title>
</head>
<body>
<h1>Mad Libs!</h1>
<h4>Leave boxes blank for random words when you click submit!</h4>
<form>
<input type="text" name="noun1" placeholder="Noun">
<input type="text" name="noun2" placeholder="Noun">
<input type="text" name="pronoun1" placeholder="Pronoun">
<input type="text" name="pronoun2" placeholder="Pronoun">
<input type="text" name="verb1" placeholder="Verb">
<input type="text" name="verb2" placeholder="Verb">
<input type="text" name="adj1" placeholder="Adjective">
<input type="text" name="adj2" placeholder="Adjective">
<input type="text" name="adv1" placeholder="Adverb">
<input type="text" name="adv2" placeholder="Adverb">
<input type="text" name="prep1" placeholder="Preposition">
<input type="text" name="prep2" placeholder="Preposition">
<input type="text" name="con1" placeholder="Conjunction">
<input type="text" name="con2" placeholder="Conjunction">
<input type="text" name="inter1" placeholder="Interjection">
<input type="text" name="inter2" placeholder="Interjection">
<input type="button" value="Submit" id="submit" onclick="generateStory()">
<input type="button" value="Clear" id="refresh" onclick="clearAndSet()">
</form>
<p id="output"></p>
</body>
<footer>
<script src="js/script.js"></script>
</footer>
</html>
mad-lib/js/script.js
+139
View File
File diff suppressed because one or more lines are too long
pizza-1/.DS_Store
Vendored
BIN
View File
Binary file not shown.
pizza-1/._.DS_Store
BIN
View File
Binary file not shown.
pizza-1/._contact.html
BIN
View File
Binary file not shown.
pizza-1/._index.html
BIN
View File
Binary file not shown.
pizza-1/about.html
+22
View File
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About</title>
</head>
<body>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="order.html">Order</a></li>
</ul>
<h1>About</h1>
</body>
</html>
pizza-1/contact.html
+41
View File
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contact</title>
</head>
<body>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="order.html">Order</a></li>
</ul>
<h1>Contact</h1>
<form action="https://www.stonecoldprofessor.com/pizza-contact.php" method="post">
<label for="first-name">First Name:</label><br>
<input type="text" name="first-name"><br>
<label for="last-name">Last Name:</label><br>
<input type="text" name="last-name"><br>
<label for="email">Email:</label><br>
<input type="text" name="email"><br>
<label for="message">Message:</label><br>
<textarea name="message"></textarea><br><br><br>
<input type="submit" value="Send">
<input type="reset" name="Clear">
</form>
</body>
</html>
pizza-1/index.html
+22
View File
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
</head>
<body>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="order.html">Order</a></li>
</ul>
<h1>Home</h1>
</body>
</html>
pizza-1/order.html
+22
View File
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Order</title>
</head>
<body>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="order.html">Order</a></li>
</ul>
<h1>Order</h1>
</body>
</html>
pizza-2/.DS_Store
Vendored
BIN
View File
Binary file not shown.
pizza-2/about.html
+27
View File
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>About</title>
</head>
<body>
<nav>
<ul>
<a href="index.html"><li>Ashton Pizzeria</li></a>
<a href="contact.html"><li>Contact Us</li></a>
<a href="about.html"><li>About</li></a>
<a href="order.html"><li id="spotlight">Order Now!</li></a>
</ul>
</nav>
<h1>About</h1>
</body>
</html>
pizza-2/contact.html
+46
View File
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Contact</title>
</head>
<body>
<nav>
<ul>
<a href="index.html"><li>Ashton Pizzeria</li></a>
<a href="contact.html"><li>Contact Us</li></a>
<a href="about.html"><li>About</li></a>
<a href="order.html"><li id="spotlight">Order Now!</li></a>
</ul>
</nav>
<h1>Contact</h1>
<form action="https://www.stonecoldprofessor.com/pizza-contact.php" method="post">
<label for="first-name">First Name:</label><br>
<input type="text" name="first-name"><br>
<label for="last-name">Last Name:</label><br>
<input type="text" name="last-name"><br>
<label for="email">Email:</label><br>
<input type="text" name="email"><br>
<label for="message">Message:</label><br>
<textarea name="message"></textarea><br><br><br>
<input type="submit" value="Send">
<input type="reset" name="Clear">
</form>
</body>
</html>
pizza-2/css/style.css
+160
View File
@@ -0,0 +1,160 @@
* {
margin: auto;
position: relative;
font-family: Lato sans-serif;
font-size: 1em;
color: white;
background-color: #4A245E;
}
h1 {
font-size: 7em;
padding-top: 1em;
}
h2 {
font-size: 5em;
}
h3 {
font-size: 2em;
}
h4 {
font-size: 1.5em;
}
/*NAVIGATION BAR*/
nav,
nav ul,
nav ul a,
nav ul a li {
background-color: white;
color: #4A245E;
text-align: center;
}
nav ul a {
display: inline-block;
text-decoration: none;
}
nav ul a li {
display: block;
padding: 1em;
font-size: larger;
list-style: none;
width: 6.4em;
transition: width, background-color, color 500ms;
}
nav ul a li:hover {
background-color: #4A245E;
color: white;
}
/*ORDER FORM*/
form {
border: 1px solid white;
width: 60%;
}
input {
padding: 1em;
margin: .5em;
min-width: 6.1em;
border-radius: 10px;
border: none;
color: #4A245E;
background-color: white;
transition: 500ms;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
input[name="add1"],
input[name="add2"] {
width: 100%;
}
input::placeholder {
color: #4A245E;
}
input:focus {
background-color: #4A245E;
color: white;
}
select {
border: 2px solid white;
border-radius: 5px;
text-align: center;
}
div.newRow {
display: flex;
justify-content: center;
}
div.newRow> :not(input.address) {
width: 50%;
}
pizza-2/index.html
+38
View File
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Home</title>
</head>
<body>
<nav>
<ul>
<a href="index.html"><li>Ashton Pizzeria</li></a>
<a href="contact.html"><li>Contact Us</li></a>
<a href="about.html"><li>About</li></a>
<a href="order.html"><li id="spotlight">Order Now!</li></a>
</ul>
</nav>
<h1>Home</h1>
<main>
<h3>Home is where the pizza is.</h3>
<p>At Ashton Pizzeria, we love everything pizza. So you deserve the best
pizza possible, which is why we are committed to sourcing locally,
with every pizza prepared completely by hand. You won't find any GMOs or
additives with our pizza. The best flavor, the best variety, the best option.
Come on by to Ashton Pizzeria today to have a slice of our world-famous pizza!</p>
</main>
</body>
</html>
pizza-2/order.html
+166
View File
@@ -0,0 +1,166 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Order</title>
</head>
<body>
<nav>
<ul>
<a href="index.html">
<li>Ashton Pizzeria</li>
</a>
<a href="contact.html">
<li>Contact Us</li>
</a>
<a href="about.html">
<li>About</li>
</a>
<a href="order.html">
<li id="spotlight">Order Now!</li>
</a>
</ul>
</nav>
<h1>Order</h1>
<form action="https://www.stonecoldprofessor.com/pizza-order.php" method="post">
<h3>About You</h3>
<br>
<div class="newRow">
<input type="text" name="first" placeholder="First Name" required>
<input type="text" name="last" placeholder="Last Name" required>
</div>
<div class="newRow">
<input class="address" type="text" name="add1" placeholder="Address 1" required>
</div>
<div class="newRow">
<input class="address" type="text" name="add2" placeholder="Address 2">
</div>
<div class="newRow">
<input type="text" name="city" placeholder="City" required>
<select name="state" required>
<option value="AL">AL</option>
<option value="AK">AK</option>
<option value="AR">AR</option>
<option value="AZ">AZ</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DC">DC</option>
<option value="DE">DE</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="HI">HI</option>
<option value="IA">IA</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="MA">MA</option>
<option value="MD">MD</option>
<option value="ME">ME</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MO">MO</option>
<option value="MS">MS</option>
<option value="MT">MT</option>
<option value="NC">NC</option>
<option value="NE">NE</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NV">NV</option>
<option value="NY">NY</option>
<option value="ND">ND</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="VT">VT</option>
<option value="VA">VA</option>
<option value="WA">WA</option>
<option value="WI">WI</option>
<option value="WV">WV</option>
<option value="WY">WY</option>
</select>
<input type="number" name="zip" placeholder="Zip" required>
</div>
<div class="newRow">
<input type="number" name="phone" placeholder="Phone Number">
<input type="email" name="email" placeholder="Email Address" required>
</div>
<br>
<h3>About your pizza</h3>
<br>
<h4>Size</h4>
<div class="newRow">
<input id="S" type="radio" name="size" value="S">
<label for="S">Small</label><br>
<input id="M" type="radio" name="size" value="M">
<label for="M">Medium</label><br>
</div>
<div class="newRow">
<input id="L" type="radio" name="size" value="L">
<label for="L">Large</label><br>
<input id="XL" type="radio" name="size" value="XL">
<label for="XL">Extra-Large</label><br>
</div>
<br>
<h4>Crust</h4>
<br>
<div class="newRow">
<input id="pan" type="radio" name="crust" value="pan">
<label for="pan">Pan</label><br>
<input id="thin" type="radio" name="crust" value="thin">
<label for="thin">Thin</label><br>
</div>
<div class="newRow">
<input id="deep" type="radio" name="crust" value="deep">
<label for="deep">Deep Dish</label><br>
<input id="neo" type="radio" name="crust" value="neo">
<label for="neo">Neopolitan</label><br>
</div>
</form>
</body>
</html>
superheroes/.DS_Store
Vendored
BIN
View File
Binary file not shown.
superheroes/._.DS_Store
BIN
View File
Binary file not shown.
superheroes/._index.html
BIN
View File
Binary file not shown.
superheroes/css/style.css
+52
View File
@@ -0,0 +1,52 @@
body {
font-family: Lato, sans-serif;
font-size: 1em;
color: white;
}
h1 {
font-size: 4em;
font-style: italic;
}
h2 {
font-size: 2em;
}
p {
padding-left: 3em;
padding-right: 3em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p:hover {
white-space: normal;
}
.dc {
background-color: darkblue;
padding: 1em;
}
.marvel {
background-color: darkred;
padding: 1em;
}
superheroes/index.html
+49
View File
@@ -0,0 +1,49 @@
<!doctype html>
<html lang="en">
<head>
<title>CSS Practice</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<style type="text/css">
html {
width: 100%;
}
</style>
</head>
<body>
<div class="dc">
<h1>DC Comics</h1>
<div class="batman">
<h2>Batman</h2>
<p>Batman is a fictional superhero appearing in American comic books published by DC Comics. The character was created by artist Bob Kane and writer Bill Finger,[4][5] and first appeared in Detective Comics #27 (1939). Originally named the "Bat-Man", the character is also referred to by such epithets as the Caped Crusader, the Dark Knight, and the World's Greatest Detective.[6]</p>
</div>
<div class="wonder-woman">
<h2>Wonder Woman</h2>
<p>Wonder Woman is a fictional superhero appearing in American comic books published by DC Comics.[2] The character is a founding member of the Justice League, goddess, and Ambassador-at-Large of the Amazonian people. The character first appeared in All Star Comics #8 in October 1941 and first cover-dated on Sensation Comics #1, January 1942. In her homeland, the island nation of Themyscira, her official title is Princess Diana of Themyscira, Daughter of Hippolyta. When blending into the society of "Man's World", she adopts her civilian identity Diana Prince. The character is also referred to by such epithets as the "Amazing Amazon", the "Spirit of Truth", "Themyscira's Champion", and the "Goddess of Love and War".</p>
</div>
<div class="superman">
<h2>Superman</h2>
<p>Superman is a fictional superhero appearing in American comic books published by DC Comics. The character was created by writer Jerry Siegel and artist Joe Shuster, high school students living in Cleveland, Ohio, in 1933. They sold Superman to Detective Comics, the future DC Comics, in 1938. Superman debuted in Action Comics #1 (cover-dated June 1938) and subsequently appeared in various radio serials, newspaper strips, television programs, films, and video games. With this success, Superman helped to create the superhero archetype and establish its primacy within the American comic book.[2] The character is also referred to by such epithets as the Big Blue Boy Scout, the Man of Steel, the Man of Tomorrow, and the Last Son of Krypton.[3]</p>
</div>
</div>
<div class="marvel">
<h1 style="font-style: italic;">Marvel Comics</h1>
<div class="spiderman">
<h2>Spiderman</h2>
<p>Spider-Man is a fictional superhero appearing in American comic books published by Marvel Comics. The character was created by writer-editor Stan Lee and writer-artist Steve Ditko, and first appeared in the anthology comic book Amazing Fantasy #15 (August 1962) in the Silver Age of Comic Books. Lee and Ditko conceived the character as an orphan being raised by his Aunt May and Uncle Ben in New York City after his parents Richard and Mary Parker were killed in a plane crash, and as a teenager, having to deal with the normal struggles of adolescence in addition to those of a costumed crime-fighter. Spider-Man's creators gave him super strength and agility, the ability to cling to most surfaces, shoot spider-webs using wrist-mounted devices of his own invention, which he calls "web-shooters", and react to danger quickly with his "spider-sense", enabling him to combat his foes.</p>
</div>
<div class="iron-man">
<h2>Iron Man</h2>
<p>Iron Man is a fictional superhero appearing in American comic books published by Marvel Comics. The character was created by writer and editor Stan Lee, developed by scripter Larry Lieber, and designed by artists Don Heck and Jack Kirby. The character made his first appearance in Tales of Suspense #39 (cover dated March 1963).</p>
</div>
<div class="thor">
<h2>Thor</h2>
<p>Thor (Thor Odinson) is a fictional superhero appearing in American comic books published by Marvel Comics. The character, based on the Norse mythological deity of the same name, is the Asgardian god of thunder and possesses the enchanted hammer Mjolnir, which grants him the ability of flight and weather manipulation amongst his other superhuman attributes.</p>
</div>
</div>
</body>
</html>
tables/.DS_Store
Vendored
BIN
View File
Binary file not shown.
tables/._.DS_Store
BIN
View File
Binary file not shown.
tables/._index.html
BIN
View File
Binary file not shown.
tables/img/._JackStauber_logo.jpeg
BIN
View File
Binary file not shown.
tables/img/._JerryRigEverything_logo.jpeg
BIN
View File
Binary file not shown.
tables/img/._LTT_logo.jpeg
BIN
View File
Binary file not shown.
tables/img/._LifeinJars_logo.jpeg
BIN
View File
Binary file not shown.
tables/img/._LukeStephens_Logo.jpeg
BIN
View File
Binary file not shown.
tables/img/._Pkmncast_logo.jpeg
BIN
View File
Binary file not shown.
tables/img/._WolfeyVGC_logo.jpeg
BIN
View File
Binary file not shown.
tables/img/._internetPitstop_logo.jpeg
BIN
View File
Binary file not shown.
tables/img/._kieran_LOGO.jpeg
BIN
View File
Binary file not shown.
tables/img/JackStauber_logo.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

tables/img/JerryRigEverything_logo.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

tables/img/LTT_logo.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

tables/img/LifeinJars_logo.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

tables/img/LukeStephens_Logo.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

tables/img/Pkmncast_logo.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

tables/img/WolfeyVGC_logo.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.2 KiB

tables/img/internetPitstop_logo.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

tables/img/kieran_LOGO.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

tables/index.html
+116
View File
@@ -0,0 +1,116 @@
<!DOCTYPE html>
<html>
<head>
<title>YouTube Video Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="center">My Favorite Youtube Videos</h1>
<h2 class="center">(in no particular order)</h2>
<br>
<br>
<p>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/jfKfPfyJRdk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</p>
<p id="embedCaption">Play this video while going through this page!</p>
<br>
<br>
<table class="center">
<th>Video Name</th>
<th>Creator</th>
<th>Creator Profile</th>
<th>Video Description</th>
<th>Video Length</th>
<tr>
<td><a href="https://youtube.com/playlist?list=PLFsQleAWXsj_4yDeebiIADdH5FMayBiJo">Important Videos Playlist</a></td>
<td><a href="https://www.youtube.com/channel/UCqjLgu2L35BoHNnhQLzmlfQ">kierancaspian's channel</a></td>
<td><img src="img/kieran_LOGO.jpeg" class="profilePic"/></td>
<td class="descrip">A playlist of 312 short videos epitomizing "internet humor". A necessary watch for any new internet user.</td>
<td>~1:11:39</td>
</tr>
<tr>
<td><a href="https://youtu.be/HTSjbkTabpI">The Batman Arkham Series</a></td>
<td><a href="https://www.youtube.com/c/LukeStephensTV">Luke Stephens' channel</a></td>
<td><img src="img/LukeStephens_Logo.jpeg" class="profilePic"/></td>
<td class="descrip">A thorough analysis of the Batman Arkham games trilogy, from gameplay and story, to character development and atmosphere.</td>
<td>3:24:53</td>
</tr>
<tr>
<td><a href="https://youtu.be/yBw6UXAiq0A">Introduction to Competitive Pokemon</a></td>
<td><a href="https://www.youtube.com/c/WolfeyVGC">WolfeyVGC's channel</a></td>
<td><img src="img/WolfeyVGC_logo.jpeg" class="profilePic"/></td>
<td class="descrip">Part 1 to a 3 part series teaching fundamental concepts to excel in competitive Pokemon.</td>
<td>1:04:22</td>
</tr>
<tr>
<td><a href="https://youtu.be/zPmqbtKwtgw">Making a Home Server</a></td>
<td><a href="https://www.youtube.com/c/LinusTechTips">Linus Tech Tips' channel</a></td>
<td><img src="img/LTT_logo.jpeg" class="profilePic"/></td>
<td class="descrip">An inspiring video on converting an old PC or laptop to act as a home server.</td>
<td>11:06</td>
</tr>
<tr>
<td><a href="https://youtu.be/JovIgd9B9RQ">Beserk Soundtrack Analysis</a></td>
<td><a href="https://www.youtube.com/channel/UC2SVUGk_kWw62xkFxOGI7Ig">Internet Pitstop's channel</a></td>
<td><img src="img/internetPitstop_logo.jpeg" class="profilePic"/></td>
<td class="descrip">A video analyzing and discussing the Berserk 97 Soundtrack Legendary Wind Sword.</td>
<td>34:20</td>
</tr>
<tr>
<td><a href="https://youtu.be/osxJ5-_Ccp0">rain</a></td>
<td><a href="https://www.youtube.com/c/JackStauber">JackStauber's channel</a></td>
<td><img src="img/JackStauber_logo.jpeg" class="profilePic"/></td>
<td class="descrip">One of my favorite artists, I love his unique style and animation while exploring difficult subjects.</td>
<td>0:35</td>
</tr>
<tr>
<td><a href="https://youtu.be/7G62pp8gstQ">Samsung Z Flip 3 Teardown</a></td>
<td><a href="https://www.youtube.com/c/JerryRigEverything">JerryRigEverything's channel</a></td>
<td><img src="img/JerryRigEverything_logo.jpeg" class="profilePic"/></td>
<td class="descrip">A thorough examination of the innards that compose the Samsung Z Flip 3. I work in electronics repair, and recently got to work on this beautiful phone.</td>
<td>9:38</td>
</tr>
<tr>
<td><a href="https://youtu.be/eDAgxaNtgWc">Isopod Colonies are Fun</a></td>
<td><a href="https://www.youtube.com/c/LifeinJars">Life in Jars? channel</a></td>
<td><img src="img/LifeinJars_logo.jpeg" class="profilePic"/></td>
<td class="descrip">"I'm working with the species Porcellio scaber (common rough woodlouse). In this video I show you how to make a terrarium for an isopod colony and also how much fun and how interesting it is to have an isopod colony yourselves."</td>
<td>10:54</td>
</tr>
<tr>
<td><a href="https://youtu.be/i-3ZpFu8cr8">Weekly Pkmncast Podcast video</a></td>
<td><a href="https://www.youtube.com/c/Pkmncast">Pkmncast channel</a></td>
<td><img src="img/Pkmncast_logo.jpeg" class="profilePic"/></td>
<td class="descrip">In this podcast episode, Steve, Greg, and Will talk about the recent Pokemon Worlds event in London and the reveal of a potential pre-evolved form of the upcoming legendaries of Pokemon Scarlet and Violet.</td>
<td>2:06:27</td>
</tr>
</table>
<br>
<br>
</body>
</html>
tables/style.css
+63
View File
@@ -0,0 +1,63 @@
.center{
margin-right: auto;
margin-left: auto;
text-align: center;
}
body, a {
font-family: Lato, sans-serif;
color: white;
background-color: #4A245E;
font-size: .9em;
}
p {
text-align: center;
}
#embedCaption {
font-size: .8em;
}
table, th, td {
border: 1px solid white;
border-collapse: collapse;
padding: 25px;
}
th {
font-size: 1.3em;
padding-top: 10px;
padding-bottom: 10px;
}
a {
font-style: italic;
text-decoration: underline;
}
.profilePic {
width: 125px;
height: 125px;
}
.descrip {
text-align: left;
}
tic-tac-toe/\
+12
View File
@@ -0,0 +1,12 @@
* {
margin: auto;
position: relative;
font-family: Lato sans-serif;
font-size: 1em;
background-color: #4A245E;
color: white;
}
tic-tac-toe/css/style.css
+43
View File
@@ -0,0 +1,43 @@
* {
font-family: Lato sans-serif;
background-color: #4A245E;
color: white;
}
body {
display: flex;
justify-content: center;
}
.grid {
display: grid;
grid-template-columns: 10em 10em 10em;
grid-template-rows: 10em 10em 10em;
width: 75%;
}
.box {
font-size: 5em;
border: 1px solid white;
padding: 1em;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}
tic-tac-toe/index.html
+47
View File
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1" charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>PLACEHOLDER</title>
</head>
<body>
<div id="output">
<h1 id="output-text"></h1>
<button id="clear" onclick="resetAndClear()" hidden>Clear</button>
</div>
<div class="grid">
<div class="box" id="0" onclick="clickTracker(this)"></div>
<div class="box" id="1" onclick="clickTracker(this)"></div>
<div class="box" id="2" onclick="clickTracker(this)"></div>
<div class="box" id="3" onclick="clickTracker(this)"></div>
<div class="box" id="4" onclick="clickTracker(this)"></div>
<div class="box" id="5" onclick="clickTracker(this)"></div>
<div class="box" id="6" onclick="clickTracker(this)"></div>
<div class="box" id="7" onclick="clickTracker(this)"></div>
<div class="box" id="8" onclick="clickTracker(this)"></div>
</div>
</body>
<footer>
<script src="js/script.js"></script>
</footer>
</html>
tic-tac-toe/js/script.js
+170
View File
@@ -0,0 +1,170 @@
const playerX = prompt("Please enter player one's name:");
const playerO = prompt("Please enter player two's name:");
const boxes = document.getElementsByClassName("box");
let currentPlayer = playerX;
const posX = [];
let indexX = 0;
const posO = [];
let indexO = 0;
let marks = 0;
document.getElementById("output-text").innerHTML = currentPlayer + "\'s turn."
document.getElementById("clear").hidden = true;
function clickTracker(button) {
mark(button.id);
}
function mark(index) {
let winstate = false;
marks++;
if(currentPlayer === playerX) {
boxes[index].innerHTML = "X"
posX[indexX] = index;
indexX++;
if(marks > 4) {
winstate = checkForWin(posX);
}
if(winstate === true) {
document.getElementById("output-text").innerHTML = currentPlayer + " WON!"
document.getElementById("clear").hidden = false;
} else {
currentPlayer = playerO;
document.getElementById("output-text").innerHTML = currentPlayer + "'s turn."
}
} else {
boxes[index].innerHTML = "O"
posO[indexO] = index;
indexO++;
if(marks > 4) {
winstate = checkForWin(posO);
}
if(winstate === true) {
document.getElementById("output-text").innerHTML = currentPlayer + " WON!"
document.getElementById("clear").hidden = false;
} else {
currentPlayer = playerX;
document.getElementById("output-text").innerHTML = currentPlayer + "'s turn."
}
}
}
function checkForWin(player) {
const winstates = [
[0,1,2],
[3,4,5],
[6,7,8],
[0,3,6],
[1,4,7],
[2,5,8],
[0,4,8],
[2,4,6]
];
let count = 0;
for(let j = 0; j < winstates.length; j++) {
for(let k = 0; k < player.length; k++) {
for(let i = 0; i < winstates[j].length; i++) {
if(player[k] == winstates[j][i]) {
count++;
}
}
}
if(count === 3) {
return true;
} else {
count = 0;
}
}
return false;
}
function resetAndClear() {
for(let i = 0; i < boxes.length; i++) {
boxes[i].innerHTML = ""
}
if(currentPlayer === playerX) {
currentPlayer = playerO;
} else {
currentPlayer = playerX;
}
for(let i = 0; i < posX.length; i++) {
posX[i] = -1;
}
for(let i = 0; i < posO.length; i++) {
posO[i] = -1;
}
marks = 0;
document.getElementById("output-text").innerHTML = currentPlayer + "\'s turn"
document.getElementById("clear").hidden = true;
}