platformps · DavidkBurchett · Jul 9, 2020 · Jul 9, 2020 · Jul 9, 2020 · Jul 9, 2020
diff --git a/README.md b/README.md
@@ -1,6 +1,15 @@
 # AD - SBA - HTML/CSS/JavaScript
 
 
+### Delivearble
+* I added 3 pages, each using their own HTMl, CSS, and Javascript.
+
+* The website has a "game" for the user to play and an area to enter their email as well as enter their own scores as a guest.
+
+* It also explains upon creating games in javascript, as well as my experience creating this website.
+
+* Website link: https://davidkburchett.github.io/sba.javascript_3-page-website/
+
 
 ### Description
 * In this Skill-based Assessment, you will be creating a small website and you get to pick what is the website about. The main purpose of this SBA is to test your skills in implementing a clean HTML structure that follows the methodologies of visual design, and styling your site so that it is user-friendly.

diff --git a/_config.yml b/_config.yml
@@ -0,0 +1 @@
+theme: jekyll-theme-slate
diff --git a/css/style.css b/css/style.css
@@ -1,9 +1,77 @@
-body {
-    background-color: navy;
+.page-header {
+    background-color: black;
+    text-align: center;
 }
 
+h1{ 
+    font-family: cursive;
+}
+
+p{
+    font-family: monospace;
+    line-height: 1.7;
+}
+
+table, th, td {
+    border: 2px solid black;
+}
+
+#dropDown{}
+#instructionsP{}
+#gif{}
+#scoreTable{}
+
+
+/* animations */
+#ball{
+    height: 25px;
+    width: 25px;
+    background-color: red;
+    border-radius: 50%;
+    display: inline-block;
+    animation-name: ball;
+    animation-iteration-count: infinite;
+    animation-duration: 5s;
+    animation-direction: alternate;
+}
+
+@keyframes ball {
+    0%{
+        -webkit-transform: translate(0%, 0%);
+    }
+
+    50%{
+        -webkit-transform: translate(1800%, 1650%);
+    }
+
+    100%{
+        -webkit-transform: translate(3700%, 10%);
+    }
+}
 
-object {
-    height: 100vh;
-    width: 100vh;
+#bar{
+    height: 25px;
+    width: 100px;
+    background-color: white;
+    display: inline-block;
+    position: relative;
+    top: 45vh;
+    animation-name: bar;
+    animation-iteration-count: infinite;
+    animation-duration: 5s;
+    animation-direction: alternate;
 }
+
+@keyframes bar {
+    0%{
+        -webkit-transform: translate(0, 0);
+    }
+
+    50%{
+        -webkit-transform: translate(370%, 0);
+    }
+
+    100%{
+        -webkit-transform: translate(800%, 0);
+    }
+}
diff --git a/game.html b/game.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<!-- ----------------------------------------------------------------- -->
+<!-- ----------------------------------------------------------------- -->
+<!-- ----------------------------------------------------------------- -->
+
+<head> <!-- header begins here -->
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="">
+  <meta name="author" content="">
+
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+
+	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+
+  <link href="./css/style.css" rel="stylesheet">
+  <script type="text/javascript" src="./js/header-functions.js"></script>
+
+  <style> body{background-color: darkgray; color: white;} </style>
+
+  <title>The Game!</title>
+
+</head> <!-- header ends here -->
+
+<!-- ---------------------------------------------------------------------------------- -->
+<!-- ---------------------------------------------------------------------------------- -->
+<!-- ---------------------------------------------------------------------------------- -->
+
+<body> <!-- body begins here -->
+
+
+    <!-- Top Banner -->
+	<div class="Banner">
+    <h1 class="page-header"> The Game! <br> <small class="page-header"> Have fun! </small> </h1>
+  </div>
+
+
+
+  <!-- Game Square -->
+  <div style="position: relative; width: 50vw; height: 50vh; background-color: black; left: 25vw;">
+    <span id="ball"></span>
+    <span id="bar"></span>
+  </div>
+
+  <span style="position: relative; left: 45vw;"><button onclick="changeColor()">Change Ball Color</button></span>
+
+  <!-- Bottom Buttons -->
+  <div class="row" style="margin-top: 20vh">
+    <div class="col-md-2"></div>
+    <div class="col-md-2">
+      <button onclick="window.location.href='./instructions.html';"> To Game Overview! </button>
+    </div>
+    <div class="col-md-2"></div>
+    <div class="col-md-2"></div>
+    <div class="col-md-2">
+      <button onclick="window.location.href='./index.html';"> To Overview! </button>
+    </div>
+    <div class="col-md-2"></div>
+  </div>
+
+  <!-- Score Board -->
+  <div class="row" style="margin-top: 10vh">
+    <div class="col-md-2"></div>
+    <div class="col-md-8">
+      <table style="width: 50%;" id="scoreTable">
+        <tr>
+          <th>Name</th>
+          <th>Score</th>
+        </tr>
+        <tr>
+          <td>Kyle</td>
+          <td>100</td>
+        </tr>
+        <tr>
+          <td>Leon</td>
+          <td>1000000</td>
+        </tr>
+      </table>
+
+      <!-- User added scores -->
+      Add Score! (will prompt twice)
+      <form name="scoreForm" action="#">
+        <label for="score">Score:</label>
+        <input type="text" name="score">
+        <input type="submit" value="Submit" onclick="addScore(document.scoreForm.score)">
+      </form>
+
+    </div>
+    <div class="col-md-2"></div>
+  </div>
+
+
+  <!-- ====================================================== -->
+  <!-- ====================================================== -->
+  <footer>
+    <!-- footer of page begins here -->
+    <script type="text/javascript" src="./js/scripting.js"></script>
+    <script type="text/javascript" src="./js/footer-functions.js"></script>
+  </footer> <!-- footer of page ends here -->
+  <!-- ====================================================== -->
+  <!-- ====================================================== -->
+
+</body>
+
+<!-- ---------------------------------------------------------------------------------- -->
+<!-- ---------------------------------------------------------------------------------- -->
+<!-- ---------------------------------------------------------------------------------- -->
+
+</html>
diff --git a/img/20 by 20 orthogonal maze.png b/img/20 by 20 orthogonal maze.png
diff --git a/img/Atari-Breakout.gif b/img/Atari-Breakout.gif
diff --git a/img/Pong.gif b/img/Pong.gif
diff --git a/img/platonic-icosahedron.gif b/img/platonic-icosahedron.gif
diff --git a/img/platonic-octahedron.gif b/img/platonic-octahedron.gif
diff --git a/img/platonic-pyramid.gif b/img/platonic-pyramid.gif
diff --git a/index.html b/index.html
@@ -4,42 +4,79 @@
 <!-- ----------------------------------------------------------------- -->
 <!-- ----------------------------------------------------------------- -->
 <!-- ----------------------------------------------------------------- -->
