JavaScript Assignment #1 Solution

Grading Note: Grading will be based on whether your page does what it is supposed to do, but also that it is written properly with correct HTML 5, CSS 3, and JavaScript. If any of your assignment parts isn’t working right but you are turning it in anyway, be sure to indicate that within the Word document that you submit. Be very careful to submit exactly what it asked for (nothing more or less) to avoid unnecessary deductions.

Part 1: About Me

Write the HTML (and CSS) needed to produce this screenshot, shown below, with the following guidelines in mind:





Use proper HTML 5 syntax. Your name and assignment & part #s must appear in the “title” code (see the browser's tab above) and well as in the "h1" heading. Below that main page heading, write your own paragraph about yourself (should be at least 2 informative sentences.) Below the "My Favorite Things To Do:" heading, list 3 activities of your own that you like to do within an html ordered list as shown. After the "My Favorite Quote" heading, use an html “blockquote” to display a quotation that you like. Put the quotation in “quotes”. After the quoted text but still inside the "blockquote", use an html "br" (line break) tag and then use an html "cite" tag to identify the quote's author and source. If you cannot think of a good quote to use, you can find one on a web site like "brainyquote.com".

In the "head" section of your html document, use CSS to give the page a light colored background (something other than white) -- in the example I used “azure” (light blue), but you can use something different. Save your page as “a1p1.html”. In the browser, resize the browser window to more closely fit around your web page like was done in the above screen shot.

Use a validator to make sure that your HTML code is properly written and fix any issues it indicates. W3C has a good online validator that you can paste your code into: https://validator.w3.org/nu/#textarea

What to turn in

1. Into the given assigment 1 "turn it in" Word File, paste a screen shot of your “About Me” page as it appears in the browser. Use Word to “crop” and shrink the pasted screen shot down to a reasonable size as needed.

2. Next, in your code editor (like Brackets or Notepad ++), select and copy your page’s code and then paste it below your screenshot in that same Word "turn-it-in document. It must contain ALL of your page’s code.

Part 2: About Document.Write

Locate your part 1 html file using Windows File Explorer (or whatever file management tool you prefer.) Then copy your part 1 page (a1p1.html) and paste a copy of it within that same folder, calling the new copy a1p2.html. This will be your starting point for part 2. Next open your "a1p2.html" file in your preferred editor. Then modify the code in the "title" and "main heading" that shows "A1P1" so that it shows “A1P2” instead. Save your changes and test in the browser to make sure it is working right so far. Then return to your editor and rewrite the page's code using JavaScript as follows:

Use “document.write” statements in a script within the “body” area to write out the identical HTML that was used for A1P1. Begin your script in the body area of your document just below your paragraph about yourself. Your document.write statements should produce the HTML needed for everything from the “My Favorite Things To Do” heading and everything else down to and including the quote and citation. (Leave the existing a1p1 HTML intact for everything above the "My Favorite Things" heading on the page.) Close off the end of your script just above the existing </body and </html tags so that your script does not try to create those last 2 tags.

Keep in mind that the goal is for the page to look the same in the browser as your part 1 HTML did, but those last 2 sections of the page are to be created entirely by document.write statements. Be careful to manage your quote marks appropriately in that "blockquote" and "cite" area.

What to turn in :

1. Copy your page’s code and paste it where it goes in the given A1P2 area within that same "turn it in" Word document. It should contain ALL of your page’s code. Note that I do not need to see any screenshot for this one unless your code is not producing the same result as it should be – then you should include a small screenshot next to your code to indicate what is going wrong.

Part 3: Temperature Conversion

Using the formula shown on page 40 of your textbook, create a Web page that uses a prompt to ask the user what the temperature is in Celsius and then produces the equivalent temperature for Fahrenheit using "document.write" statements in a paragraph at the bottom of the page. For example, if the user types in 10 to the prompt, the last paragraph of your page should read “10 degrees Celsius is equal to 50 degrees Fahrenheit!” Begin by creating the necessary HTML 5 page structure to support this page. One way to do so would be to just copy the A1P1 page and remove some of the no longer needed activities and quote. You must have an “h1” heading at the top of the page identifying it as “A1P3 Temperature Converter” and a paragraph below it that displays (on the page) the proper formula you are using for converting the temperatures – so that the user knows how you are doing your calculations. Note that this "formula" is not shown in the screen shot below but is expected to be a part of your solution.

What to turn in :

1. In the given assignment 1 Word "turn it in" File, paste a screen shot of your “A1P3” page as it appears in the browser after entering a temperature and seeing the conversion results. After pasting it into Word, use Word to “crop” and shrink it down to a reasonable size, as needed.

2. Next, copy your part 3 page’s code and paste it below your screenshot in that same Word document. It should contain ALL of your page’s code.

Part 4: Alert -- It’s Freezing in Here!

Copy your A1P3 temperature page and add the following functionality to it. Use “if” statements to determine whether the Fahrenheit temperature you calculated is at or below freezing (32 degrees or below.) If it is, you should add the message “And that is freezing cold!” (See the example screen shot below.) This message should be produced with “window.alert” and not "document.write" (see sample screen shot below) . Put the “freezing message” at the end of the previous temperature message so they are displayed together as shown in the sample screenshot. Save this page as “a1p4.html” and adjust the main heading and title to reflect this is A1P4 (as needed).

What to turn in:

1. Copy your page’s code and paste it where it goes in the given A1P4 area within that same Word "turn it in" document. It should contain ALL of your page’s code. Note that I do not need to see any screenshot for this one.

Although you do NOT have to turn in a screen shot, here is what it might look like when it is working correctly: