JQuery assignment
Description:
For this lab, I have provided some starter files with an html page, a css stylesheet and an external JavaScript file that contains some arrays. Your job will be to write the scripts to modify the page to customize it based on the date. You will add and modify html, text, images and styles for the month and season. In order to test all the functionality, you may have to 'trick' the program during testing by entering a different month to see if the changes occur as expected.
Requirements:
Download the html, css and JavaScript files for this lesson.
Add a link to the jQuery library and the external JavaScript file to the html page.
In the JavaScript file, add the $(document).ready function to hold the code below
Get the current date.
Use a date function to get the current month and use it as an index to the months array to get the month name.
Use an if statement to see if the current month is December. If so, add an h3 tag below the h2 slogan tag that says "Happy Holidays!". (after method)
Modify the h3 tag with id='month' to include the current month name: i.e. "Tips for October" using the month name you retrieved from the current date.
Get the current year from the date and add it to the end of the copyright paragraph (append method).
Use the month number as an index to the specials array and modify the #specials div to display the text and html from the array.
Use a switch statement for the month number to identify the season and create some variables to use to modify the page:
Months 11, 0 and 1 (December, January, February)
season = 'Winter'
background image = 'winterbg.jpg'
season color = "#00f"
season index = 0
Months 2,3,4 (Mar-May)
season = 'Spring'
background image = 'springbg.jpg'
season color = "#d7d"
season index = 1
Months 5,6,7 (June-Aug):
season = 'Summer'
background image = 'summerbg.jpg'
season color = "#006400"
season index = 2
Months 8,9,10 (Sep-Nov)
season = 'Fall'
background image = 'fallbg.jpg'
season color = "#930"
season index = 3
Change the page background image to the seasonal image
Change the div with id=seasontips to the html and text in the tips array using the season index as the index
Change the strong, h1, h2 and h3 tags to the season color
Add a class to the 'specials' id using the season as the class name
Test to make sure the changes work as expected. You can enter a date when creating the Date object to try different seasons.
Attachment:- Assignment.rar