Added Homework 7 Files
++ Added Homework 7 HTML/CSS/JS ++ Added Testing Files of various sorts.
This commit is contained in:
parent
44a7e9a792
commit
5328bed90d
9 changed files with 363 additions and 0 deletions
43
cs212/homework/7/index.html
Normal file
43
cs212/homework/7/index.html
Normal file
|
|
@ -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>
|
||||
24
cs212/homework/7/script.js
Normal file
24
cs212/homework/7/script.js
Normal file
|
|
@ -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);
|
||||
}
|
||||
94
cs212/homework/7/styles.css
Normal file
94
cs212/homework/7/styles.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
12
cs212/testing/digital-clock/index.html
Normal file
12
cs212/testing/digital-clock/index.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset = "utf-8">
|
||||
<title> Digital Clock Using JavaScript </title>
|
||||
<link rel = "stylesheet" href = "styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id = "digital-clock"> </div>
|
||||
<script src = "script.js"> </script>
|
||||
</body>
|
||||
</html>
|
||||
56
cs212/testing/digital-clock/script.js
Normal file
56
cs212/testing/digital-clock/script.js
Normal file
|
|
@ -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();
|
||||
20
cs212/testing/digital-clock/styles.css
Normal file
20
cs212/testing/digital-clock/styles.css
Normal file
|
|
@ -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
|
||||
60
cs212/testing/html/q1.html
Normal file
60
cs212/testing/html/q1.html
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Tech Company's Listing</h1>
|
||||
|
||||
<table id="cssQuestion">
|
||||
<tr>
|
||||
<th>Company</th>
|
||||
<th>CEO</th>
|
||||
<th>Country</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Apple</td>
|
||||
<td>Tim Cook</td>
|
||||
<td>USA</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Google</td>
|
||||
<td>Sundar Pichai</td>
|
||||
<td>USA</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Netflix</td>
|
||||
<td>Reed Hastings</td>
|
||||
<td>UK</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zoho</td>
|
||||
<td>Sridhar Vembu</td>
|
||||
<td>India</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>TCS</td>
|
||||
<td>Rajesh Gopinath</td>
|
||||
<td>India</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Microsoft</td>
|
||||
<td>Satya Nadella</td>
|
||||
<td>USA</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Facebook</td>
|
||||
<td>Mark Zuckerberg</td>
|
||||
<td>USA</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Twitter</td>
|
||||
<td>Jack Dorsey</td>
|
||||
<td>USA</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
30
cs212/testing/html/q2.html
Normal file
30
cs212/testing/html/q2.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Ordered HTML list of Richest people in the world</h1>
|
||||
<ol>
|
||||
<li>Jeff Bezos</li>
|
||||
<li>Elon Musk</li>
|
||||
<li>Bernard Arnault</li>
|
||||
<li>Bill Gates</li>
|
||||
<li>Mark Zuckerberg</li>
|
||||
</ol>
|
||||
<h1>Unordered HTML list of Web technologies</h1>
|
||||
<ul>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Vanilla JS</li>
|
||||
<li>Node.js</li>
|
||||
<li>React JS</li>
|
||||
<li>Express.js</li>
|
||||
<li>Next.js</li>
|
||||
<li>Vue.js</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
24
cs212/testing/html/style.css
Normal file
24
cs212/testing/html/style.css
Normal file
|
|
@ -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
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue