CIS89C: Client-Side Programming with JavaScript

Week 6

Assignment 6


DOM and Events


Due Date: Week 7 Day 1
50 points (Layout: 10, Content: 40)

DO NOT USE ANYTHING THAT WE HAVE NOT LEARNED YET. THE LESSONS STOP AT WEEK 6. We want to learn step by step, i.e. be able to use what we have learned during the first 8 weeks.

Think along the line of your business, hobbies, or personal Web site.

Create a What's New page if you do not have one. If you have it on your Website right now, modify it to add the DOM and events.

For the What's New page, display text with an image of the product that is new with the following requirements (make sure to have the same design and layout as the entire Website with the navigation):

  • Create an id with a stlye: font size, weight, color; width, height, align text center, background color, position absolute with top and left.
  • In the body, include a div with the created id to display the message with an image of the product
  • Upon loading the page, fire a function to do the following:
    • When the user clicks on any position on the page, the entire box containing the text and image moves to that position and stays there until the users clicks again somewhere on the page and then it moves again.
    • Use the Client coordinates to get the clientX and clientY.
    • Use the Page coordinates to get the pageX and pageY. So they are the offsets from the Client coordinates. You then have the top and left values.
    • Now you can create a new style for the top and left values (update the current ones).
    • Get the id of that div (box).
    • Set the attributes for style. It's done. The box moves to that new left and top position.

    ass6
    Click on a position on the page. ass6
    Click on another position on the page. ass6

    Make sure to read the requirements very carefully. Once your assignment is submitted, it's not allowed for you to redo it. I do not regrade. One day late is 10% off. A perfect assignment with more than 2 weeks late will get a maximum of 10% only.

    Email me in the format shown below to inform me that your lab is ready to be graded. I highly suggest you send yourself a courtesy copy (cc).

    {Your name}
    {Your Voyager account name (e.g. xyz36459}
    {Class: CIS89C}
    {Assignment #6}

    I cannot grade if I don't receive your email.