CSCI 121 - Lab 8, part 3

Lab Resources

• Brackets - Public domain code editor
• Google Account - Google account
• Google Drive - Cloud document storage

Lab Instructions

This lab is the third of three parts. In this part you will add a simulated search feature to your website. The purpose of this search feature is so that you display your proficiency in developing JavaScript functions that contain conditionals and then using said in your website.

1. Continue editing lab8.html and lab8.css
2. Specification:
1. Your website must contain a navigation area that has at least five (5) menu choices each linking to simulated pages (as already done in labs pt 1 and pt 2).
2. The navigation area must also include a search field for entering search criteria.
3. You must develop a JavaScript function that will be handled by your search field such that:
• The user may enter any search string and press search button (if your page has one) or enter key.
• Javascript function will be called to perform the search.
• Inside the search function a conditional will be used (if/else if/else, if with complex conditional and else, or switch, etc...) such that if the search string entered matches one of the pages of your website then that page will be navigated to (shown while others are hidden).
• If search string does not match one of the page titles then present the user with that information either as an alert or in a notification in some area of the website.
4. Following is an example of a website layout:
• 
5. Given the website layout and navigation items in the sample above, the website would respond to the following search strings (your list will likely be different):
• home
• projects
• pictures
• about
• contact
• Note: If one of your menu items is multiple words only the first word need be used in the search if unique, and if not unique then use as many words from the menu item ensure uniqueness.
3. Important notes/hints:
1. Please check that your final version is complete (all specification items from parts 1, 2, 3 included).
2. Make sure the final version of the website is "portfolio worthy!"
4. Submit final version of your lab to the professor by 11:59pm on Friday, December 9th by:
• Creating a folder in your Google Drive named: Lab 8
• Uploading the lab8.html and lab8.css files (and other files as needed) to Google Drive Lab 8 folder.
• Sharing the Lab 8 folder with thomas.rogers@millersville.edu.