HTML A3

Assignment #3: Summer 2020

 

Always remember: Details matter! In a technical course such as this one, all those little details such as variable white space, naming conventions, and so on are very important. Don't neglect to pay attention to these. Be sure to use the Assignment Checklist which you can find at the top of the course web page.

 

Create a simple web page that contains 3 text fields. Have the user enter a number in each of these. Make the size of these text fields 3.

Your page should have two buttons. One button should say: "Add the Numbers", a second button should say: "Multiply the Numbers". Each of these buttons should connect to a separate function. In other words, you will now have two different functions in your <script> section.

Then, depending on which button was clicked, output to a div section either sum of those three numbers, or the product.

You must use concatenation when you output. For example, if the user entered 3 and 5 and 1, and clicked on the 'add' button, your output should show exactly the following (albeit with whatever numbers the user entered):

The sum of 3 and 5 and 1 is 9.

Have a line of <h1> text at the top of your page that says something like: “Web Calculator”.

In an *external* style sheet create a class called: format-title. , This class should change the foreground color to something other than black. Also change the background color. Change its width to something like 400 pixels (you can decide). Again, do all of this inside an external style sheet.

Apply the format-title class to your <h1> tag at the top of your page.

TIP: When creating the concatenated section discussed above, do NOT try to do the entire statement at once. Create it in pieces and test each one. For example: first output "The sum of" and make sure it works. Then output "The sum of " and the first number and make sure that works, etc. It's reeeeeaally easy for a bug to creep in to elaborate concatenated statements. So get in the habit of creating them in pieces and life will be much easier – particularly if you are trying to figure it all out for the first time.

Have semantic tag sections for heading, and main. Also have a div section somewhere inside your main section for outputting the results

Other:

Answer the following questions at the bottom of your page. Place all of them inside an HTML comment so they do not show up in the browser when your page loads.

· As an HTML comment at the bottom of your page, indicate why it was necessary to use the parse function for this page.

· Should you use parseInt or parseFloat here when parsing these values? Why?

· Explain why, in the instructions below, I said you should NOT submit a ZIP file to the web server. That is, if you want to make your page visible on the web, why does it not make sense to upload a zip file to a web server?

 

(6 points) Set up your FTP Account

Upload all of the documents for this page (HTML, image(s),external CSS file) to your folder on the web server.

NOTE: Do NOT upload any zip files to the web server. Web servers don't know how to work with zip files. In this course, zip files are only for submitting assignments to D2L.

Provide the URL to your web page: In the comments in the D2L submisson page, provide a working URL to this file. For a review on how to come up with the appropriate URL, be sure to review the FTP lecture as well as the other resources (e.g. video and tip sheets) that I have made available to you on the Resources page.

I should be able to paste your URL into his browser window and view your page.

You will be required to do this for assignment #4 as well.

 

SUBMISSION REQUIREMENTS:

· In addition to uploading one of your pages to the web server, also zip ALL of this week’s files (html document, and any associated files such as images) and submit to the D2L submissions folder.