Title: Assignment JS Module 1.1 ITSE 2402--Intermediate Web Programming
Course: Intermediate Web Programming (25436)

ITSE 2402 Intermediate Web
JS Module 1.1 Assignment

Assignment
- Using the Date Class
  - windSurfing.htm Page
    - Download, unzip, and extract the files for the WindSurfer Page Chapter 6 Files zipped and save in your module1 folder.
    - Using these files, complete step 1, Page 323.
    - I recommend when you change starting files, you rename them so that you always maintain a history of your work. Save index.html as windSurfing1.htm in your module1 folder. (Notice the addition of the number 1 in the name of the file. You can set your default choice for either htm or html. When I provide a file provided with the text, it will have the extension html. I save my work as .htm so that I can tell at a glance if I am working with the starting file or a file I have changed. You choose the method that works best for you.)
    - I have entered much of the code in hopes that you will spend your time studying the code rather than keying it all in and searching for typos. Please notify me if you find typos in my pages so that I can make corrections.
      1. I have provided the coding for:
page 323 steps 2 and 3
(The index page from Chapter 6 Files zipped has a close form tag. You only want one close form tag.)
Additionally, I renamed "FormProcessor.html" to "windProcessor.htm". page 324 steps 4, 5, and 6
      2. Save in the module1 folder. Your page should validate. View your page by clicking the preview tab on the right. Open your page in your browser. It should look like Figure 6-6 on page 325.
    - Continue with your windSurfing1.htm page and save as windSurfing2.htm.
      1. Step 1 on page 325 is to open index.html. Use windSurfing2.htm instead.
      2. Step 2 is to add a link that calls the displayCalendar() function. I think the location where to put it is a little confusing. Find your form tag. You will then see a table, a tr, a td, then inside that td is an h3 tag and a p tag. That is the p tag where you are supposed to add the code. After the input tag and before the close p tag. The code is:


    <a href="" onclick="displayCalendar(); return false">Select Date</a>

      3. For steps 3 - 11, I have provided the coding for displayCalendar() but be sure to study the instructions for the explanation of each section of code. I wrote the code in javaScript. And, with my desire for strict compatibility, I added backslashes '\' before all slashes '/' and backslashes '\' as required in strict validation. Since this is js and not html, it may not come up in your browser window and may require that you save and then open the file. If you download, then you will need to open the downloaded file. If it shows in your browser, then you can simply copy paste it into the head section of windSurfer2.htm page.
pages 325 through 329, adding the displayCalendar() function.
    - Continue with your windSurfing2.htm page and save as windSurfing3.htm.
      1. Step 1 on page 330 is to open index.html. Use the windSurfing3.htm instead.
      2. Step 2 is to replace the function heading. I actually included that with windSurfing2.htm because it was just easier to do it that way.
      3. I have provided the coding for:
page 331, steps 3 and 4
(The text has 2 closing td tags in step 3. I corrected that.)
      4. Open the page in your browser. It should look like Figure 6-8 on page 332.
      5. Test your links as shown in step 6.
- Accessing Number Class Properties
  - Continue with your windSurfing3.htm page and save as windSurfing4.htm
    1. Step 1 on page 335 is to open index.html. Use the windSurfing4.htm instead.
    2. Add the coding page 335, step 2.
    3. The following code is the code in step 3:


function calcGroupDiscount(groupSize) {
var dailyRate = 49;
   if (groupSize > 5 && groupSize <= 10)
     dailyRate = 49 * 0.9;
   else if (groupSize > 10 && groupSize < 25)
     dailyRate = 49 * 0.8;
   else if (groupSize > 24)
     dailyRate = 49 * 0.75;
   var groupRate = groupSize * dailyRate;
   document.forms[0].discount.value = groupRate;
}

    4. Complete steps 4 - 7.
    5. Test your page in your browser. Compare your page to Figure 6-9, page 336.

- Using Math Class Methods
  - Continue with your windSurfing4.htm page and save as windSurfing5.htm.
    - Step 1 on page 339 is to open index.html. Use the windSurfing5.htm instead.
    - Add the coding page 339, step 2.
    - Add the coding page 339, step 3.
    - Test your page in your browser. Compare your page to Figure 6-10, page 340. You will not have a comma in the group rate amount. If you want to add the comma use:
(.toLocaleString)
- Declaring Basic Custom Objects
  - Continue with your windSurfing5.htm page and save as windSurfing6.htm.
    - Step 1 on page 342 is to open index.html. Use the windSurfing6.htm instead.
    - Add the coding page 343, step 2.
    - Add the coding page 343, step 3.
    - Test your page in your browser. Compare your page to Figure 6-12, page 344.
- Update your project pages
  - Be sure that all your project pages use the same css. Make sure that there are no unbroken links. You can do this by copying the URL of the project home page, clicking on link checker, and pasting the URL into the text box on the link checker page. Then in the box next to "Check linked documents recursively, recursion depth:" put a 5. That will actually check every link on your site up to 5 levels. You will then be able to check that there are no unbroken links. If you link to pages that you have not created, either delete the broken links or create pages for your links to link to. Remember this project is to be part of your portfolio and you want it to be attractive.
- Update index page with links
  - Open your index.htm page in Komodo Edit.
  - Update your index.htm page to link to your pages in your module1 folder.
  - Upload your index.htm page and your module1 folder. (Be sure that you update all images and pages associated with the Coast City Windsurfing site.)
  - Be sure to test for validation.
  - Email jscholl@austincc.edu for grading.