CISC 2350 Project Summer 2018 Prof Wolk

1) Given the HTML below ( do not modify the HTML), create a CSS which will:

a) By default, make all text colors blue except within the second div element make the second inner paragraph green, and make the outer non div paragraph red, and the outer list element pink

b) Another different way to create css to achieve the result in a

c) As a separate case, make the text elements of the two div elements red , except for the second div make all paragraphs blue and italic and also make the outer div list cyan.

d) Another different way to achieve c)

e) As a separate case, create css to make all the text elements of the HTML page alternate between blue

Red and green

f) Another different way to achieve e)

g) As another separate case , create css to make the div paragraphs red, but the first paragraph of the second div element cyan

h) Another way to achieve g)

NOTE THAT A SEPARATE CASE CAN BE GENERATED BY MODIFYING ONLY ONE OR MORE SELECTOR TERMS

IF YOU FIND THAT ANY OF THESE OUTPUTS CANNOT BE ACHIEVED, STATE WHY THEY CANNOT

I'm a first paragraph, what color am I ?

Im a second paragraph

1. I'm a list item;what color am I?

I'm a third paragraph; what color am I?

I'm a fourth paragraph, what color am I ?

1. I'm another list item;what color am I?

2) Given the following HTML for a table, answer these question as cumulative cases ( the successor question extends its predecessor case)

a) Modify the html to add a column before and after the existing columns column called First Assessment , and Second Assessment and then modify the html to

Extend the data in the rows ( you may use arbitrary numbers)

b) Make the first half of the table text elements background color blue and the second half of the table text background colors red using a combination of css and html modification

c) Another way to achieve b}

d) First make the text color of the first and last data items of the first and last data rows yellow, and then the inner data elements of the first and last data row pink, and make the second row all text red except for the third and fifth text elements in the row ( use combination of css and html modification)

Product	Size (oz)	Caffeine (mg)	Fat (g)
Green Tea	8	20	0
Dark Chocolate	2	20	19

3) Given the following html, css and illustrated output:

Welcome to: webhamster.com

This Web page is parked Free courtesy of

GoDaddy.com

Want to buy webhamster.com ?

GoDaddy.com

Learn How

CSS FILE

.aclass1{color:purple;}

.span2{color:green;

font-size: 20px;}

.div1{

border-radius:5px;

position:absolute;

margin-left: 850px;

top:185px;

width: 75px;

height:25px;

background-color:green;}

.aclass2{color:white;}

button{

position:absolute;

top:325px;

margin-left:400px;}

.enclose{

border:solid green 2px;

width:50%;

margin-left:400px;}

p{ border:solid red;

margin-left: 100px;

width:250px;

text-align:center;

}

h1{ margin-left:100px;}

.class3{margin-left:100px;}

Modify the css and html to alter the output below to enclose the illustrated output with another outer div

Element, and make all the div elements to alternate in background color between red, blue and green.

Duplicate the paragraph and its content and place it to the right of the existing paragraph but add the existing learn how Div element to its content ( extend the size of the second element to the right of the existing paragraph to accommodate the learn how div element)

4)

Modify the HTML and write a javascript file which

1) Creates another input element, and also an h1 and a paragraph element

Access all the html elements within the existing click event. The input

elements are strings.Combine the second , third and fourth strings

into one new string using string concatenation (+) Take the odd positioned characters of the

first input string and add that to the new string. Place the resulting final string into the span

tab, the paragraph and the h1 element

2) Add another click event which does the same thing as the click event, except that it is

associated with a button that has an id instead of an associated click event.

3) In the first click event, add a statement which alternates the input content between green

and blue between successive clicks.

4) Add another function which is not associated with the click event which does the same

thing as the two other click functions. Call the function when everything is loaded for

Execution.

5) CISC_CH9_pp346 application below

Create a checkbox element on the HTML page and an associated onclick function with this control. Inside the click event associated with the checkbox, access the tip percent subtotal and the tip percentage as was done on the computetip function. Add another five percent To the tip if the checkbox is clicked, and subtract five percent from the tip if the checkbox Is not checked. Instead of using windows onload you may use defer in the link to the js file.

Tip Calculator

subtotal

PLEASE_346.js

window.onload = function(){

document.getElementById("tenpercent").onclick = computeTip;

document.getElementById("fifteenpercent").onclick = computeTip;

document.getElementById("eighteenpercent").onclick = computeTip;

};

// Computes proper tip amount based on the subtotal and tip percentage.

function computeTip() {

var subtotal = parseFloat(document.getElementById("subtotal").value);

var tipPercent = parseInt(this.innerHTML);

var tipAmount = subtotal * tipPercent / 100.0;

document.getElementById("total").innerHTML = "Tip: $" + tipAmount;

}