CS 1100: Web Development: Client-Side Coding

0. Set Up Your Files

Download this zip file. You may need to control-click on the link and choose "Download Linked File".

Unzip the file. Put hw09 in the folder where you keep all of your class code. hw09 contains four files for this assignment:

• an HTML document,
• two empty files, a style sheet and a scripts file, and
• a test script file that calls the functions you will write.

Put the CSS you write for the following tasks into the styles.css file, and put the JavaScript code you write into the scripts.js file.

You can test your code in two ways:

• in the console. You can paste code from VS Code into the console and run it there, or develop in the console and paste the code into your scripts.js file when it's working.
• in the HTML file that comes with hw09. It loads scripts.js as well as the script that executes your code. Scroll to the bottom of the web page to see examples of your functions from the assignment below.

1. Setting Attributes on an Element

Write JavaScript code to do the following actions.

• Use the querySelector() method to finds the heading "Session 1: An Introduction to CS 1100" (it's an h2) and assigns it to a variable.
• Use the element's innerText property to change the text of the heading to "Session 1: Welcome to Web Development!".
• Use querySelector() again to find the anchor element that contains "course syllabus". The anchor is in the first paragraph of the section named "Review Course Website and Syllabus", which has an id of website. The anchor itself has an id of syllabus.
  This element is supposed to be a link, but it does not behave like one because it is missing its href attribute.
• Use the setAttribute() method to add an href attribute to the anchor. Your code will look something like:

yourVariable.setAttribute("href", "https://www.cs.uni.edu/~wallingf/teaching/cs1100/syllabus.html");

• Use the setAttribute() method again to make the link open in a new window or tab. Your code will look something like:

yourVariable.setAttribute("target", "_blank");

Put this code at the top of the scripts file. Do not put the code in a function.

2. Adding Classes to an Element

Now let's select several list items and change their styling.

• Define three CSS classes with several style rules each. You can use any style properties you want: color, background color, border, font family, font size, etc. Make sure each class has at least three rules.
• Next, identify three items in the first list on the webpage to style. The first list on the page is in the section named "Survey". You may not change the HTML file itself, so use JavaScript selectors to access these items.
  In order to select items in a list that do not have a class, an ID, or any other distinguishing characteristic, we use the nth-child() pseudo-selector.
  
  For each list item you chose, write JavaScript to:
  • Select the item to style and assign it to a variable. For example, to select the second in the list, you might write:

    let listItem1 = document.querySelector('li:nth-child(2)');

  • Add one of your CSS classes to the element. We do this using the element's classList property and its add() method. For example, to add a class named warning to listItem1, you might write:

    listItem1.classList.add('warning');

    This transforms <li> into <li class="warning">, or whatever class name you chose and defined in your stylesheet.

Again, put this code directly in the scripts file. Do not put the code in a function.

3. Finding an Element with Specific Text

Write a function named findElement(selector, textToMatch) that takes two arguments, both strings. The function should:

• Find the HTML element that matches selector.
• Compare its innerText to text using the === operator.
• If the two strings are the same, return the element.
• Otherwise, return null.

Do not put null in quotes. It is a primitive value in JavaScript, like true and false.

Test your function with 'h3' and 'Welcome' (a match), and 'h3' and 'Introduction' (not a match).

4. Checking an HTTP Status Code

When a web server receives a request for a web page, it responds by either producing the requested page or by saying why it cannot. In either case, it includes an HTTP status code with its response. This is part of client-server model of communication we learned about at the beginning of the course.

Write a function named isRedirectCode(statusCode). When users call this function, they will give it one argument, a number that we call statusCode. It will be an HTTP status code returned by the server when it responded to a request for a web page.

Have isRedirectCode() return true if the status code is a valid 300-level HTTP status code. A redirect status code is at least 300 and no more than 308.

For example:

> isRedirectCode(301)
true
> isRedirectCode(200)
false
> isRedirectCode(305)
true
> isRedirectCode(404)
false

Bonus: You can write this function without using an if statement at all. Write a range test similar to the ones in Reading 11 and Session 20, using

• the JavaScript operators <, <=, >, and/or >= to compare statusCode to the numbers 300 and 308
• the JavaScript operator && to ensure that the number meets both conditions

Your function can return that boolean value as its answer.