Lab 5

Objectives:

• Use conditional statements (if and switch)
• Use jQuery
• Modify text and html on a web page dynamically
• Modify css on a web page dynamically.

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.
• Upload your files to the server. Test and submit the assignment
• Your grade will be based on the following rubric:
  

  Lab Requirement	Point Value
  Add links to jQuery libraries and external JavaScript file	5 points
  Use $(document).ready	5 points
  Get current date and month name	5 points
  Add special greeting if month is December using .after() method	10 points
  Display month in heading and year in copyright	5 points
  Use jQuery to display specials based on the month	10 points
  Use switch statement to create variables based on the month and season	5 points
  Use jQuery to change the background image and heading color using the variables from the switch statement	10 points
  Use jQuery to change the tips html using the tips array based on the season index	10 points
  Add the class to the specials id for the season	5 points
  Page displays and script executes as expected on the server	5 points
  Total:	75 points

Lab 6

Attached Files:

• yellow_pompom_mum.jpg (93.426 KB)
• js.css (1.466 KB)
• glossary.html (14.039 KB)
• rose.jpg (3.124 KB)
• coneflower.jpg (20.848 KB)

Objective: Use jQuery events to trigger actions on a web page

Description:

For this lab we are going to add a glossary page to our site that will have some interactivity. When we mouseover one of the headings it will change color. We will hide the botanic names for each flower and display it only when the user clicks on the flower name. For some of the flowers, we have images that will display when we hover over the flower name. Then we will add a keypress event that will jump down to the first flower on the page that starts with the letter typed.

Requirements:

• For this lab, we are going to add a glossary page to our website
• Download the attached glossary.html file and the 3 image files to your website folder.
• Modify the css file to add the following styles:
  #pltTitle { color: #07a;}
  .botanic { color: darkgreen;
  font-style: italic;}
  .col { width: 20em;
  padding: 1em;
  float: left;}
  footer { clear: both;}
  
• View the page in the browser. You should see a fairly plain page with 2 columns of flowers listed.
• Create an external javascript file and link it to your page. Also link the jquery libraries to your page.
• First, let's add a mouseover event to change the color of the headings, h1 and h2 using the css method. You can change them to any color that you choose.
  Follow that with a mouseout event to change the color back to the original color.
  Test to make sure that is working before moving on to the next step.
• Next we are going to hide all of the botanic names. Then when you click on a flower name, we will display the botanic name for that flower.
  • The botanic names are all in span tags with a class of 'botanic'. Start by hiding all of the botanic names. This should be the first statement inside the document.ready() function so they will be hidden immediately when the page loads.
  • Each flower line is inside a div tag with a class of 'flower'. Add a click event to the flower class that will first hide the botanic class (this is to hide any previously displayed botanic name) and then show the botanic name for the current flower only.
    To do this, we are going to use a method called .children that will only select children of the current class and pass it the botanic class and then use the show() method to display it:
    $(this).children('.botanic').show();
    We will learn more about the .children method in lesson 8.
  • Save your files and test to make sure that when you click on a flower name, it displays the botanic name for that flower only and hides any other botanic names.
