From 5328bed90ddb76d269082eb981254d67541e7d71 Mon Sep 17 00:00:00 2001 From: cdez Date: Tue, 21 Mar 2023 01:27:21 -0700 Subject: [PATCH] Added Homework 7 Files ++ Added Homework 7 HTML/CSS/JS ++ Added Testing Files of various sorts. --- cs212/homework/7/index.html | 43 ++++++++++++ cs212/homework/7/script.js | 24 +++++++ cs212/homework/7/styles.css | 94 ++++++++++++++++++++++++++ cs212/testing/digital-clock/index.html | 12 ++++ cs212/testing/digital-clock/script.js | 56 +++++++++++++++ cs212/testing/digital-clock/styles.css | 20 ++++++ cs212/testing/html/q1.html | 60 ++++++++++++++++ cs212/testing/html/q2.html | 30 ++++++++ cs212/testing/html/style.css | 24 +++++++ 9 files changed, 363 insertions(+) create mode 100644 cs212/homework/7/index.html create mode 100644 cs212/homework/7/script.js create mode 100644 cs212/homework/7/styles.css create mode 100644 cs212/testing/digital-clock/index.html create mode 100644 cs212/testing/digital-clock/script.js create mode 100644 cs212/testing/digital-clock/styles.css create mode 100644 cs212/testing/html/q1.html create mode 100644 cs212/testing/html/q2.html create mode 100644 cs212/testing/html/style.css diff --git a/cs212/homework/7/index.html b/cs212/homework/7/index.html new file mode 100644 index 0000000..fd86cdc --- /dev/null +++ b/cs212/homework/7/index.html @@ -0,0 +1,43 @@ + + + + Homework 7 - Do Something! + + + +
+
+ Homework 7 Main Page +
+
+ +
+
+
Click me to reveal time!
+
+
+ Anker: Power YOUR world +
+ Anker Power Bank: Power Your World +
+
+ A small insight into the script I had trouble writing: +
+ 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. +
+ Had I been paying attention (and also not soooo tired), this mistake could have been easily avoided. +
+ Otherwise, the script wasn't the bad part, the troubleshooting of my problems was... +
+
+ + + diff --git a/cs212/homework/7/script.js b/cs212/homework/7/script.js new file mode 100644 index 0000000..25893a8 --- /dev/null +++ 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); +} diff --git a/cs212/homework/7/styles.css b/cs212/homework/7/styles.css new file mode 100644 index 0000000..fb7e936 --- /dev/null +++ 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; +} diff --git a/cs212/testing/digital-clock/index.html b/cs212/testing/digital-clock/index.html new file mode 100644 index 0000000..0ac2e2a --- /dev/null +++ b/cs212/testing/digital-clock/index.html @@ -0,0 +1,12 @@ + + + + + Digital Clock Using JavaScript + + + +
+ + + diff --git a/cs212/testing/digital-clock/script.js b/cs212/testing/digital-clock/script.js new file mode 100644 index 0000000..bea885e --- /dev/null +++ b/cs212/testing/digital-clock/script.js @@ -0,0 +1,56 @@ +function Time() { + + // Creating object of the Date class + var date = new Date(); + + // Get current hour + var hour = date.getHours(); + // Get current minute + var minute = date.getMinutes(); + // Get current second + var second = date.getSeconds(); + + // Variable to store AM / PM + var period = ""; + + // Assigning AM / PM according to current hour + if (hour >= 12) { + period = "PM"; + } else { + period = "AM"; + } + + // Converting the hour in 12-hour format + if (hour == 0) { + hour = 12; + } else { + if (hour > 12) { + hour = hour - 12; + } + } + + // Updating hour, minute, and second + // if they are less than 10 + hour = update(hour); + minute = update(minute); + second = update(second); + + // Adding time elements to the div + document.getElementById("digital-clock").innerText = hour + " : " + minute + " : " + second + " " + period; + + // Set Timer to 1 sec (1000 ms) + setTimeout(Time, 1000); +} + +// Function to update time elements if they are less than 10 +// Append 0 before time elements if they are less than 10 +function update(t) { + if (t < 10) { + return "0" + t; + } + else { + return t; + } +} + +Time(); \ No newline at end of file diff --git a/cs212/testing/digital-clock/styles.css b/cs212/testing/digital-clock/styles.css new file mode 100644 index 0000000..e8380b3 --- /dev/null +++ b/cs212/testing/digital-clock/styles.css @@ -0,0 +1,20 @@ +/* Importing Open Sans Condensed Google font */ +@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap'); + + +#digital-clock { + background-color: #66ffff; + width: 35%; + margin: auto; + padding-top: 50px; + padding-bottom: 50px; + font-family: 'Open Sans Condensed', sans-serif; + font-size: 64px; + text-align: center; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} +Footer +© 2023 GitHub, Inc. +Footer navigation +Terms +Priv \ No newline at end of file diff --git a/cs212/testing/html/q1.html b/cs212/testing/html/q1.html new file mode 100644 index 0000000..e7aeea7 --- /dev/null +++ b/cs212/testing/html/q1.html @@ -0,0 +1,60 @@ + + + + + + + + +

Tech Company's Listing

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CompanyCEOCountry
AppleTim CookUSA
GoogleSundar PichaiUSA
NetflixReed HastingsUK
ZohoSridhar VembuIndia
TCSRajesh GopinathIndia
MicrosoftSatya NadellaUSA
FacebookMark ZuckerbergUSA
TwitterJack DorseyUSA
+ + + diff --git a/cs212/testing/html/q2.html b/cs212/testing/html/q2.html new file mode 100644 index 0000000..d2b2c1a --- /dev/null +++ b/cs212/testing/html/q2.html @@ -0,0 +1,30 @@ + + + + + + + + +

Ordered HTML list of Richest people in the world

+
    +
  1. Jeff Bezos
    2. +
  2. Elon Musk
    3. +
  3. Bernard Arnault
    4. +
  4. Bill Gates
    5. +
  5. Mark Zuckerberg
    6. +
+

Unordered HTML list of Web technologies

+ + + + diff --git a/cs212/testing/html/style.css b/cs212/testing/html/style.css new file mode 100644 index 0000000..934cc74 --- /dev/null +++ b/cs212/testing/html/style.css @@ -0,0 +1,24 @@ +table +{ + border: 1px solid #ddd; + padding: 8px; + border-collapse: collapse; + width: 100%; +} +th +{ + border: 1px solid #ddd; + padding-top: 12px; + padding-bottom: 12px; + text-align: left; + color: royalblue; + background-color: skyblue; +} +td +{ + border: 1px solid #ddd; +} +tr:nth-child(even) +{ + background-color: #f2f2f2 +}