First commit
This commit is contained in:
BIN
Lab 2/JMU-Logo-RGB-horiz-purple.png
Executable file
BIN
Lab 2/JMU-Logo-RGB-horiz-purple.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
109
Lab 2/index.html
Executable file
109
Lab 2/index.html
Executable file
@@ -0,0 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="author" content="Nicholas Tamassia">
|
||||
<meta name="description" content="Lab 2 submission">
|
||||
<title>CS 343 Lab 2</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
let header1 = 'Course Information', header2 = 'Detailed Course Objectives', header3 = 'Course Catalog Description'
|
||||
let showFooter = true
|
||||
</script>
|
||||
|
||||
<header>
|
||||
<h1>CS 343: Application Development</h1>
|
||||
<h2>Fall 2023</h2>
|
||||
<blockquote cite="https://uxdworld.com">
|
||||
<p>"A user interface is like a joke. If you have to explain it, it’s not that good."</p>
|
||||
<p>- Martin LeBlanc</p>
|
||||
</blockquote>
|
||||
</header>
|
||||
|
||||
<hr>
|
||||
|
||||
<section>
|
||||
<h3 id="header1"></h3>
|
||||
<p>
|
||||
Learning to work with the tools and technologies that are used to build and
|
||||
create web sites is both empowering and fun. With these tools, you can build
|
||||
your own web sites and customize the experience of those you visit. You can
|
||||
also create interactive applications for storing and manipulating personal or
|
||||
enterprise data. And you can dynamically generate images and graphics to help
|
||||
visualize data sets.
|
||||
</p>
|
||||
<p>
|
||||
The goal of this course is to explore these technologies - HTML, CSS, and
|
||||
Javascript - that define the structure, presentation, and interactions for
|
||||
modern web development. In addition to covering the basics of how to use these
|
||||
tools, we will explore guidelines to ensure the sites we create are accessible
|
||||
for a variety of users, including users with disabilities. After completing
|
||||
this course, you will have a solid foundation to continue learning more
|
||||
advanced web development techniques.
|
||||
</p>
|
||||
<ul>
|
||||
<li><strong>Website: </strong><a>https://w3.cs.jmu.edu/kirkpams/343</a></li>
|
||||
<li><strong>Time: </strong>M/W/F 9:10 - 10:00 AM</li>
|
||||
<li><strong>Location: </strong>King Hall 243</li>
|
||||
<li><strong>Textbook: </strong><cite>Fundamentals of Web Development, 3rd Edition</cite></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<section>
|
||||
<h3 id="header2"></h3>
|
||||
<p>
|
||||
Following the successful completion of this course, students will be able to:
|
||||
</p>
|
||||
<ol type="1">
|
||||
<li>Summarize the key steps and processes for retrieving and displaying a web page.</li>
|
||||
<li>Structure text documents as HTML and publish them on a server.</li>
|
||||
<li>Apply accessibility standards to web documents.</li>
|
||||
<li>Create and adapt CSS style sheets for consistent web site presentation and styling.</li>
|
||||
<li>Use a web framework to create a modern, responsive web site.</li>
|
||||
<li>Generate HTML content dynamically with Javascript.</li>
|
||||
<li>Create handlers to detect and respond to user input events.</li>
|
||||
<li>Store and retrieve data in client-side storage.</li>
|
||||
<li>Build images dynamically using provided data.</li>
|
||||
<li>Learn to consult a web framework documentation and tutorials for additional help.</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<section>
|
||||
<h3 id="header3"></h3>
|
||||
<p>
|
||||
Projects or topics in computer science which are of interest to the lower
|
||||
division student. May be repeated for credit when course content changes.
|
||||
Topics may vary. Prerequisite: Fully admitted Computer Science majors or
|
||||
minors only and students should consult the instructor prior to enrolling
|
||||
for the course.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<footer id="footer"></footer>
|
||||
|
||||
<script>
|
||||
document.querySelector('#header1').innerText = header1
|
||||
document.querySelector('#header2').innerText = header2
|
||||
document.querySelector('#header3').innerText = header3
|
||||
|
||||
const footer = document.querySelector('#footer')
|
||||
|
||||
if (showFooter) {
|
||||
footer.innerHTML = '<img src="./JMU-Logo-RGB-horiz-purple.png" alt="James Madison University logo in purple" />'
|
||||
} else {
|
||||
footer.innerText = 'JMU logo is not shown'
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
104
Lab 2/lab2.txt
Executable file
104
Lab 2/lab2.txt
Executable file
@@ -0,0 +1,104 @@
|
||||
# CONVERT # LINES TO COMMENTS (DELETE THIS ONE AND THE HORIZONTAL LINES)
|
||||
|
||||
# Create an HTML header using the author (your name), description
|
||||
# ("Lab 2 submission"), and charset ("UTF-8") meta tags. Add a title of
|
||||
# "CS 343 Lab 2".
|
||||
|
||||
# Define 4 JavaScript variables here:
|
||||
# One is a Boolean that controls whether or not the footer image is shown.
|
||||
# The Boolean MUST be named showFooter for testing purposes.
|
||||
# The other three are the level-3 headings, including both the <h3> tag
|
||||
# and the associated text. The names are not important.
|
||||
|
||||
# Wrap the title, subtitle, and blockquote inside a <header> element
|
||||
|
||||
# Page title and subtitle (should both be bigger than section headers)
|
||||
CS 343: Application Development
|
||||
Fall 2023
|
||||
|
||||
# Block quotation. Use an attribute to add the citation "https://uxdworld.com".
|
||||
# The quote and the name should be two paragraphs.
|
||||
"A user interface is like a joke. If you have to explain it, it’s not that good."
|
||||
- Martin LeBlanc
|
||||
|
||||
# End of the <header>
|
||||
|
||||
|
||||
# HORIZONTAL LINE
|
||||
|
||||
# Section header - MUST BE WRITTEN BY JAVASCRIPT
|
||||
Course Information
|
||||
|
||||
# Two separate paragraphs
|
||||
Learning to work with the tools and technologies that are used to build and
|
||||
create web sites is both empowering and fun. With these tools, you can build
|
||||
your own web sites and customize the experience of those you visit. You can
|
||||
also create interactive applications for storing and manipulating personal or
|
||||
enterprise data. And you can dynamically generate images and graphics to help
|
||||
visualize data sets.
|
||||
|
||||
The goal of this course is to explore these technologies - HTML, CSS, and
|
||||
Javascript - that define the structure, presentation, and interactions for
|
||||
modern web development. In addition to covering the basics of how to use these
|
||||
tools, we will explore guidelines to ensure the sites we create are accessible
|
||||
for a variety of users, including users with disabilities. After completing
|
||||
this course, you will have a solid foundation to continue learning more
|
||||
advanced web development techniques.
|
||||
|
||||
# Make this a bullet-point list. Format the text as shown in the sample
|
||||
# solution image. Note that <b> is NOT allowed for bold text. For the book
|
||||
# title, use the <cite> tag to mark it as a citation.
|
||||
|
||||
* Website: https://w3.cs.jmu.edu/kirkpams/343
|
||||
* Time: M/W/F 9:10 - 10:00 AM
|
||||
* Location: King Hall 243
|
||||
* Textbook: Fundamentals of Web Development, 3rd Edition
|
||||
|
||||
|
||||
# HORIZONTAL LINE
|
||||
|
||||
# Section header - MUST BE WRITTEN BY JAVASCRIPT
|
||||
Detailed Course Objectives
|
||||
|
||||
# Paragraph
|
||||
Following the successful completion of this course, students will be able to:
|
||||
|
||||
# Make this a numbered list and do NOT hard-code the numbers
|
||||
1. Summarize the key steps and processes for retrieving and displaying a web page.
|
||||
2. Structure text documents as HTML and publish them on a server.
|
||||
3. Apply accessibility standards to web documents.
|
||||
4. Create and adapt CSS style sheets for consistent web site presentation and styling.
|
||||
5. Use a web framework to create a modern, responsive web site.
|
||||
6. Generate HTML content dynamically with Javascript.
|
||||
7. Create handlers to detect and respond to user input events.
|
||||
8. Store and retrieve data in client-side storage.
|
||||
9. Build images dynamically using provided data.
|
||||
10. Learn to consult a web framework documentation and tutorials for additional help.
|
||||
|
||||
|
||||
# HORIZONTAL LINE
|
||||
|
||||
# Section header - MUST BE WRITTEN BY JAVASCRIPT
|
||||
Course Catalog Description
|
||||
|
||||
# Paragraph
|
||||
Projects or topics in computer science which are of interest to the lower
|
||||
division student. May be repeated for credit when course content changes.
|
||||
Topics may vary. Prerequisite: Fully admitted Computer Science majors or
|
||||
minors only and students should consult the instructor prior to enrolling
|
||||
for the course.
|
||||
|
||||
# HORIZONTAL LINE
|
||||
|
||||
# Wrap the following image inside a <footer> element
|
||||
|
||||
# If the Boolean variable at the top is set to tru:
|
||||
|
||||
# Embed the JMU-Logo-RGB-horiz-purple.png image. Add the following text as its
|
||||
# description: "James Madison University logo in purple"
|
||||
|
||||
# Otherwise:
|
||||
|
||||
# Show the text "JMU logo is not shown"
|
||||
|
||||
# End of the <footer>
|
||||
Reference in New Issue
Block a user