• The next event we will add is a hover event that will display an image for certain flowers. We are only going to do this for 3 flowers in the list. These flower names have been placed inside of a span tab with a class of 'pic'.
  • In the css file, add a thin dashed bottom border on these span tags so the user knows which ones they are. (.pic {border-bottom: thin dashed darkgreen;})
  • The flowers are currently showing at the bottom of the page. Each one is in a div with a class of 'imgdiv' and a unique id. Since we want the images to display next to the name, we need to use absolute positioning, so add .imgdiv { position: absolute;} to your css file.
  • When the page displays, we want this imgdivs to be hidden and only show when the user hovers over the name, so add the hide() method to the .imgdiv class at the top of the document.ready() function - right after hiding the botanic names.
  • Create a hover event for the .pic class. We will need to get the position of the cursor when we hover over the .pic span tag so we know where to place the image, so be sure to add the evt parameter to the anonymous function.
  • For the first function (mouseover):
    • Each picture has a title attribute that represents the name of the associated flower div. Get the title attribute and concatenate it with the # in front to create the id for the .imgdiv that you want to display. Save this as a variable.
    • Get the X and Y coordinates of the event and save them in variables. Add 150 to the x coordinate to move it to the right so it doesn't cover the name.
    • Set the top and left css properties of the div to display (using the variable you created) to these x and y coordinates and then show the image.
  • For the second function (mouseout):
    • Get the title attribute to create the id of the imgdiv just as you did in the first function (these are local variables so you can't just re-use it.)
    • Hide the image div.
  • Test each of the 3 flowers to see if the image shows and hides as expected.
• Finally, we are going to add a keypress event so that if you type in a letter, it will jump to the first flower that starts with that letter in the list.
  • Add a keypress event.
  • Get the key pressed and convert it to the appropriate string character. Convert to lowercase (in case they entered an uppercase letter).
  • In the html, the first flower for each letter has an id equal to the lower case letter. To move to that location we want to use the anchor (#a, #b, etc.).
  • We will use a JavaScript property called window.location and assign it a value of # + the letter entered to jump to that location on the page:
    window.location="#"+keyPressed;
  • Test by typing in different letters to see if it works as expected. (I think all letters except x are present).
• Upload your files to the server. Test and submit the assignment.

Lab 7

Attached Files:

• rose.jpg (3.124 KB)

Objective: Use jQuery effects and animation

Description:

• For this lab, we will modify our index file (from lab 5) to include a newsletter signup form. The form will be hidden when the page loads, but will display when the user clicks a signup link on the page. When the user submits the form, we will display an alert and stop the form from submitting. We are also going to add a hover event to the slogan to fadeout and fadein an alternate slogan. Finally, we will add some animation to display an image when the page loads.

Requirements:

• For this lab, we will be adding on to the index page that we created in Lab 5.
• Add the following html code to the page before the <hr> and <footer>:

<div id="newsletter">
<p><a href="#" id="signuplink"><span id="openclose">+</span> Sign up for our newsletter</a></p>
<form name="newsSignup" method="post" action="thanks.html" id="newsSignup">
<p><label>Name: <input type="text" name="uname"></label></p>
<p><label>Email address: <input type="email" name="email"></label></p>
<p><input type="submit" value="Sign Up"> </p>
</form>
</div>

• Hide the newSignup form when the page loads.
• Add a click event to the signuplink anchor tag to do the following:
  • Use the slideToggle function to show or hide the newsSignup form.
  • If the openclose span contains a +, change the + to a -.
  • Otherwise, change the - to a +.
  • Be sure to cancel the link default action.
• Add a hover action to the slogan element to do the following:
  • On mouseover:
    • Fade out the element at a normal speed using linear easing
    • Once the text is faded out (hint, use a callback function), change the text to 'Hand Picked Just for You' and then fade it in slowly using the swing easing.
  • On mouseout:
    • Fade out the element at fast speed using swing
    • Once it is faded out, change the text back to 'The Power of Flowers' and fade in slowly using linear easing.
• Add the following element to the bottom of the html page below the footer:

<img id="rose" src="rose.jpg" alt="Rose">
(image file attached above)

• Add the following to the css file to position the rose as an absolute element inside the container div with opacity 0:

#rose {
position: absolute;
right: -100px;
top: 20px;
opacity: 0;
}
#container {
position: relative;
}

• • Add animation in the document.ready function to move the rose element to a position of right: 100px and opacity: 1. When the page loads the rose should move into position from the right side and fade in slowly using the swing easing function.
  • Add a submit event to the form to do the following:
    • Display an alert message: "Thank you for registering"
    • Hide the newsSignup form
    • Fade the signuplink anchor tag to 30% opacity
    • Stop the default action to submit the form
  • Be sure to link the external JavaScript file to the web page.
  • Upload your files to the server. Test and submit the assignment.