Local Storage

  • Create a jQuery Mobile web site (new folder-Ex3)
    • index.html
    • css folder that includes a personal css file plus the jQuery Mobile css formatting file
    • js folder that includes jquery.js library file, the jQuery Mobile .js library file and your personal .js script file
  • Setup all links in your < head> section for a jQuery Mobile page
  • Enter YOUR NAME in the < title> tags AND your name and student number in a comment at the top of the index.html
  • Header area that includes Exercise #4
  • Create a 1x3 grid using ui-grid-b with 3 blocks. Use CSS to make the 1st block 40%, the 2nd block 25% and the 3rd block 35%. Include padding for all blocks and a different background color for each block. Remember this is a mobile assignment so any other formatting must take this into account (some scrolling is fine).
  • Block-A: Include input fields for the following...
    • Text field (with labelling) to retrieve a student's FIRST name with the default set as your FIRST name
    • Text field (with labelling) to retrieve a student's last name with the default set as your LAST name
    • Text field (with labelling) to retrieve a student's id (number) with the default set as your id (number)
    • A Flip switch for country designation with OFF being for a "Domestic" student and ON being for an "International" student. A text field should be placed beside or under the flip switch with the text field containing either "Domestic" or "International" depending on the position of the Flip switch. Must be set on load and changed whenever the switch is selected.
  • Block-B: Include buttons for the following...
    • A button to save data to local storage (text and an icon):
    • First name storage (your username appended with key/ex. doejFirst) that includes the data entered in the first name input field
    • Last name storage (your username appended with key) that includes the data entered in the last name input field
    • ID storage (your username appended with key) that includes the data entered in the ID input field
    • Based on the flip switch value, save either "Domestic" or "International" into storage (your choice of key name)
    • A button to retrieve data from local storage and place data retrieved in Block-C (see below for output formatting) with text and an icon; Must include an alert to inform the user the button was selected.
    • A button to selectively clear the country designation key/value pair in local storage. Must include an alert to inform the user the button was selected.
  • Block-C: Include output areas for the following that are filled in when retrieve button is selected from Block-B...
    • An output area for name; Must use ES6 to include: Student Name: last name, first name
    • An output area for student id (number)
    • An output area for country designation
    • ALL output areas must include labeling
  • Footer line that includes YOUR name
Academic Honesty!
It is not our intention to break the school's academic policy. Posted solutions are meant to be used as a reference and should not be submitted as is. We are not held liable for any misuse of the solutions. Please see the frequently asked questions page for further questions and inquiries.
Kindly complete the form. Please provide a valid email address and we will get back to you within 24 hours. Payment is through PayPal, Buy me a Coffee or Cryptocurrency. We are a nonprofit organization however we need funds to keep this organization operating and to be able to complete our research and development projects.