CS 351 Spring 2020 Homework 4

HTML Widgets, CSS Layout, DOM Events, and Deployment

Dr. Greg M. Bernstein

Due Friday, February 21st, 2020 by 11:59PM, 50 points.

General Instructions

In this homework is to continue working with HTML, CSS, and JavaScript. In particular we will work with the DOM to create elements, respond to button clicks, use CSS to layout pages, sections of pages, and to produce a “modal” information dialog.

Create and Use a new Branch hw4

We will create a new git branch called hw4 (starting from your ‘hw3’ 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 3. Follow the procedures in GitHub for Classroom Use to create the new branch, i.e., git checkout -b hw4. 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} Login form & DOM events

(a) Create a club Login Page

Create a login page for your club (linked to all the other pages) with a text <input> for the users email, a password <input> for the users password, and a login <button> for them to click. Add ids and any other attributes as needed.

(b) Button click handler

With an embedded script at the bottom of the <body> register a handler on the login button that gets the users email and password from the input fields and prints them to the console. Show your JavaScript code here and take a screen shot of your login page with the console open after the user has entered their information and clicked the “login” button. My screen shot looks like:

Login Screenshot
Login Screenshot

Question 2. (10 pts) {.Question} Club Events from JavaScript Data

(a) Create Event/Activity Data

Generate a list of at least three events (scheduled activities) for your club. Each event will be a JavaScript object with at least name and date properties (you can add more as appropriate for your club), store these events as an array of JS objects in the file eventData.js. Show a portion of your data here. Mine looks like:

Yours must be different from mine! You can organize the data into objects as you like!

(b) Update Page for DOM manipulation

Update your club activity page, by removing any hardcoded club events/activities from the HTML. Decide on whether you want to use lists or tables to show club events/activities. Put in HTML elements that will hold info that you will generate via the DOM. Hint: adding ids to the appropriate element can make the next step easier.

(c) Generate Elements from Data

Using external JavaScript script named activities.js that you will include in the <head> after the eventData.js script, create a list/table of club events on your club activity page. (Hint: don’t forget to use window.onload). Show your code and a screen shot here. My screenshot looks like:

Generated Event Table
Generated Event Table

Question 3. (10 pts) {.Question} Club Application Form, DOM events

(a) Club Application

To your club membership page add: input widgets for Name, Email; Selection widget for skill level or equivalent, and an apply button apply button. Don’t style! Mine is really ugly:

Club Application
Club Application

We’ll style this with CSS grid in problem 4. Show the HTML for your added inputs and such here (don’t include the whole HTML page).

(b) Thank you “dialog”

Create a <section id="ThanksDialog"> to contain a heading thanking them for applying to your club and containing summary information. When they click the apply button you will grab information from the application and summarize it in a <p> element in this section. You will do this using JavaScript. In addition you will add a class ShowDialog to the <section id="ThanksDialog"> element in response to the button click.

(c) Close Dialog Button

Add a button for “closing” the dialog. When this button is click remove the class ShowDialog from the <section id="ThanksDialog">. Note we have not defined this class yet or applied any styling. At this point I’ve got something like:

Application and thanks
Application and thanks

We are going to turn this into a “modal dialog” in problem 4 using CSS.

(d) Extract to External Script File

If you haven’t already put all the JavaScript needed for this problem into a separate JavaScript file and include it in the <head> of this page. Show your code here.

Question 4. (15 pts) CSS Styling

(a) Grid for Club Application

Nicely style your club application using CSS grid to organize the inputs and such. Take a screenshot and show it here. Mine looks like:

Style application
Style application

Show the CSS rules you used for this (not all the CSS for your site!) here.

(b) Positioning for “Modal Dialog” on application form

Now your going to define CSS rules for the <section id="ThanksDialog"> so that it is normally not seen, and then after the “application button click” looks like a “modal dialog”, i.e.,

Modal Thanks Dialog.

The “modal” dialog shows up when the ShowDialog class is applied and disappears when it is removed. Hints: use “transparency” on you background color, set width and heights, using the position and related CSS properties. You can add some more HTML if you like. Show your CSS here.

(c) Clean Up Login Page

Use CSS grid or flexbox to tidy up the inputs on your login page. Take a screenshot and show the CSS (just for this) here. You can add classes and/or ids to elements on the login page as you need.

I get something like:

Login cleanup
Login cleanup

(d) Flexbox for centering and such…

Now use flexbox to adjust the layout of your website, in particular center the <main> and <footer>, but set the <nav> to the left or the right. Note you can make the <body> element be the flex container if you want. Take a screenshot and show your CSS. I get something like:

Overall page layout
Overall page layout

Question 5. (5 pts) Deployment

Deploy your updated web site to a server and give the URL here. Make sure to test your site!