JavaScript can be used to add functionality to web pages. It is a very powerful, versatile, and quirky
language. For this assignment, you are to create three small JavaScript programs which interact with
web pages. Your project files should have (a least) three different HTML files, one for each part. It
should also have (at least) three different JavaScript files, one for each part. Finally, you should have
only one CSS file to provide styling for it all. Each file should have header comment block.
Project 2a – Saying Hello
Create a webpage that, when visited, displays a prompt asking for the user’s name. If they don’t
input a name, keep asking for one. In a second prompt, ask for the user’s age. If they don’t input a
valid value (let’s say valid ages are 0 – 150 inclusive), keep asking for one. Finally, display an alert
with the text, ‘Hello [NAME]. You are [AGE] years old!’ with the correct values filled in.
Project 2b – Calculator
On this page, you are to create a very basic calculator. This should consist of two textboxes for input
values, and somewhere to display the result on the page. There should also be buttons for the
following mathematical operations: +, -, *, /, ^ (exponent), and square root. The calculator should
work like this: user enters two values in to the text boxes, user clicks an operator, and then the
result displays somewhere on the page. The square root operator only needs the value from the
first input. Finally, somewhere on the page display the ‘history’ of the calculator (previously done
operations with values, operator, and result).
Project 2c – Mouse Chase
Create a page with a nice, shiny, pretty button on it. The button should say ‘Click to receive $10!’
However, any time the user’s mouse cursor gets over the button, the button should move to a
random location on the page, making the button essentially impossible to click! However, if they do
somehow manage to click the button, redirect the user to an image of a 10 trillion Zimbabwe Dollar.
Extra credit: Finally, the background color of the page should change every 3 seconds to a random
color.
Styling
All of your pages should use the same CSS file to provide styling. You should use at least one tag
selector, one class selector, one ID selector, and one context selector. Other than that, you’re free to
style your pages however you would like! While I don’t have any exact criteria you must meet for
styling, try to make your pages visually appealing to earn full points.
Deploying your website
Similar to project one, you should deploy your website on Thor. Your project two should be in the
/p2/ directory. Add a link to your already existing landing page to your project 2. You can either link
directly to each page separately from your landing page, or you can make a simple home page for
project 2 where the user can select which of the three pages to go to. While you’re at it, why not give
your landing page some styling updates with your newly learned CSS skills?
Useful Tools
JavaScript is an actual programming language, unlike HTML and CSS. Using a more powerful and
intelligent editor may help you out greatly. Refer back to project one for a list of recommendations.
Additionally, learn how to use the JavaScript console in your browser. In most browsers you can
press F12 and then click “Console” to bring up the JavaScript console. This will make debugging
JavaScript errors much easier!
Grading
The assignment is worth 150 points. The grading is broken down in the following categories:
Part a functionality and code quality 30
Part b functionality and code quality 40
Part c functionality and code quality 40
Site has visually appealing styling 20
Properly deployed to web server 10
Header comment block 10
Total 150
Submitting your work
Your work must be submitted as an archive (.zip, .7z, .rar) on Moodle. This archive should include
your HTML, JS, CSS, and any other necessary files for your website. Late submissions are allowed up
to a week after the due date, but have an automatic 20% penalty.
This project is due Friday, October 18 at 11:59pm.
Reviews
There are no reviews yet.