+
 <head> <!-- header begins here -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="">
   <meta name="author" content="">
 
-  <link href="./css/style.css" rel="stylesheet">
-  <script type="text/javascript" src="./js/header-functions.js"></script>
-
-</head> <!-- header ends here -->
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-
-
-
-
-
-
-
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 
+	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 
+  <link href="./css/style.css" rel="stylesheet">
+  <script type="text/javascript" src="./js/header-functions.js"></script>
 
+  <style> body{background-color: rgb(19, 19, 114); color: white;} </style>
 
+  <title>Website Overview</title>
+</head> <!-- header ends here -->
 
 <!-- ---------------------------------------------------------------------------------- -->
 <!-- ---------------------------------------------------------------------------------- -->
 <!-- ---------------------------------------------------------------------------------- -->
-<body> <!-- body begins here -->
-
-
-  The quickest of brown foxes.
-
-
 
+<body> <!-- body begins here -->
 
+  <!-- Top Banner -->
+	<div class="Banner">
+    <h1 class="page-header"> Website Overview <br> <small class="page-header"> Here is a brief description of the Website! </small> </h1>
+  </div>
+
+
+  <!-- Paragraph and Image -->
+  <div class="row">
+    <div class="col-md-2"></div>
+    <div class="col-md-5" style="margin-top: 5vh;">
+      <p>
+        Hello! thank you for looking at my simple site, that I have assembled. I originally inttended to have a fully functional game similar to Atari breakout or Pong present, 
+        but after considerable trial and error, I found that out of my skill range. I believe I would be cabale if I had more time and did some more research into Javascript. 
+        Instead I will present the website as if the game was present, but it will be simply be replaced with an animation I created in CSS. This was fun to assemble, 
+        and a learning experience for sure. So have fun looking around!
+      </p>
+
+      <p style="padding: top 10px;">
+        In my time looking at classic games commonly ported into the Javascript language, I found a few Maze games, this is my reasoning for the image on the right. 
+        I feel that I could make this site as a tribute to creating games for practice, and how it may not be the main function of this language but thing is possible if you work hard at it.
+        I want that mindset to define my career, so leaving this here as a symbol to hardwork is significant to me, even though I struggled to implement, I won't abandon my idea simply 
+        because it was too hard.
+      </p>
+
+      <p>
+        Please go to Game Overview first!
+      </p>
+    </div>
+    <div class="col-md-5" style="margin-top: 5vh;">
+      <img src="./img/20 by 20 orthogonal maze.png" style="position: relative; scale: 150%; top: 7vh; left: 10vh;">
+    </div>
+  </div>
+
+
+
+  <!-- Bottom Buttons -->
+  <div class="row" style="margin-top: 10vh">
+    <div class="col-md-2"></div>
+    <div class="col-md-2">
+      <button onclick="window.location.href='./game.html';"> To Game! </button>
+    </div>
+    <div class="col-md-2"></div>
+    <div class="col-md-2"></div>
+    <div class="col-md-2">
+      <button onclick="window.location.href='./instructions.html';"> To Game Overview! </button>
+    </div>
+    <div class="col-md-2"></div>
+  </div>
   <!-- ====================================================== -->
   <!-- ====================================================== -->
   <footer>
@@ -50,6 +87,7 @@
   <!-- ====================================================== -->
 
 </body>
+
 <!-- ---------------------------------------------------------------------------------- -->
 <!-- ---------------------------------------------------------------------------------- -->
 <!-- ---------------------------------------------------------------------------------- -->