CS 351 Fall 2019 Homework 3

Getting started with HTML, CSS, and JavaScript

Dr. Greg M. Bernstein

Due Monday, September 16th, 2019 by 11:59PM, 50 points.

General Instructions

In this homework is to continue working with HTML, CSS, and JavaScript. In particular we will apply CSS text styling and the box model to some HTML pages that we will deploy to an external server. We will continue our review of the JavaScript language and dynamically create and manipulate content via the DOM.

In this homework you will start creating a website for a fictitious tour company of your own choosing. We will continue this “project” over a number of assignments where we will automate more aspects website creation.

Create and Use a new Branch hw3

We will create a new git branch called hw3 for use in this assignment. The branch you create must exactly match the one I’ve given you for you to receive any credit for this homework.

Prior to creating this new branch make sure your working directory is “clean”, i.e., consistent with the last commit you did when you turned in homework 2. Follow the procedures in GitHub for Classroom Use to create the new branch, i.e., git checkout -b hw3. Review the section on submission for using push with a new branch.

Use README.md for Answers

You will modify the README.md file to contain the answers to this homework.

Questions

Question 1. (10 pts)

(a) Base tour website

Create a project directory to hold all the files for this project across several assignments. Name this directory tourProject. Note that this is not a new repository, just a directory within your repository. Create four “outline” HTML files. One of these must be called index.html. You can use the empty minimum HTML file from the course website for this. The other three pages should have names that roughly describe their function for your fictitious club. For my Galactic Wind Tours company I’m going to start with an About.html, CustomerLogin.html',Tours.html, andNewsLetter.html`.

(b)

In the <head> make sure each page has an explanatory <title>

(c)

Add a <main> element and within it a <h1> element with an appropriate heading for the entire page. Add at least two <section>s containing <h2> level headings with some kind of content relevant to your club and the page. Do not be concerned that these make too much sense we need elements to practice our CSS on!

(d)

We need to navigate between all the pages in the site so create some kind of <nav> element with links to all the other pages. Put this <nav> right before the <main> tag. Hints: its okay for a page to link to itself so just create an <ul> list of links to all your pages inside the <nav>. Use relative URLs. Copy this element into all the files. Test that the links work in all pages. Give me a screen shot of the directory containing these web pages. Mine looks like this:

Directory of Pages
Directory of Pages

Question 2. (10 pts)

Apply CSS to the pages we created in Cascading Style Sheets

(a) External Style Sheet

Create an empty style sheet in the tourProject directory with the name tour.css. In practice you can actually name this anything you want. For this assignment I need to find it to grade it. Attach the style sheet to each of your pages via a <link> element, e.g., something like <link href="tour.css" rel="stylesheet">. In the club.css set the background color of the <body> and <main> element to two different colors and check that all pages are consistently styled. This is just a test to see that we have applied our stylesheet correctly. Put a screen shot here. Mine looks like:

Test Style
Test Style

(b) Text Styling

Now modify the main <h1> text to use a font different from the default, make the text size 3em and center it. For each section <h2> use a different font from the default and the <h1>, right justify the text, and use italic styling. Make sure this works consistently across all your pages. Take a screen shot of your result. I got something like:

Text Styling Example
Text Styling Example

Show your code here…

(c) Box Model I

Let’s add some space around things and get a feel for the difference between margin and padding. Add some margin (say 1-3 ems) to the body element. What effect did this have? Add left and right padding to the main element. What effect did it have? Show a screenshot. I get something like this:

Pad and margin
Pad and margin

Show the code to do this here.

(d) Box Model II

Add a light background color to your nav element. Notice how the element extends across the whole page. Let’s limit that by setting either the width or max-width property to 20em. Add a border all around the nav of any color, and thickness you like. Add any padding you want to the element. I get something like:

Width and Border
Width and Border

Show the code to do this here.

Question 3. (10 pts)

