Building off Project
Important Notice: Read all the requirements below. This is the second part of the project, building off Project #1. Each part of the project will be equally weighted. NOTE: Make sure to zip all your files (i.e. 3 HTML files, 1 CSS file, all image files) in a folder. Do not submit individual files to D2L or else it will mess up the formatting. ● Link to instructions on how to zip and unzip your files: Mac vs. Windows MAKE SURE YOU READ ALL OF THE INSTRUCTIONS CAREFULLY BEFORE STARTING, ESPECIALLY THE NOTES AT THE END OF THE PROJECT. Overview For Project Part #2, you will be creating one new HTML page. All of the Javascript will go on the new HTML page. This HTML page will link to the other two pages from part #1 through the “navigation bar” in the 2 nd row of the table. You must use an IDE for this assignment. You may use Sublime Text, the IDE you should have downloaded from the lecture. Alternatively, if you have another preferred IDE, you may use that. You are not allowed to use any code generators for this part of the project. You must hand-type all of the HTML and CSS. Do not use tags beyond what is in your HTML, CSS, and JavaScript handouts (though you are allowed to use CSS properties/values not in the notes). Other tags and attributes are off-limits. DO NOT use the style attribute with any tag. Also, you may see examples online of people embedding their CSS in their HTML files with the use of a tag. Do not do this. All your CSS needs to be in its own file. You are only allowed to use tools and techniques I have shown you in the handouts or during class lectures. Use of any feature not covered in handouts or lectures will result in a zero for that portion of the project. For example, I did not show you how to change text color with JavaScript, but I did show you how to do it with HTML and CSS. Goal Reference image attached below. Please note that your page might look slightly different based on your chosen country and their corresponding temperatures. For a good chunk of your assignment, you will need to use Javascript to display the correct items on your webpage. If you use HTML, you will not receive credit. Please read the directions carefully to figure out which sections allow HTML and which require you to use Javascript. Culture Page: TIP: Save your file and check your web page periodically to ensure your changes are being correctly reflected. ——————————————————————————————————————— ● You will be adding on to the first part of the project. , You will be creating a page with the subject of “The historic culture of the country”., ● When adding your own information, the subject material should be clean. ● No additional downloads for this project. You will create everything from scratch. Culture Page 1. Save the file as TheCulture.html in the text editor. 2. The table structure of the page will be identical to the first two pages you created including the link to the CSS file. The easiest thing to do would be to copy and paste one of those pages into TheCulture.html and change the third row’s contents. ● Change the tab title in the <head> tags to say Culture. ,. ● Change the text in the first row to the name of the country followed by a hyphen and then the word Culture. So, in my example, it would be Peru – Culture., ● In Row #2, make the word Home link back to the home page., ● In Row #2, make the word Cities link to the Cities page. ● In Row #2 cell #3, put the word Culture in the cell but don’t make it a hyperlink., ● Keep the 4 th row of the table the same. 3. Go back to your homepage and your cities pages and add a hyperlink to this new page in the third cell of the 2 nd row. The text should say Culture and it should link to the TheCulture.html page. 4. For the body of your page in row #3, I want you to replace all the text (and any pictures) with a total of 200 words of text about the historic culture of the country you have chosen. ● For example: My country of Peru’s culture originates with the Incas. I might talk about the way they lived, the food they ate, and the traditions they had that have carried over to modern-day Peru. 5. Ensure that you are using at least one <p> tag in the Row #3 text to ensure that your CSS is working on this page too. 6. After the 200 words, but still in row #3, I want you to add one simple horizontal rule tag. Javascript Tasks Note: The following tasks should be completed using JavaScript instead of HTML. 1. Do some research and look up the average Fahrenheit temperature for your country in your birth month and also the average Fahrenheit temperature for your country 3 months after your birth month. ● For example, I was born in July and the average temperature in Peru in July is 66 degrees Fahrenheit the average temperature 3 months later in October is 68. ● Utilizing the keyword var, create 3 variables in your javascript file with the following names: current_temperature, future_temperature, and temperature_difference. ● Now assign the numeric value to the first two variables. In my case, I would assign the number 66 to current_temperature and the number 68 to future_temperature. 2. In a separate programming statement, subtract the current_temperature from the future_temperature and save the results in temperature_difference. ● In my case, the value in temperature_difference would be 2 (because of the math: 68-66). 3. After the <HR> tag from step 6 in the Culture Page section, put the following text with a document.write programming statement: The average temperature for countryname in birthmonth is current_temperature degrees. ● Replace the word countryname with the country you are using, replace the birthmonth with the month you were born, and then concatenate the value stored in the current_temperature variable (you do not need to italicize or bold this text). ● For example, I would have used the text: The average temperature for Peru in July is 66 degrees. 4. Using a separate document.write statement, add a line break after step 3’s text. 5. Create a while loop that: ● Will print the following: oo- to the screen every time through the loop (if you are wondering that is two lowercase letter “oh’s” with a hyphen after them). Otherwise known as the letter that follows the letter “n” in the alphabet. ● Add this after step 4’s line break. ● The loop will repeat based on the absolute value of the number stored in temperature_difference. ○In my case, the absolute value of 2 is 2. As a result of the math, my loop would repeat 2 times and print oo-oo- ○ You may find the abs method described here useful: https://www.w3schools.com/jsref/jsref_obj_math.asp ● Note: If there is no temperature difference between your 3 months, then your code will skip over your loop, and that is okay. It is not okay to not have the loop there though aka you must have a working while loop. 6. Using a separate document.write statement, add a line break after step 5’s oo- text. If Statements Note: The following tasks should be completed using JavaScript instead of HTML. 1. Utilizing the data you collected and stored in your variables create a single if statement that will do the following: ● If the temperature_difference value is less than zero, use a document.write statement to print the following text in a blue italicized font color: The weather is getting colder. ● Else if the temperature_difference is equal to 0 or 1 (you must use a logical and or logical or), use a document.write statement to print the text in a green italicized font color: The weather is pretty much staying the same. ● Else if the temperature_difference is greater than 1 but less than or equal to 4 (you must use a logical and or logical or), use a document.write statement to print the following text in a red italicized font color: The weather is heating up a little bit. ● Otherwise, print the following text in a purple italicized font color: The weather is getting really hot. ● Note: Make sure you are getting the correct results. Test your code for all four scenarios to make sure every branch of the if is working correctly. ● Common mistakes: ○Make sure all numeric values are saved and compared as numbers and not Strings. For example, assigning a numeric value to a variable called my_answer would be something like 20 not “20”. Also, when comparing values, you would check if(my_answer>15) not if(my_answer>”15”) as the latter would be comparing a numeric value against a String value. ○When utilizing AND or OR operators, make sure each condition is complete. For example, if(my_answer==24 || 36) would be incorrect, but if(my_answer==24 || my_answer==36) is correct. ○Make sure when using the <font> tag inside the document.write statement, you use a corresponding </font> tag for each color change. 2. Using a separate document.write statement, add a line break after step 1’s text. 3. Inside the <head></head> tags, create a section of <script> tags, and inside those script tags, add a single javascript function: ● Name the function determineMonth that takes a single parameter. ● Name the parameter in the function header theMonth. This parameter will hold a numeric value representing the month of the year passed to it. ● In the body of the function, use a single if statement with many else if statements to determine which of 13 possible values to return. ● The function will return a single String value representing a month spelled out. For example, if the function is passed the number 4, the function will return the String “April”. If on the other hand, the function is passed the number 12, it will return the String “December”. ● If the function is passed a value outside of a 1-12, it will return the String “Undetermined”. ● Note: The function does not print anything. It simply returns a String value. 4. Back in the main body of your page, after step 2, print the following: I prefer the weather during birthmonth over the temperatures of 3monthslater. ● Replace the text birthmonth with the value returned from the function determineMonth when you pass it the numeric month that you were born. So in my case, I would utilize the value passed back from the following function call since I was born in July: determineMonth(7). ● Replace the text 3monthslater with the value returned from the function determineMonth when you pass it the numeric month that occurs 3 months after you were born. Note: Be careful here. The maximum month is December. If you were born in October, 3 months later would be January. So in my case, I would utilize the value passed back from the following function call: determineMonth(10). ● Note: Be careful as your function should react to any numeric value passed to it. ○ Have you tested it with values below 1 and above 12? Is it properly returning the value “undetermined”? ○Is it returning the correct value for the number passed into it? Building off Project For example: if you pass the function a value of 3, does it return the word “March”? Does it work for the other 11 months? ● Did you spell all the months correctly? You will lose points for spelling errors. Watch out for… ● Your final submission should include all picture files, 3 HTML files, and 1 CSS file. I know the picture files and CSS haven’t changed since Project #1, but I want all the project files in the submission. ● Have you added space around where your variables are concatenated with other text? For example, I prefer the weather duringAprilover the…. (this text should include a space on both sides of “April”). ● Did you update the Project #1 HTML files to link to the new HTML page created in Project #2? ● Little mistakes in JavaScript will cause the whole JavaScript section to fail. This can cause the part or all of the page to load blank. Watch out for little mistakes like missing brackets, quotation marks, or plus signs. ● Comment out sections to track down a bug. ● Make sure you have completely read all the instructions. The details matter and can be the difference between an A and a C. ● I do not go back to regrade Project #1, but you should try to fix any mistakes that may affect Part #2 Building off Project . ● Note: It is better to turn in an incomplete project than not to turn one in at all. ● Note: It is better to turn in a project that loads correctly with broken code commented out than to leave the errors running in your program. ● The file you are submitting to D2L should have an extension of .zip, not .html When you finish, you should submit a zipped folder with the 3 HTML files, the 1 CSS file, and all the pictures as a zip file (supplemental instructions on creating zip files are provided at the very beginning of the assignment). Failure to submit the correct zipped format will result in a 0, so email me if you are confused or do not know how.