Web Technologies I – Final Exam
Write your answers on the answer sheets provided. You may refer to a printout of the Javascript command sheet (without commentary). Also, you may refer to printouts of your source code for homework 11 and to the HTML and CSS quick reference guides distributed in class.

  1. (3 pts) List the primary function and responsibilities of a domain name registrar.

  2. (3 pts) List the primary function and responsibilities of a web host.

  3. Consider this URL: https://www.geeksRus.com/bestbuy/antivirus
    1. (2 pts) What is the domain name given in this URL?
    2. (2 pts) What is the term we apply to the https portion of the URL?
    3. (2 pts) The electronics retail store “Best Buy” is known for their computer maintenance services (known as the “Geek Squad”). Would you expect the above URL to link to their maintenance department's antivirus information or not? Explain.

  4. (6 pts) Suppose you have a button whose id is “fun” and an unordered list whose id is “the-list”. Write the jQuery statements necessary to cause a new list item to be added to the list each time the button is clicked. The contents of the list items should be numbers counting up, starting at 0.

  5. (4 pts) Write a jQuery command to hide all span elements who have the “pumpkin” class attached.

  6. (3 pts) What does the following JQuery code accomplish? 
    	$(document).ready(function(){
		// misc Javascript
	});
  7. Suppose a variable named count has been set up in localStorage and has been assigned a value of 12 while visiting the page http://www.example.com/index.html.
    1. (4 pts) Write Javascript code that would read the value of count from localStorage, add one to it, and store it back into localStorage.
    2. (2 pts) Would the value of count be available if a user closes the browser completely and then restarts the browser and revisits the same page?
    3. (2 pts) Would the value of count be available if a user closes the browser completely and then restarts the browser and revisits a different site?
    4. (2 pts) Would the value of count be available if a user visits the same page (using the same computer/device) but using a different browser (say Firefox instead of Chrome)?

  8. Assume you are given the following code as a starting point: exam_solutions/2021.final_start.html Your task is to add the necessary CSS, HTML, Javascript/JQuery code to produce a “Button Maker” app with the characteristics/behavior specified below. You'll notice that there are three comments in the above code that say “XYZ goes here.” Dedicate a separate answer sheet to each of those sections and label them. Write your answers to the questions below in the appropriate section.
    1. (2 pts) Write CSS commands that will apply the border-box box sizing model to all elements on the page.

    2. (4 pts) Write CSS commands to give the page a maximum width of 960 pixels with content centered if the browser goes wider than that. The width of the page should shrink to match the browser for widths smaller than 960 pixels.

    3. Use CSS flexbox commands to accomplish these stylings:
      1. (2 pts) Have the two sections be displayed side-by-side.
      2. (2 pts) Have the “Control Panel” section appear to the left of the “My Button List” section.
      3. (2 pts) Have the two sections keep their height even with one another.

    4. (2 pts) Have each section consume equal portions of the page width.

    5. (4 pts) Write CSS commands that will cause the section to be stacked vertically and to consume the full screen width if the browser/page width gets below 600px.

    6. (8 pts) In the control panel section add these form elements:
      • a text box to hold an RGB background color
      • a text box to hold a label for a button
      • a drop-down box with two options: grow, delete
      • a button labeled “Create Button”

    7. (10 pts) Write jQuery commands that will define an event handler for a click event on the “Create Button” button. When the button is clicked, first verify that the background color text box contains text that is a valid RGB color (i.e., hash followed by 6 hexadecimal digits). If the RGB color is not valid then cause an appropriately-worded error message to fade in and then exit the event handler.

      If the RGB color is valid then create a new button and insert it into the Button List. The new button should have the background color and label as provided in the text boxes in the Control Panel. Also, you should give the button a class of “grow” or “delete” based on the contents of the drop-down box.

    8. (6 pts) Write jQuery commands that will cause buttons in the Button List with a class of “grow” to increase their width and height by 5px each time they are clicked.

    9. (4 pts) Write jQuery commands that will cause buttons in the Button List with a class of “delete” to delete themselves and their parent list item when they are clicked.

Web I

Course Resources

Grades and Homework

Quick Links