IT-202: Assignment #3, Spring 2025

Overview

This will be an unusual assignment in that you will be given a page to create entirely from memory. The good news, is that the memory page will be almost identical to examples that have been given in lecture. In other words, there is nothing new in this code. Also, as you are working on your memory page, you may refer to your notes as much as you like.

Everything from the opening DOCTYPE tag to the closing </html> must be done without having looked at your notes.

Tip: It is perfectly acceptable -- and in fact I would suggest -- creating the page initially with your notes in front of you, i.e. not from memory. Once you are happy with it, simply recreate it without looking at any notes (other than these instructions).

But the version that you submit must have been written without looking at your notes, code, or any other reference. If, for example, you get "most" of the page working, and there is something small that doesn't work and you need to go back and look something up in your notes or other place, then you have two options:

  1. Accept that the page isn't quite perfect, and submit anyways. This is perfectly okay. Obviously you won't receive a perfect score on the assignment. But as long as it's close, you'll still get most of the points.

  2. You can look up the parts you are missing in your notes or online. However, you can not make changes to the page. Instead, you would need to start the page again.

Again: If you are very close, then it's perfectly okay to submit a less than perfect page. You may not get a perfect score, but as long as most of the page is correct, then you should still get a very good grade. For example, suppose you complete the page and then realize you forgot the charset meta tag, it is entirely up to you whether or not you want to redo the entire page or not. I would certainly understand if you choose to not redo the entire page and simply accept the 1 point or so deduction that you would receive.

The point is that under no circumstances should you need to spend hours on this assignment. It is mainly there to ensure that you have been practicing with the code from the beginning. Students who have not done this are the ones who tend to struggle with this assignment.

Honor System: Because this page is to be done from memory, you will, of course, be working on the honor system. I hope nobody will abuse this trust. You are cheating your classmates if you do. Very, very not cool.

What you may do

Grading for memory question

On this question and all other memory questions including your midterm (though there won't be a midterm during COVID quarters) and final exam, you will be graded on:

  1. Presence of required tags (i.e. including doctype, meta tag, etc)

  2. Use of proper conventions (file names, form names, variable names, whitespace, etc)

  3. Properly functioning JavaScript. (This is the most important part of the course).

Page #1: Memory Question

Create a page with a button that says: Click to Reveal My Favorite Cinema Category. When the user clicks the button, your button should connect to a function that outputs the string: My favorite type is Drama (Obviously, feel free to change from "drama" to whatever yours happens to be). Output the string to an alert box.

Again, this is meant to be a very easy problem. The key is for it to be so easy that you can do it from memory! As mentioned above, I would initially do this page while looking at your notes without worrying about doing it from memory.

It's perfectly fine if you want to type the page out ahead of time as many times as you want while looking at your notes and examples from class. However, the version you submit as your homework to D2L must be entirely from memory.

Note: Semantic tags are not required for this page.

 

Page #2: Non-Memory Question

As indicated, this page does not have to be done from memory.

Note: It is possible that there may be some items for this problem that are not explicitly covered in lectures. However, they are not meant to be very difficult. The idea is for you to have a good command of the examples demonstrated throughout the JS lectures so far, and to take your own understanding along with the instructions below, and put them together.

Your page will allow the user to do some very simple math. Have a web page with a heading along the lines of "Web Calculator". Have any kind of image you like on it. Think about a certain semantic tag that you might apply to these two items......

You would then create a form that has a couple of text fields, as well as a couple of buttons. Because this is the "main" content of your page, this form should be in the other semantic tag that we have discussed.

One button should offer to allow the user to multiply the two numbers together. The other button sshould allow them to divide them together. Each button should invoke a separate function.

In each of the two functions that you write, your JavaScript code should retrieve the two values entered by the visitor to your page. You should place each number inside a variable. Then create a third variable and store the product (or division) of the two numbers. You would then display that value using the standard alert function.

Styling: Create a CSS class that has at least two styles. They can be whatever you like (colors, borders, fonts, etc). Apply that class to the <h1> tag on your page. Place this class in an external CSS document. I realize that external CSS file will be very short, but this is just for practice. You may, of course add other styles if you would like to, but it is definitely not required.

Here is a screen grab of what it might look like when the user entered 3 and 4, and clicked on the "Divide" button. Note: I have not applied any styles to my page yet.

 

a3_example

 

Submission Requirements