CS 351 Fall 2019 Homework 2

Getting started with HTML, CSS, and JavaScript

Dr. Greg M. Bernstein

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

General Instructions

The goal of this homework is to get you started with all three of the technologies that we will be using all semester: HTML, CSS, and JavaScript. In addition you will use more Markdown functionality to present your solutions.

Create and Use a new Branch hw2

We will create a new git branch called hw2 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 1. Follow the procedures in GitHub for Classroom Use to create the new branch, i.e., git checkout -b hw2. 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)

Getting started with HTML (in Markdown)

(a)

In the following HTML which are the tags and which are the attributes?

Give a simple list (not an HTML list) of attributes and tags used in the above here.

(b)

Can you use the same id attribute on more than one element in an HTML document? Does the fact that we use id attributes as targets for links within a page influence this? Can you use the same class on multiple elements in a document? Why or why wouldn’t this be helpful for styling?

Write you answers here.

(c)

In this question you are going to make this homework and your answers internally navigable, i.e., we will make it so that we can link to internal headings and style particular sections. For this you have to use HTML rather than Markup for your headings. For the main questions, e.g., 1., 2., 3., put them into h2 elements, for sub-parts use h3 headings. To each heading add an id attribute. For example something like:

For your separate answers, i.e., those not involved in this question or the next, whether in HTML or Markdown wrap them in an HTML <section> element with a class attribute set to “answer”. We’ll use this later for styling. Leave a placeholder for this answer to remind me to grade it.

(d)

In this question you will build a navigable table of contents for this homework at the top of this document after the portion with your name and netid. You will use nested unordered lists with internal links to each heading from part (b). You will use HTML somewhat like the following:

All your links must work to receive credit. Broken links are a constant issue with websites and we will be using a variety of techniques to reduce the probability of this.

Question 2. (10 pts)

Cascading Style Sheets

(a)

For the CSS shown below. Identify the CSS selector and indicate its type, identify the CSS properties, the CSS values.

Put your answer here and remember to wrap it in a <section class="answer"> tag.

(b)

Describe the CSS selector combinators used in the following CSS fragment. Use the appropriate CSS terminology from the course slides or MDN.

Question 3. (10 pts)

JavaScript: strings and numbers, conversions, hex and binary. MDN string string manipulation methods.

(a) String to number conversions

When we work with various HTML input controls the raw data we get is usually in string form. Hence we need a way to convert from strings to integers or floating point numbers. In JavaScript we use two global functions for this parseInt and parseFloat.

Run the following JavaScript code in your browsers developer console. In the answer section provide explanations to my comments and take a screen shot of the last few results and include that with your answer. Make sure to put your name in place of the “YourNameHere” portion of the string.

(b) Number to Strings

When we display numbers we generally want to format them in a way appropriate to the application. We can do this with the following methods from JavaScript’s Number class. These include: toString, toPrecision, toFixed as well as others.

Run the following JavaScript one line at a time in your browser’s developer console, answer parts (i)-(iii) detailed in the comments and show a screenshot of your answers to (i)-(iii).

(c) Single and Double quote strings

In this problem we will also practice using the most common debugging method in all of Javascript: console.log(). Single quote and double quote strings are the same in JavaScript lets test that this is true. Run the following code one line at a time in your browser’s developer console. Provide answers to the questions in the comments and a screen shot (partial is fine) of the developers console with the results.

(d) Simple string manipulations

The String class contains a number of helpful functions among the many are: includes, replace, split, toUpperCase, toLowerCase. Always check the String methods before writing something yourself. Let’s try some of these.

(e) Backticks and template strings

There is yet another string that was added to ES6, the template string. This is extremely handy when adding elements to the DOM. It uses backticks and allows for variable substitution within the string. Let’s try a simple example. Take a screenshot of your console for your answer.

Question 4. (10 pts)

JavaScript: Arrays and basic Objects. MDN Array

(a) Array basics

JavaScript arrays are really lists in that they can grow and shrink and can contain any kind of element including a mix of different types of elements. Let’s try some basic array manipulations. Provide answers to the questions in the comments and a partial screen shot of your debug console.

(b) Fancier Array Methods

In many cases in JavaScript we provide a function as a parameter to another function. This is a kind of “functional programming” and we need to get used to it. We are going to try this with the map and sort array methods. Hint: you will find the answers to most of the questions below by looking at the MDN Array documentation.

(c) Objects

JavaScript Objects are extremely versatile and relatively easy to use. So much so that we will not define any object instances via JavaScript classes until the end of the course when we work with React. Let’s see how this works. Substitute your information in the following and run it in the developer console. Click to expand some of the objects fields and take a screen shot for your answer.

(d) An Array of Objects

We saw that objects can contain arrays what about an array of objects? We are going to use the general array sort method in a common non-trivial example. Below is a shortened list of windsurfing trips from 2018. We would like to sort these according to two criteria; maximum speed (max2sec) and maximum distance (distance). Below I give an example of sorting by sail size. Create the “compare” function for speed and distance. Put them in the answer section (properly formated with Markdown) and take screen shots of your results showing the sorting succeeded. See my example screenshot below.

Example screenshot showing sorting by sail
Example screenshot showing sorting by sail

Question 5. (10 pts)

CSS internal and inline style sheets, psuedo-classes, psuedo-elements. For this question we are going to do some styling. GitHub does not allow us to style the README.md file with CSS. So we will create a separate HW2.html based on your answers to the first four questions of this homework for you to style.

(a)

Create an empty (outline) HTML file from code like call it HW2.html:

Go to Markdown Converter and copy and past your Markdown for the this assignment questions 1-4 (and stuff above) into the left hand pane. Check that your Markdown rendered correctly in the preview pane on the right. Then go to the “HTML” tab on the right and copy the HTML there into <body> of your hw2.html file. Add an internal style sheet to the <head>. Leave this question blank to remind me to look for your hw2.html file in your repo.

(b)

Change the color of the “Q” in all the question headings to blue. This is the color property. Show the CSS rule you added to the stylesheet here, properly formatted in Markdown (see course slides or Markdown references within). E.g.,

(c)

For the Table of Contents list you created in question 1(c) set the background color to some light color of your choosing, I say light color so that the list and links are still visible. Use the background-color property to do this. Add a class or id attribute to the list if needed. Add this to rule to the internal style sheet that you put at the top of your HW2.html file and show the properly formatted CSS rule here.

(d)

Add light background highlighting and a border to the answer sections of this file. Use the border: solid black property and value for now (we’ll learn about borders and the CSS box model next week). Put the rule in the stylesheet at the top and display it here.

(e)

Take a screen shot of your styled HTML file as displayed in a browser (just part of it). I get something like:

Styled Screenshot
Styled Screenshot