Question
the following is using Javascript, CSS, and html There are five parts to this assignment. Create the following subfolders (in the folder lastname_firstname_assignmentNo(No is your
the following is using Javascript, CSS, and html
There are five parts to this assignment. Create the following subfolders (in the folder lastname_firstname_assignmentNo(No is your assignment number)): q1, q2, q3, q4, q5. As a result, you should have the following folder (directory) structure for this assignment:
- lastname_firstname_assignment3\q1\
- lastname_firstname_assignment3\q2\
- lastname_firstname_assignment3\q3\
- lastname_firstname_assignment3\q4\
- lastname_firstname_assignment3\q5\
Each of the five questions in this assignment require you to write a website that behaves as an application. The style for each page will be the same, but the HTML and the JavaScript will be different. It is important that each of your pages have a style to them. Bland websites wont work. So a some basic CSS styling will work
Each page should have the following components:
- A header section in which you announce the name of your application.
- A section which contains your application.
- A footer in which you present your name and the copyright year. This should be the same for every question.
Question 1.
Create a website and store it in the q1 folder. The file should be named index.html. I want you to pick out a favorite book.
- Make the title of this page: (Your Name)s Book App. This should go in the title bar and the header section of your code.
- Include the necessary html documentation using comments. Make sure that you include your name, class number, section number, and the date.
- Create three empty div elements on the screen. Give the following ids to each element: title, author, and subject. Make sure that each div element is properly labeled 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 Alices 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 subjectelement.
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.
Everything in this question should go in the q2 folder. The file should be named index.html.
- Make the title of this page: (Your Name)s Image Display Application.
- For this question, youll need to put an image file into your folder. It will not be loaded into the page when the page initially loads.
- Create one empty div element on the screen. Give the following ids to each element: myimage. Make sure that each div element is properly labeled with text letting the user know what will be contained inside that element.
- Write one button on the screen.
- When the button is clicked, write a string containing the code to get an image to appear inside the div element named myimage.
Question 3.
Everything in this question should go in the q3 folder. The file should be named index.html.
- Make the title of this page: (Your Name)s Shouting App. Everyone knows that the way to win arguments on the Internets is to shout, and you shout by typing in all upper case.
- Write a button to the screen that the user should click to start the app.
- Put a three empty div element on the screen with the id of allcaps1, allcaps2, and allcaps3.
- Prompt the user for three items: A first sentence, a second sentence, and a third sentence.
- After the user has typed three statements, take each statement and conver them to upper case, and write each statement (now in upper case) to each of the three empty div elements.
The function you need to look up to convert a string to upper case is toUpperCase.
Question 4.
Everything in this question should go in the q4 folder. The file should be named index.html.
- Make the title of this page: (Your Name)s Movie Ticket Ticket App.
- At local movie theater, they charge by the age. Children under 12 get in free, 12 to 16 year olds cost $10, and anyone 17 years old and older costs $13.
- Write the price scheme to the screen using an unordered list.
- Write an empty div element to the screen with the id of price.
- Write a button to the screen that the user should click to start the app.
- The program should prompt the user for their age. The program should report to the screen using the price div element, Your ticket price is (price). Replace (price) with the price based on the information above. If the price is free, just say free. If the price isnt free, make sure the price uses a dollar sign to represent the dollar amount. (Make sure that the sentence ends with a period.)
- Make sure that you check for each of the age ranges!
- Write an additional rule into the program that if the user enters a negative number (you cant be negative years old!) then report an error to the screen.
Question 5.
Everything in this question should go in the q5 folder. The file should be named index.html.
- Make the title of this page: (Your Name)s Range Check App.
- Put an empty div element on the screen named result. This will be the results of your application.
- Put a button on the screen.
- When the button is clicked, prompt for three values.
- A minimum number for a range.
- A maximum number for a a range (which must be larger than the minimum number).
- Any value.
- After the three values have been entered, respond with one of the following statements:
- The third value is lower than the minimum.
- The third value is in the range of the minimum and the maximum.
- The third value is greater than the maximum.
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started