Assignment 6: Input and Output using JavaScript

Assignment 6: Input and Output using JavaScript
Objectives
• Create websites that take in input via prompt and put that information back on the
screen in various ways.
Instructions
Part 0: The Setup.
Create a folder on your hard disk named lastname_firstname_assignmentNo. You must
replace “No” with the assignment number. Save all the files from this assignment in this
folder. There are several parts to this assignment. Each piece should go inside its subfolder,
starting with part 1. For example, part 1 needs to be in a subfolder named “q1”. Part 2 will
go in “q2” and so forth.
Each question in this assignment requires you to write a website that behaves as an
application. The style for each page will be the same, but the HTML and JavaScript will be
different. The focus of this assignment isn’t CSS. You can use the same CSS code you wrote
in a previous project. However, each page must have a style, and bland websites won’t
work. Also important: each student should have different CSS code.
Each page should have the following components:
• A header section in which you announce the name of your application.
• A main which contains your application.
• A footer in which you present your name and the copyright year. This requirement
will be the same for every question.
These specifications are detailed enough for you to complete each question. However,
you’ll need to use your best judgment on how to code many of the details. To do that, write
the code in the way you think is best, based on the skills presented in the materials. For
example, any time I refer to the title of a page, that should include the title bar and the
content of the header section.
Question 1. 50 points.
Create a website and store it in the “q1” folder. The file should be named “index.html”. Next,
I want you to pick out a favorite book.
• Make the title of this page: “(Your Name)’s Book App”. This title should go in the title
bar and the header section of your code.
• Include the necessary HTML documentation using comments. Include your name, class
number, section number, and date.
• Create three empty “div” elements on the screen. Give the following IDs to each piece:
title, author, and subject. Ensure that you correctly label each “div” element as a
book title, an author, and a subject.
• Put a single button on the screen. When the user clicks the button, prompt the user:
– prompt for the title. Store this in a variable.
– prompt for the author. Store this in a variable.
– prompt and the subject matter (fiction, science, self-help, religion, etc.). Store
this in a variable.
– (For example, I might respond with “Alice’s Adventures in Wonderland”, “Lewis
Carroll”, and “Fiction”.)
– Write the book title to the title element, the author to the author element,
and the subject matter to the subject element. The three areas should be clear
to anyone reading this website, and there should be clarity as to which text is
the book’s title, author, and subject.
What should you name your variables? That is for you to decide, but it should be clear to
whoever is reading your code what is contained inside the variable by the name.
Question 2. 50 points.
Create a website and store it in the “q2” folder. The file should be named “index.html”. I
want you to write a program that plays with people’s ages.
• Make the title of this page: “(Your Name)’s Age App”. This title should go in the title bar
and the header section of your code.
• Include the necessary HTML documentation using comments. Include your name, class
number, section number, and date.
• Create a single text input element on the screen that asks the user to enter their age.
• Put a submit button on the screen.
• Put two div elements on the screen. Give the first div element an ID of “addFive” (for
the user’s age in five years), and the second “timesTwo” (for the user’s age doubled.)
• Put a submit button on the screen. When the user clicks this button:
– The program pulls the data out of the input field. We will assume that the user
will always provide numerical information.
– The program will convert this value to a number type.
– The program will display to the screen the user’s age in five years in the
“addFive” div element.
– The program will display to the screen the user’s age doubled in the
“timesTwo” div element.
• For example. Assume that I am 100 years old. In five years, I will be 105. My age
doubled is 200.
• For example. Assume that I am 25 years old. In five years, I will be 30. My age doubled
is 50.
• If your program works with any positive integer and follows this pattern, you have
completed the assignment.
Turn it in
• I will deduct 20 points for every error and 2 points for every warning when validating
your files. Validating your content before submitting it is critical. Each of your files
should show no warnings and no errors. Here’s the validator link:
https://validator.w3.org/
• Important: Part of web design is that your websites must be readable. Therefore, I
will deduct points if anything on your page is less than 100% readable. For example, if
there is text on a background and the background makes the text unreadable, I will
deduct points. Likewise, if an image obstructs text flow, I will deduct points. Finally, I
will deduct points if anything about your page makes it difficult to read the content.
• There are several critical parts of this assignment that (if missing) will automatically
fail the project:
– The page content isn’t as specified in this assignment.
– Using images that aren’t taken by you or in the public domain.
– You need to put your name in the assignment.
• You need to upload one file in the same upload:
– Zip up your folder containing your files into a single ZIP file and upload it.