CS 1100 Web Development: Client-Side Coding

0. Set Up Your Files

1. Create a folder named hw08 in the folder where you keep your CS 1100 work.
2. Copy your hw04 folder into the new hw08 folder.
3. Use VS Code to create two empty files in the hw08 folder: unihome.js and usertheme.js.
4. Use VS Code to create an empty file inside the hw04 folder within your hw08 folder: script.js.

1. A Modified UNI Home Page

Open the UNI home page in a browser.

Open the JavaScript console. Use querySelector() to find the first paragraph on the page that is inside an element with the class 'description'. As of this moment, it is a piece of text that begins "The University of Northern Iowa is ranked". Store the element in a variable.

How to write a nested selector

Recall that we can nest one selector inside another by separating them by a space. For example, to select the first span inside of a paragraph, we can write p span.

Write statements in the console to:

• change the color of the text to purple
• change the background color to white
• add a 5px gold border
• add enough padding to make the new paragraph look good (1px doesn't seem enough)
• add "Go Panthers!" to the end of the text

How to append a string to an element's text

You can add text to an string using the + operator. You can change an element's text by assigning a new value to its innerText property.

Once you are satisfied with the code, copy the statements into the unihome.js file.

2. User-Chosen Theme

Write a JavaScript function named styleByUser() that:

1. prompts the user for two colors, a font family, and a font size
2. sets the body's background color and text color to the two colors the user entered
3. changes the body's font family and size to the user's choices

How to name CSS properties in JavaScript

Remember that JavaScript uses the camelCase naming convention. Refer to the font family attribute as fontFamily, and the font size attribute as fontSize, rather than "font-family" and "font-size", as in CSS.

You can create four variables in the script, or create one variable that you use three times.

Test your code on any page of your choosing.

Put your function into the usertheme.js file. At the bottom of the file, put a call to the function. That way, the browser will run the function each time it loads the page.

3. A Customized Event Page

Add a bit of dynamic behavior to the event index page from Homework 3 and 4. Put the JavaScript code in the script.js file you created earlier.

1. Add a script element at the bottom of the index page's body that loads the script.js file.
2. Add the hidden attribute to the table on the index page.
3. Add a button to the index page with the label Conference details.
4. Write a JavaScript function named revealTable(e) that removes the hidden attribute from the table. Connect this function to the Conference details button as its onclick event handler.

Place the button wherever you think it makes the page easy to use.

4. A Greeting on the Event Page

Add another bit of dynamic behavior to the event index page. Again, put the JavaScript code in the script.js file you created earlier.

1. Add new 'hidden' paragraph near the top of the index page, with the id 'greeting'.
2. Add a second button near the top of the index page with the label Add greeting.
3. Write a JavaScript function named addGreeting(e) that:
   • prompts the user for their name
   • creates a "Hello!" string that includes the name
   • sets the '#greeting' paragraph's text to the new string
   • removes the hidden attribute from the '#greeting' paragraph
   Connect this function to the Add greeting button as its onclick event handler.

Feel free to do more, if you'd like. For example, you could prompt the user for more information and build a more friendly greeting. Place the button near the top of the page, where the user will see it as soon as they come to the page.