Project 2

Due: Wednesday, March 13th at 11:00 PM
Objective

The goal of this project is practice CSS and basic JavaScript, including loops and conditionals. You will create a webpage styled with CSS that links to several pages with JavaScript programs.

Overview

Below are descriptions for each of the pages you will create. Please read descriptions carefully and capture every detail. Since coding is very detail-oriented, part of your grade will depend on how carefully you follow these instructions. The first page is the main page of your website called "index.html". Users begin there and click the links to visit the other pages.

Implementation

You should download the file Project2.zip. Unzip it and use the folder Project2 to store all of your HTML/CSS files and picture.

You will create the following HTML or CSS pages. Further details on each page will be given below.

  1. index.html: Your main page that will be styled with external CSS and give links to your programs. This page is provided to you in the Project2.zip file.
  2. p2.css: An external css file that will determine the style of your main page, index.html.
  3. prog1.html: A program which takes two numbers and prints the numbers between them divisible by three.
  4. prog2.html: A program which allows a user to search for a word or display some numbers.
  5. prog3.html: A program which creates a "guess the number" game.
  6. error.html: An error page which displays an image of failure that links back to index.html
1) index.html

This page is provided to you in the Project2.zip file. The only change you are allowed to make to this file is adding one line in the <head> to link it to your external CSS file. Do NOT make any other changes to this file.

2) p2.css

Your external CSS file should make index.html look similar, but not necessarily the same as the screenshots below. The color choices are entirely up to you, but should reflect a general disregard for the health and safety of the viewer.

The following effects are required.

The following CSS features must be used in some meaningful way.

Screenshot of main page

The screenshots below show the effects of hovering over links.

Hover over link   Hover over hiding link
3) prog1.html

This program should prompt the user for two numbers. If the first value is greater than the second, it should give an alert that says "Invalid range!" and do nothing else. Otherwise, it should print all numbers divisible by 3 in the range defined by the two input numbers. Print each number on a separate line on the page. The page title should be "Program 1".

For example, inputs 3 and 12 should produce:
3
6
9
12

However, inputs 12 and 3 should generate an alert that says, "Invalid range!".

Remember that you can use the modulo operator (%) to check for divisibility.

4) prog2.html

This program should give the user the following prompt: "Enter "search" or "count":"

If the user enters "search", it should prompt them for a single word to search. Then, using window.open(), it should open a google search for that word. To get the URL for a google search, append the word you wish to search to the end of the string, "https://www.google.com/search?q=".

Otherwise, if the user enters "count", it should prompt them for a number to count to. If they enter a number less than 1, use window.open() to open the error.html page defined below. Otherwise, print the numbers from 1 to the number given. Print each number on a separate line on the page.

Finally, if they did not enter either "search" or "count", use window.open() to open error.html.

The page title should be "Program 2". This program should ignore the case of the input. In other words, "search", "Search", "SEarch", etc. should all be treated as "search".

5) prog3.html

This program should create a "guess the number" game. You will generate a random secret number by setting a variable equal to "Math.floor(Math.random() * 20) + 1" (This expression generates a random number from 1 to 20). Then, allow the user up to five guesses to guess the correct number.

After generating the secret number. Your program should prompt the user: "Guess a number from 1-20 (secret number)!". The number in the parenthesis should be the actual secret number. E.g. "Guess a number from 1-20 (14)!" This is so that the TAs can grade what your program is doing. Therefore, if you do not include the secret number in your prompt, you will lose points.

The program should handle the following cases and allow up to five guesses.

In all cases, it should print "The number was " followed by the secret number in <h1></h1> tags at the very end. The title of the page should be "Program 3".

Update: You can assume the user enters a number in a reasonable form (e.g. using numeric characters like "6", "-2", or "23"). You do NOT have to handle any kind of word input like random letters or written numbers (e.g. "six") for this problem.

6) error.html

The title of this page should be "Error Page". At the top of the page, it should state, "I'm not mad, I'm just disappointed" in <h1></h1> tags. Below that should be an image of your choice that illustrates failure. The image should have a height of 400. The alternate text if the image cannot be displayed should be, "This picture failed to load. How ironic." Clicking on the image should be a link to index.html.

Additional Requirements
Project Submission

You will submit a zip file. Please be sure that all of your work (your HTML files and photo) are in a folder called "Project2". Create a zip file that includes this folder, as follows. On Windows, right-click the folder, then choose "send to, compressed (zipped) folder". DO NOT USE A UTILITY LIKE 7-ZIP OR WINRAR. On a Mac, right-click the folder, then choose "Compress yourFolderName".

You will not receive credit for submitting a file that is not a standard "zip" file. In particular, "rar" files or "7z" files will not be graded. Submit the zip file to the submit server by logging in, selecting Project 2 (Conditional Loops), and uploading the zip file to the server. You may submit as many times as you like. We will only grade the last submission. See syllabus for late policy.

After you have submitted the project, we strongly recommend downloading your submission from the submit server. It will give you a zip file. Unzip this file and verify that the contents are as they should be. It should contain all of your HTML files and your photo.

Credit

Project adapted from Nelson Padua-Perez and Fawzi Emad.

Web Accessibility