Deployment of web pages. Tools Putty only needed for Windows, you can use the ssh command line on Mac and Linux. I’ve put the basic login instructions from the department on Blackboard. Please try it early and come to me with any questions. FileZilla makes FTP transfer easy, available for Windows, Mac, Linux. Or you can use command line FTP.

The settings I used in Filezilla are shown below (use your own account information!):

Filezilla configuration
Filezilla configuration

(a) Login

Login to your CSUEB server account at csweb01.csueastbay.edu using Putty (on windows) or any other SSH tool (command line should work fine on Mac and Linux).

From the command line after you have logged in issue the following two commands and take a screen shot:

The first command sets permissions on Linux so that the Apache web server can read files in your public_html directory. The ls -la shows all files and their permissions.

I get:

Login and such
Login and such

(b) File Transfer and Testing

Using Filezilla or any other FTP transfer program transfer the entire directory of your clubProject to the public_html directory. Vist your website at: http://csweb01.csueastbay.edu/~qd7373/tourProject/

Where you should substitute your NetId for mine! Make sure your site works, in particular check for broken links and styling. Fix any issues.

Put the URL to your club site here.

Question 4. (10 pts)

A typical interview for a front end developer will have you modify a web page programmatically from the developers console. You are going to modify (in your local browser) the website: https://www.grotto-networking.com/patents.html which looks like:

Patents.png
Patents.png

in the following way: Every time the authors of a patent include both “Greg Bernstein” and “Young Lee” you will replace the names with the text “The Usual Suspects, YourNetID”, where you will use your NetID. In addition I want you to change the color of the font to red and choose another font face. You cannot directly edit the HTML, you must use JavaScript in the developers console. In fact you will give me your code to run in my developers console. I get something like:

How to do this? Here are some tips. In your working files separate from you club project create an empty “PageMod.js” to hold the JavaScript code you are developing. Examine the web page with the inspector tool (developers tools). Do the names of the authors appear in a particular element? Does that element have a class associated with it?

Use document.querySelectorAll(your-stuff-here) to get a list of all nodes that match the criteria that you determined. Save that list in a variable. Take a look at one element of that list to see if you got what you were looking for. This should be a span element that contains the authors names.

We are going to use the DOM’s Element interface and its [Node interface]https://developer.mozilla.org/en-US/docs/Web/API/Node). Element inherits from Node so supports all of the Node methods and properties.

Use the Node.textContent property to get the text (string) from the element. Then use the nice string includes() method to see if the names contain both “Bernstein” and “Lee”. If it does use the Element.innerHTML property to set the new content and use the Element.style property to set the styling.

Now you could use a for loop to go through all the elements in the node list that you obtained with the querySelectorAll call or even easier the node list supports the “forEach(your_function here)” method which will run your function against each element in the node list.

Show your code here. I should be able to just drop it into my developer console and run it.

Question 5. (10 pts)

A very common use of JavaScript and the DOM is to generate a portion of a page from a data set. In this problem you will generate a table of country freedom information based on information from Freedom House and converted to JavaScript form in the file freedomCountries.js. A nearly complete HTML page except for some of the code that you will add is given at HW3FreedomStarter.html. We will be using an HTML table to display the data. References: Table Basics, Table Element.

The general approach will be to supply the forEach method of the countryInfo array with a function that will create a table row DOM element, fill in its innerHTML and append it to the table body element (tbody).

You must translate the status information code (“F”, “NF”, “PF”) into its meaning. In the freedomCountries.js file there is a statusKey object to help. I’ve set up the basic outline of all this in the freedom HTML page. To rerun the code you just need to reload the page. Most of the variables are global so you can easily look at them via the developers console. Note that you can also try things on the developers console. This is also where you will see helpful error messages. I have styled the page so you only need to change the HTML to put in your NetId.

Sort the information from highest rated country to lowest. Use the Array.sort() method with a comparison function.

Show a screen shot here and the code of your createRow(country) function. My output looks like:

Freedom Page
Freedom Page