Lesson 19: Cookies

For this exercise, we're going to update Events.html from lesson 16, creating a new page, Events2.html. The Events.html page includes a pop-up window to display who's planning to attend an event (the class reunion for Flying Drones Academy class of 2018). There is also a link to sign up to attend, which, you may recall, ended up setting up an email.

This time, we're going to change that link to point to another new page, newAttendee.html, that includes an <input> element for you to specify the name of a new attendee. You'll put that name into a cookie and then provide a link back to Events2.html, which will get the cookie value and add it to the list of attendees so it will appear in the pop-up window of attendees.

So here are the steps for the first page ...

• Open Events.html and before you forget, save this as Events2.html
   
• In Events2.html, make these changes:
   
  • After the link to the style sheet, add a script element to bring in cookies.js
     
  • Inside the existing script element:
     
    • Define three new variables: newOne, newAttendee, and Count
       
    • After the WhoIsComing() function definition, add a new function definition: addOne(), with this logic:
       
      • Get the value of the cookie "newOne" into newAttendee
      • If newAttendee is not equal to -1:
        • Put the number of elements in the attendees array into Count
        • Assign newAttendee to the Count^th element in the attendees array
        • Set the cookie "newOne" to be ""
           
  • In the body element, add an "onload" event handler that invokes addOne()
  • In the first <p> element, change the event date to make it contemporary
  • In the second <p> element, change href=mailto:CO@FDA.com to href=newAttendee.html

 

And here are the steps for the second page ...

• Open html_skel and before you forget, save this as newAttendee.html
   
• After the link to the style sheet, add a script element to bring in cookies.js
   
• In the body:
   
  • Code a <p> element with text "Enter the name you were known by at the Academy:" followed by an <input> element of type = text, a size of 40 and with an id of "inName"
     
  • Code an <a> element with an href of Events2.html and an onclick event handler that sets cookie "newOne" to have the value from the <input> element

 

Testing (either locally from your MyWebFiles, or upload the two files and test from your server) ...

• Start with Events2.html:
• Click on the link for the pop-up window "Click here to see who has already signed up" and check the values
• Click on the link "Click here to sign up a new attendee", which takes you to newAttendee.html
• Enter a name and click on the link "Click to submit name"
• Click on the link for the pop-up window "Click here to see who has already signed up" and confirm the new name has been added

 

Exercise stretch - deal with cookies not enabled situation (optional) ...

• In your <script> element, declare a variable, 'enabled', initialized to true
   
• Add a function, checkCookiesEnabled(), in your <script> element; this function should ...
  • Use setCookie to set 'tester' to 5
  • Then, if getCookieValue of 'tester' is -1 (which shows that cookies are not enabled):
    • Set the variable 'enabled' to false
    • Set the 'hidden' attribute for the element with id 'getNew'
       
• In your function definition for addOne() bound the code so it only runs if 'enabled' is true
   
• In the onload event handler in your body element, add a call to checkCookiesEnabled() before the invocation of addOne()
   
• In the second <p> element, add an id of 'getNew'
   
• To test, you'll need to disable cookies in your browser

 

Notes:

• Although the standard says blanks are not allowed in cookie values, I found that blanks in cookie values are supported in every browser I tested
   
• This code will not let you add more than one new name. This is because the page is not saved back on the server after adding a new name, so you are always updating the same version. To update the page on the server takes a CGI which we'll cover in the advanced course