Added Homework 7 Files

++ Added Homework 7 HTML/CSS/JS ++ Added Testing Files of various sorts.
2023-03-21 01:27:21 -07:00 · 2023-03-21 01:27:21 -07:00 · 5328bed90d
commit 5328bed90d
parent 44a7e9a792
9 changed files with 363 additions and 0 deletions
--- a/cs212/homework/7/index.html
+++ b/cs212/homework/7/index.html
@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Homework 7 - Do Something!</title>
+        <style>
+          @import url("/cs212/homework/7/styles.css");
+        </style>
+    </head>
+    <body>
+      <div class="mainPage">
+        <header>
+          Homework 7 Main Page
+        </header>
+        <div class="menuBar">
+          <ul>
+            <li><a href="/">Home Page</a></li>
+            <li><a href="/cs212/homework/2.html">Homework 2</a></li>
+            <li><a href="/cs212/homework/3.html">Homework 3</a></li>
+            <li><a href="/cs212/homework/4/">Homework 4</a></li>
+            <li><a href="/cs212/homework/7/">Homework 7</a></li>
+          </ul>
+        </div>
+        <main>
+          <div id="standardClock" class="clock" style="text-align: center;" onclick="currentTime()">Click me to reveal time!</div>
+        </main>
+        <div class="adBar">
+          <a href="https://www.amazon.com/Anker-PowerCore-Technology-High-Capacity-Compatible/dp/B07S829LBX/ref=sr_1_3?crid=CZRGH6QGGLWQ"><img src="https://m.media-amazon.com/images/I/71ytBCYHNkL._AC_SL1500_.jpg" alt="Anker: Power YOUR world" width=250 height=293></a>
+          <br>
+          <body>Anker Power Bank: Power Your World</body>
+        </div>
+        <footer>
+          A small insight into the script I had trouble writing:
+          <br>
+          Well, when trying to make this clock, I kept trying to not reference the placeholder by ID, but by class, which is why the CSS worked, but not the actual script.
+          <br>
+          Had I been paying attention (and also not soooo tired), this mistake could have been easily avoided.
+          <br>
+          Otherwise, the script wasn't the bad part, the troubleshooting of my problems was...
+        </footer>
+      </div>
+      <script type="text/javascript" src="/cs212/homework/7/script.js"></script>
+    </body>
+</html>
--- a/cs212/homework/7/script.js
+++ b/cs212/homework/7/script.js
@ -0,0 +1,24 @@
+function currentTime() {
+  let date = new Date();
+  let hrs = date.getHours();
+  let min = date.getMinutes();
+  let sec = date.getSeconds();
+  let meridiem = "AM";
+
+  if(hrs === 0){
+      hrs = 12;
+  }
+  if(hrs > 12){
+      hrs = hrs - 12;
+      meridiem = "PM";
+   }
+
+   hrs = (hrs < 10) ? "0" + hrs : hrs;
+   min = (min < 10) ? "0" + min : min;
+   sec = (sec < 10) ? "0" + sec : sec;
+
+   let time = hrs + ":" + min + ":" + sec + " " + meridiem;
+
+  document.getElementById("standardClock").innerText = time;
+  let t = setTimeout(function(){ currentTime() }, 1000);
+}
--- a/cs212/homework/7/styles.css
+++ b/cs212/homework/7/styles.css
@ -0,0 +1,94 @@
+/* Ubuntu - cyrillic-ext */
+@font-face {
+  font-family: 'Ubuntu';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKcg72j00.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* Ubuntu - cyrillic */
+@font-face {
+  font-family: 'Ubuntu';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKew72j00.woff2) format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* Ubuntu - greek-ext */
+@font-face {
+  font-family: 'Ubuntu';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKcw72j00.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* Ubuntu - greek */
+@font-face {
+  font-family: 'Ubuntu';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKfA72j00.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* Ubuntu - latin-ext */
+@font-face {
+  font-family: 'Ubuntu';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKcQ72j00.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* Ubuntu - latin */
+@font-face {
+  font-family: 'Ubuntu';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKfw72.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* CowboyBebopFontStyle */
+@font-face {
+    font-family: 'Bebop';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('/fonts/CheltenhamStdBoldCondIt.woff') format('woff');
+}
+/* CSS Styles for headers 1-4 and paragraph tags. */
+h1 {font-family: 'Bebop', serif;}
+h2 {font-family: 'Bebop', serif;}
+h3 {font-family: 'Bebop', serif;}
+h4 {font-family: 'Ubuntu', sans-serif;}
+p {font-family: 'Ubuntu', sans-serif; padding:0.3em 1em;}
+/* CSS Styling for the ID sector */
+#sector {
+  text-align: center;
+  color: #003466;
+}
+.mainPage {
+  display: grid;
+  grid-template: auto 1fr auto / auto 1fr auto;
+}
+header {
+  padding: 2rem;
+  grid-column: 1 / 4;
+}
+.menuBar {
+  grid-column: 1 / 2;
+}
+main {
+  grid-column: 2 / 3;
+}
+.adBar {
+  grid-column: 3 / 4;
+}
+footer {
+  padding: 1rem;
+  grid-column: 1 / 4;
+}