Project 2
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.
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.
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.
- 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.
- p2.css: An external css file that will determine the style of your main page, index.html.
- prog1.html: A program which takes two numbers and prints the numbers between them divisible by three.
- prog2.html: A program which allows a user to search for a word or display some numbers.
- prog3.html: A program which creates a "guess the number" game.
- error.html: An error page which displays an image of failure that links back to 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.
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.
- Using the class "myDesc" to change the background color of the corresponding table cells.
- Hovering over the links to the first two programs should make the text get larger and change color.
- Hovering over the link to the third program should make the text get larger and become the same color as the background so that it disappears as shown below. This should be done using the id selector for that link.
- Top/bottom border different from right/left bord in some way (e.g., red and orange in the example below).
- Background color
- Text color
- Font size
- Font alignment
- Margin
- Padding
- Border style, width, and color
- Font style
- Class selectors
- id selectors
- Pseudoclasses
The screenshots below show the effects of hovering over links.
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.
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".
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.
- If the guess matches the secret number, it should print "You win!" in <h1></h1> tags.
- If the user enters a number less than 1 or greater than 20, it should generate an alert instructing them to guess between 1 and 20. Then, if they still have guesses left, it should prompt them for another guess.
- If the guess is smaller than the secret number, generate an alert that says, "Too small!". Then, if they still have guesses left, it should prompt them for another guess.
- If the guess is larger than the secret number, generate an alert that says, "Too large!". Then, if they still have guesses left, it should prompt them for another guess.
- If they have made five failed guesses, it should print "You lose!" in <h1></h1> tags. Any guess which is not the correct number counts as a failed guess regardless of whether the guess was in the range 1-20 or not.
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.
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.
- All pages must satisfy the HTML Validator or CSS Validator with no errors or warnings. If you are getting mysterious errors that you can't diagnose, go to TA office hours. If you submit pages that don't validate properly you will lose points.
- No email submissions of projects under any circumstances. See instructions below for submitting your work. If you are not sure how to create a zip file and how to submit this zip file, it is your responsibility to visit TA office hours before the due date to ask for help. We will not grant extensions because you were unable to submit the project successfully.
- This project is to be done individually and submissions will be checked for originality. Students who are found to have collaborated on the project will be prosecuted for academic dishonesty.
- We have limited space on our submission server. Please be sure that your photo is not more than 1MB (1 megabyte) in size and the total size of your project will not take up more than 8MB. The server may reject submissions that are too large.
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.
Project adapted from Nelson Padua-Perez and Fawzi Emad.