CS 351 Spring 2020 Homework 5

CSS Layout, Node, and NPM

Dr. Greg M. Bernstein

Due Sunday, February 28th, 2021 by 11:59PM, 50 points.

General Instructions

In this homework: CSS Positioning, CSS FlexBox, CSSGrid, Node NPM, Modules.

Create and Use a new Branch hw5

We will create a new git branch called hw5 (starting from your ‘hw4’ branch) 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 4. Follow the procedures in GitHub for Classroom Use to create the new branch, i.e., git checkout -b hw5. 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.

# Homework #5 Solution
**Your name**
**NetID: yourNetID**

Questions

Question 1. (15 pts) More DOM Practice

This question will give you more practice with JavaScript arrays and the DOM. You will need to download the files States.html and states.js and put them in your repo. Don’t put them in your clubProject directory. You are only allowed to work with the States.html file by adding JavaScript code to the existing <script> section at the end of the <body>.

(a) List of Top 5 Least Populous States

There is a <section id="LeastPop"> that contains an ordered list <ol>. Using JavaScript fill this element with the five least populated states with some of their information just like I have done in this screenshot:

Least Populated states

Hints: You can’t change the HTML so you need to use a selector to get the <ol> element so you can add <li> to it. Take a look at the states array in your dev tools to see the structure of the array. Use the sort member function with a specific callback. Show your JavaScript code here.

(b) State Abbreviation Game

Now we want to create a little game to help people learn the state abbreviations/codes, i.e., California has code CA. Using JavaScript and the DOM for each state create an element in the format:

<article>
    <p>Arizona</p>
    <input id="AZ" type="text"><p>
    <small title="AZ">Hint</small></p>
</article>

and add it to the <div> element in the <section id="AbbrGame"> section. I have provided styling. You should get something that looks like:

Code Game

Show your JavaScript code here.

(c) Optional: State Abbreviation Events

This part is optional to do, but you should study my answer. Respond to user inputs in the <input> by checking if what they type matches the state code (we put this in the <input> id in part (b)), if they get the state code correct at the “happy” class to the input. Here is what my screen shot looks like when a few correct codes are given:

Code Game Inputs

Question 2. (10 pts) Horizontal Menu, Fixed Positioning (Menu at top)

Important: This feature must work on your deployed web site to receive full credit.

(a) Convert to Horizontal Menu

Without changing the HTML on your site convert from the vertical menu of the previous homework. Into a horizontal menu as shown in the screenshot below:

Horizontal Menu

Hint: there are two approaches you can use. One is based on using flexbox the other based on inline-block, use the flexbox approach.

(b) Keep Site Menu at Top of Window

Now lets keep the menu in the same place no matter how much the user scrolls. Make sure that all your page content is still visible. Hints: Use the appropriate positioning, and margin on the appropriate elements.

Show the HTML code for your <nav> (menu) here.

Show the CSS code used for the menu and related elements here.

A screenshot of my home page scrolled down a bit looks like:

Scrolling with menu at the top

Question 3. (10 pts) Widths and Flexbox

Important: This feature must work on your deployed web site to receive full credit.

(a) Text Width

Text that looks good on a tablet or a cellphone may be difficult to read on a laptop screen because it may be too wide. To consistently place a given number of characters on a line of text which CSS unit(s) might you use? (write your answer here)

Use the appropriate CSS property to limit the width of your <main> (or other element containing text).

(b) Flex for Centering

Use flex to center all the content blocks on your page. Show your CSS code here.

A screenshot of my home page after these modifications looks like:

Width limited and centered

Question 4. (15 pts) Grid, and Deployment

(a) Grid for Login Widgets

Neaten up your login form with CSS grid. Make it look something like:

Login form with Grid

Show the CSS you used here.

(b) Grid for Membership Application Widgets

Now clean up your club membership application form using CSS grid. Show the HTML for the various inputs and button along with their containing element here.

Show the CSS you used here.

Your “application form” should look as nice (or better) than my screenshot below:

Form layout with Grid

(c) Deployment

Deploy your updated web site and put a link to that site here.