CS 351 Fall 2019 Homework 4

CSS Layout and Positioning, DOM Events

Dr. Greg M. Bernstein

Due Monday, September 23rd, 2019 by 11:59PM, 50 points.

General Instructions

In this homework we work with CSS Layout and Positioning, DOM Events, HTML entities.

In this homework you will enhance the website for the fictitious tour company that you started in Homework #3.

Create and Use a new Branch hw4

We will create a new git branch called hw4 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 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)

Floats and images Other useful HTML tags <abbr> etc…, Unicode emojis.

(a) HTML Entities and Unicode

Choose at least two unusual HTML character entities and use them on you fictitious tour companies web page. Choose at least two Unicode based emojis and also put them on your tour company’s web page. List the character entities and emojis here.

(b) Figure, Figcaption, Img

Choose at least two images to add to the content of one of your pages. If you are using cell phone images be sure to reduce the image size prior to using it with your web page. Wrap you image in a <figure> element and and a <figcaption> with an explanation of your image. Then using CSS float your figure/image combination either to the left or right. Limit the width of the overall container so that the float effect is more prominent. Take a screen shot and past it here. I get something like (note this was my club page from last semester):

figure, figcaption, image and float
figure, figcaption, image and float

Question 2. (10 pts)

Menu from a list of links. To navigate between pages on our club site we had a list of links on each page. Mine was quite ugly and looked like this:

. We are going to turn this into a menu and then a drop down menu with CSS.

(a)

First turn off text-decoration on the <a> elements within the list. Second turn off list styling on the <ul> element. Third set a fixed with on the <li> elements and put some kind of border around them. Finally set the text alignment to center the text. Your aim is to get something like:

Put a screen shot here.

(b)

Let’s add some interactivity indications. First change the cursor to a pointer when the mouse point hovers over an <li> element, also change the background color on hover. I did something like:

(c)

Using the CSS positioning techniques from class turn the previous navigation menu into a drop down menu. You don’t need to change your HTML if you don’t want to, I didn’t. Nor do you need to make this particularly pretty. I was a bit obsessive and came up with the following.

Put a link to your updated website here that shows off you new navigation menu and other enhancements.

Question 3. (10 pts)

In this and the next few problems we are going to build a multi-function stop watch application. To do this we need to learn about the window setInterval method and the JavaScript Date class.

(a) HTML page and JavaScript

Create a file called stopWatch.html separate from your website directory. You can start with one of our empty outline files. Give the file a title, add an <h1> element with the text “Stop Watch”, add an <h2> element with your name and NetId. Add two elements one to hold the label “Elapsed Time” and the other that our JavaScript will modify, i.e., give it an ID. Add an internal stylesheet to the <head> for holding all your CSS rules.

(b) Time since page load

Add a <script> element at the end of the <body> element. All your code will go in here. Calling new Date(); will return the current time as a numerical timestamp in milliseconds. Save a value of this at the beginning of your script.

The window.setInterval(func, delay) runs a function (funct) that you give it approximately every delay milliseconds.

Define a function update() that computes the time since the script started (use new Date() again and subtract the start time that you saved from above), and updates the element that you gave an ID to in part (a), be sure to show your result in seconds with an accuracy of 0.1 second. (Hint use: innerHTML).

Call the window.setInterval method with the function you just define and try a delay of 100 milliseconds. Let the program run a bit, take a screen shot and put it here (do not worry about CSS formatting we will do that later). I get something like:

Time since page load
Time since page load

Put a copy of your JavaScript code here nicely formatted with the appropriate Markdown syntax (no ugly code allowed!)

Question 4. (10 pts)

One of the big problems with the “stop watch” of question 3 is that you cannot stop it and the only way to “restart” it is to reload the page. Let’s fix that.

(a)

Add a start and stop button to the page and give each a unique ID attribute.

(b)

Create two event handler functions called handleStart and handleStop. Just these function print simple hello messages to the console for now. Add them as event listeners via JavaScript (not in the HTML), e.g., code like

Open up your developer console and test that when you press the buttons the appropriate event handler is invoked. Important: the stop watch doesn’t actually work yet. We are just testing the event handlers here! Take a screenshot and show it here. I get something like:

Button testing
Button testing

(c) Adding state for control

Now we need to do something in our event handlers to control the updates. The first thing we’ll do is introduce a boolean state variable called “watchRunning” and initialize it to false. Next we will add functionality to our event handlers to change the state and enhance the update function to set and do things based on the value of this state. Get your stop watch working then show me the code for your two event handlers and the update function nicely formatted for easy reading.

(d) Easy Layout with Grid and FlexBox

Let’s use FlexBox for some easy centering of all our content. Make sure all your page content is in a <main> element within the <body>. Use CSS display:flex on the <body> with appropriate settings to center all of <main> horizontally in the page.

Wrap your buttons and stop watch display in an <section id="Watch"> element (remove other wrappings of the buttons and outputs if you had them). Apply CSS grid to this container and adjust various grid settings to produce an output like:

Show a screen shot and your CSS here.

Question 5. (10 pts)

Marketing was impressed by our stop watch from Question 4, however they would like more capabilities without increasing the button count (since they want the buttons much larger for mobile users.). They want one button that will progress through “Start”, “Stop”, and “Reset” stages (same button different text based on state) and another button to provide “Split” and “Split Clear” functionality. What a “split” does is save the current time when the split button is pressed but allows the timer to keep going.

(a)

Copy your “stopWatch.html” file to a new file called “stopWatchSplit.html”. You should only have to make minor changes to this file.

(b)

Update your code (“stopWatchSplit.html”) to use a single button to control “start”, “stop”, “reset” functionality. Show your updated run button handler code here.

(c)

Add a place to display the split if the split button is clicked but keep it hidden otherwise and hide it when “Split Clear” is clicked. Show your split button handler code here.

Hints: This problem is really about keeping track of state. So instead of the one simple boolean state in problem 4, I came up with two state variables to keep track of all this:

In my handler code I use switch statements and modify the state and update other things like button text:

Views of the various application states:

Reset ready to be started
Reset ready to be started
Running waiting to be stopped
Running waiting to be stopped
Stopped waiting to be reset
Stopped waiting to be reset
Split has been clicked
Split has been clicked