initial commit

raphaeloh96 · Jun 30, 2020 · 1f9bf99 · 1f9bf99
commit 1f9bf99
Show file tree

Hide file tree

Showing 19 changed files with 221 additions and 0 deletions.
diff --git a/cse134-hw1/README.md b/cse134-hw1/README.md
@@ -0,0 +1,3 @@
+# CSE134B-SS20-HW1
+# Name:
+# PID:
diff --git a/cse134-hw1/fonts/Literata/static/Literata-Bold.ttf b/cse134-hw1/fonts/Literata/static/Literata-Bold.ttf
diff --git a/cse134-hw1/fonts/Literata/static/Literata-BoldItalic.ttf b/cse134-hw1/fonts/Literata/static/Literata-BoldItalic.ttf
diff --git a/cse134-hw1/fonts/Literata/static/Literata-Italic.ttf b/cse134-hw1/fonts/Literata/static/Literata-Italic.ttf
diff --git a/cse134-hw1/fonts/Literata/static/Literata-Medium.ttf b/cse134-hw1/fonts/Literata/static/Literata-Medium.ttf
diff --git a/cse134-hw1/fonts/Literata/static/Literata-MediumItalic.ttf b/cse134-hw1/fonts/Literata/static/Literata-MediumItalic.ttf
diff --git a/cse134-hw1/fonts/Literata/static/Literata-Regular.ttf b/cse134-hw1/fonts/Literata/static/Literata-Regular.ttf
diff --git a/cse134-hw1/fonts/Literata/static/Literata-SemiBold.ttf b/cse134-hw1/fonts/Literata/static/Literata-SemiBold.ttf
diff --git a/cse134-hw1/fonts/Literata/static/Literata-SemiBoldItalic.ttf b/cse134-hw1/fonts/Literata/static/Literata-SemiBoldItalic.ttf
diff --git a/cse134-hw1/images/bear.png b/cse134-hw1/images/bear.png
diff --git a/cse134-hw1/images/bg_homepage.jpg b/cse134-hw1/images/bg_homepage.jpg
diff --git a/cse134-hw1/images/favicon.ico b/cse134-hw1/images/favicon.ico
diff --git a/cse134-hw1/images/triton.jpg b/cse134-hw1/images/triton.jpg
diff --git a/cse134-hw1/images/ucsd.gif b/cse134-hw1/images/ucsd.gif
diff --git a/cse134-hw1/index.html b/cse134-hw1/index.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<meta name="description" content="Simple demo Web page for CSE 134B" />
+	<meta name="keywords" content="HTML, CSS, JavaScript" />
+	<meta name="author" content="" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>CSE 134B Homework 1 Website</title>
+	<link href="images/favicon.ico" rel="icon" />
+	<link href="styles/main.css" rel="stylesheet" />
+	<script>
+		window.addEventListener('load', function () {
+			let time = window.performance.timing,
+				complete = time.domComplete - time.domLoading;
+			document.getElementById('page-load-info').innerHTML = `<strong>Page Loaded in ${parseInt(complete)}ms
+			 on ${new Date().toLocaleString("en-US")}</strong>`;
+		});
+	</script>
+</head>
+
+<body>
+	<header>
+		<h1>CSE 134B Homework 1 Website</h1>
+
+		<section id="user-info-component">
+			<div id="user-info" style="display: none;">
+				<output id="name-info">&nbsp;</output>
+				<br />
+				<output id="major-info">&nbsp;</output>
+				<hr />
+				<br />
+				<!-- Inline Javascript Handlers used here for demonstration only -->
+				<section class="intro-text">
+					<label>My name is <input id="name-input" type="text" autocomplete="name" autofocus maxlength="30" placeholder="Your Name"></label>
+					<br />
+					<label>My major is <input id="major-input" type="text" maxlength="30" placeholder="Your Major"></label>
+				</section>
+
+				<button onclick="window.update();">Update</button>
+			</div>
+			<script>
+				document.getElementById('user-info').style.display = 'block';
+			</script>
+			<noscript class="error">Error: JavaScript is disabled or blocked.</noscript>
+		</section>
+
+
+		<section id="page-load-component">
+			<div id="load-info" style="display: none;">
+				<output id="page-load-info">Measuring...</output>
+			</div>
+			<script>
+				document.getElementById('load-info').style.display = 'block';
+			</script>
+			<noscript class="error">Error: JavaScript required for page timing measurement </noscript>
+		</section>
+	</header>
+
+	<main>
+		<h2>UCSD Images</h2>
+		<section class="img">
+			<img src="images/bear.png" alt="Warren Bear" height="430" width="700" />
+			<img src="images/triton.jpg" alt="Triton" height="430" width="700" />
+			<a href="https://ucsd.edu" target="_blank"><img src="images/ucsd.gif" alt="UCSD" height="177"
+				width="700"></a>
+			<br />
+			<section id="links">
+				<h2>Useful Links</h2>
+				<ul>
+					<li><a href="http://tritonlink.ucsd.edu">TritonLink</a></li>
+					<li><a href="http://canvas.ucsd.edu">Canvas</a></li>
+					<li><a href="http://w3.org">W3</a></li>
+				</ul>
+			</section>
+
+		<section class="video">
+			<h2>UCSD Promo Video</h2>
+			<video controls height="393" width="700">
+				<source src="videos/videoplayback.mp4" type="video/mp4" />
+				<div class="error">Your browser does not support the video tag.</div>
+			</video>
+		</section>
+			<br />
+
+		</section>
+	</main>
+
+	<footer>
+		<hr/>
+		<p>💯This page was made with &hearts; by YOUR NAME HERE 💯</p>
+	</footer>
+	<script type="module">
+		import { update } from './scripts/main.js';
+		window.update = update;
+	</script>
+	<script nomodule src="scripts/main-es5.js"></script>
+</body>
+
+</html>
diff --git a/cse134-hw1/scripts/main-es5.js b/cse134-hw1/scripts/main-es5.js
@@ -0,0 +1,19 @@
+/* main-es5.js */
+
+// look this up :)
+'use strict';
+
+function updateName() {
+    var name = document.getElementById('name-input').value;
+    document.getElementById('author-info').innerHTML = '<strong>Author:</strong> ' + name;
+  }
+
+  function updateMajor() {
+    var name = document.getElementById('major-input').value;
+    document.getElementById('major-info').innerHTML = '<strong>Major:</strong> ' + name;
+  }
+
+function update(){
+    updateName();
+    updateMajor();
+  }
diff --git a/cse134-hw1/scripts/main.js b/cse134-hw1/scripts/main.js
@@ -0,0 +1,24 @@
+/* main.js */
+
+// no need to 'use strict' as it is implied in modules
+// look up 'use strict' :) 
+
+let $ = (selector) => document.querySelector(selector);
+
+
+function _updateName() {
+  const name = $('#name-input').value;
+  $('#name-info').innerHTML = `<strong>Author:</strong>  ${name}`;
+}
+
+function _updateMajor() {
+  const major = $('#major-input').value;
+  $('#major-info').innerHTML = `<strong>Major:</strong>  ${major}`;
+}
+
+function update(){
+  _updateName();
+  _updateMajor();
+}
+
+export {update};
diff --git a/cse134-hw1/styles/main.css b/cse134-hw1/styles/main.css
@@ -0,0 +1,74 @@
+/* main.css */
+
+html,
+body {
+  background-color: lightblue;
+}
+@font-face {
+  font-family: "Literata";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../fonts/Literata/static/Literata-Regular.ttf") format("truetype");
+}
+@font-face {
+  font-family: "Literata";
+  font-style: bold;
+  font-weight: 400;
+  src: url("../fonts/Literata/static/Literata-Bold.ttf") format("truetype");
+}
+@font-face {
+  font-family: "Literata";
+  font-style: italic;
+  font-weight: 400;
+  src: url("../fonts/Literata/static/Literata-Italic.ttf") format("truetype");
+}
+
+/****** header ******/
+header {
+  background-image: url("../images/bg_homepage.jpg");
+  background-color: #fcfcdc;
+  text-align: center;
+  padding: 20px 0;
+  font-family: "Literata", serif;
+  color: white;
+}
+
+header hr {
+  width: 30%;
+}
+
+/****** main content ******/
+img{
+  margin: 10px;
+}
+
+main {
+  text-align: center;
+}
+
+ul {
+  background-color: white;
+  border: 8px double black;
+  border-radius: 4px;
+  margin: 0 auto;
+  padding: 20px;
+  text-align: left;
+  width: 200px;
+}
+
+ul li {
+  margin: 5px;
+}
+
+a:link { color: #3366BB; }
+a:visited { color: #663366 }
+a:visited:hover { color: #0b0080; }
+a:hover { color: gray; }
+a:active { background-color: yellow; border: 4px solid red;}
+
+
+/****** footer ******/
+footer {
+  font-size: small;
+  text-align: center;
+}
diff --git a/cse134-hw1/videos/videoplayback.mp4 b/cse134-hw1/videos/videoplayback.mp4