CS 351 Spring 2020 Homework 3

HTML images, CSS, JS DOM, and Deployment

Dr. Greg M. Bernstein

Due Friday, February 14th, 2020 by 11:59PM, 50 points.

General Instructions

In this homework is to continue working with HTML, CSS, and JavaScript. In particular we will bring in images and emojis to our club site 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.

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) {.Question} Images and Emojis

(a) Images

Add at least two images to your club website. One must be on your “home” page (index.html). Make sure your image is properly sized on the webpage, and that the image file itself is under 500KB.

List the pages where you put the images here. Take a screen shot showing part of a page with an image on it and include it here. Here is an example from my club site:

Image on web page
Image on web page

(b) Emojis

Add a least two emojis to your club website via the character code method used in the class slides (and not via images, png, or SVG files).

Indicate the emojis you used here along with their character codes. Take a screen shot of part of a page showing at least one of the emojis that you used. My screen shot looks like:

Emojis on web page
Emojis on web page

Question 2. (10 pts) {.Question} Server Deployment

Deployment of web pages. I’ve put the basic login instructions from the department on Blackboard. Please try it early and come to me with any questions. You may use any FTP client you want to transfer files from your computer to your account on the server. I’ve used FileZilla which available for Windows, Mac, Linux. The settings I used in Filezilla are shown below and should apply to other FTP clients (use your own account information!):

Filezilla configuration
Filezilla configuration

(a) File Transfer

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! Take a screenshot showing you club’s home page and the URL in the browser window. Mine looks like:

Deployed web page
Deployed web page

(b) Testing

Test all the links (pages) and make sure your site works, in particular check for broken links, missing images, and styling. Fix any issues.

Put the URL to your club site here.

Question 3. (10 pts) {.Question} JavaScript DOM and Arrays

We are going to be using data on states in the US from Civil Services. I’ve prepared an HTML file and JavaScript data file for you to use in problems 3-5. You will need to look into these files to see the structure of the HTML and the structure of the data. You are only allowed to add code to the script tag you are not allowed to change the HTML! Put these in your repo at the highest level, i.e., my repos directory structure looks like:

Directory Structure
Directory Structure

(a)

Using JavaScript and the DOM only in the add a title to the page (including your netid) and author information to the <h2 id="Author">. Show your JavaScript code here.

(b) State Count and Total US Population

Using array methods and or properties (and NO loops!) compute and set the number of states in the <h3 id="Number"> element and the total population in the <h3 id="TotalPop">. Show your JavaScript code here.

(c) 5 Most Populous and Least Populous States

Using array methods and or properties (and NO loops!) create lists of the 5 most and least populous states. Show your code here.

Notes and Hints: In all the above problems you need to figure out how to “select” the DOM element from the page so you can modify it. Try first figuring this out on the developers console. Part (c) involves a slight less trivial selector. Think about what array methods to use and what callback (compare, reduce) functions you might use. Think about after sorting how to get the 5 most/least without using a loop. A slightly styled screenshot (you don’t need the styling) after finishing this problem looks like:

Screen Shot with some styling
Screen Shot with some styling

Question 4. (10 pts) {.Question} HTML Table Generation

HTML tables are a very popular way to display data. See MDN Tables Tutorials and MDN Table Reference. You will be adding table row elements <tr> containing table data (column data) <td>.

(a) Table sorted by State Name

In <section id="AlphaName"> you will add table rows to the <tbody element containing: state name, population, and nickname with the rows sorted by state name.

Show your JavaScript code here (No Loops!)

(b) Table sorted by State Capital Name

In <section id="AlphaCapital"> you will add table rows to the <tbody element containing: capital city name, state name, and admission date with the rows sorted by state capital name.

Show your JavaScript code here (No Loops!)

(c) Create states.css file

Create a states.css file and add the following rules to it (we’ll learn about flexbox in a couple weeks!)

At this point my page looks kind of like:

Min. styling
Min. styling

Question 5. (10 pts) {.Question} General & Table Styling

Style the states page by adding rules to the external states.css file. See MDN Table Styling for how to make the tables look better. Use box model, text styling, and table styling. Be creative! No two submissions should look alike.

Show your CSS here and take a screenshot. My screenshot looks like:

Style states
Style states