For this assignment, you'll use the same template you created in Assignment 0 along with your library from Assignment 2 to create an interactive page with multiple JavaScript based features.

Part 0: Assignment Set Up

NOTE: While this part of the assignment is ungraded, all directions must be followed exactly or your assignment may not be collected.

1. In "public_html/courses/MIS_370/assignments" directory, create a file called "assignment3.html" (or .php if you prefer). You can use the template and css from Assignment 0, keeping the header and footer as before but removing any inner content from your <div>s, <main>, and <aside>.
2. You will be adding content to the various HTML elements within your template. How you choose to identify these areas is up to you (feel free to add id's or other attributes as needed.)
3. Create a file called "assignment3.js" within your "public_html/courses/MIS_370/includes" directory. Refer to this file by including <script src="PATH/assignment3.js"></script> (with PATH replaced by the correct relative path to your .js file) within the body just before </body>. All JavaScript code for this assignment should appear in this file, not within the assignment3.html file. The only exception is code that is already present in your library.js file from Assignment 2.
4. The theme for this page will be travel. Choose a country or area that you would like to advertise.

Part I: Slideshow

In the <main> area of the page, create an interactive slideshow, similar to the one constructed in class. You can decide how to structure this slideshow - the HTML and CSS do not have any specific requirements. The images should reflect the theme of your page (such as pictures of people, landscapes, food, or other interesting details from the region). Your slideshow must incorporate the following features:

1. A minimum of five images that appear to be the same size. Your images can be edited to a fixed size, or you can handle differently sized images with CSS or JavaScript. You may use <img> elements or use the background-image method used in class.
2. The images should automatically change every five seconds, and should continuously cycle through all images.
3. Rather than creating elements that allow the user to skip to a particular image (such as the 'dots' in our class example), you should include "forward" and "back" controls that allow the user to skip to the next image or the previous image. These elements could be buttons, text elements, or any other style that you prefer. The event listeners on these elements should be added in your script. The images should again cycle continuously with these controls. If the user is viewing the last image and clicks on the "forward" element, the first image should be displayed. If the user is viewing the first image and clicks the "back" element, the last image should be displayed.
4. There should be some way for the user to pause and resume the "autoplay" slideshow. You do not need to pause the show when the previous/next elements created in the last step are clicked, but you are free to add this feature.

Part II: RSS Feed

In the <aside> area of the page, add some content delivered by an RSS feed, as demonstrated in class. Your feed can be from any source, but should fit the theme of your page. Keep in mind that the properties of each 'data' object will differ by feed source, so you may want to log an entry to the console to see what properties/values are available. You do not need to include images or dates, but your page should display content from a minimum of two properties (such as a title and description, title and image, etc) as well as a link to the related article.

Once you found a feed source, you can convert it to JSON using the rss to json converter.

Part III: Form

In at least one of the <div> areas of your template (beneath the main and aside areas), include at least two input fields asking for information from the user. A submit button should be included as well. On submission, the input fields should verify that the input is of the expected type and return a message or reformat the provided information. Examples could include the user's name (entered as First Last and reformatted as Last, First), a date when the user might be planning a trip to the destination your page is designed around (you could require a particular format and verify that it was entered correctly), etc. You are not required to use regular expressions, though doing so will be considered toward the "extra" portion of your grade.

Part ???: Extras

The remaining 15% of your grade will be determined by the overall effort and time you put into the assignment. Some suggestions include the addition of captions for your slideshow, styling your page to match the travel theme, or using JS libraries to add features that were not part of the original assignment.

• Your code should reflect best practices as discussed so far in class. This includes semicolons at the end of lines, indentation of code blocks within functions, etc. Points may be deducted from otherwise functional code if it is poorly written and/or difficult to read. Do NOT minify your code.
• All CSS should be your own - you are NOT permitted to use frameworks (Bootstrap, Foundation, etc) for this assignment. All extraneous lines of CSS should be removed before your assignment is collected.
• This is not a group assignment. You are expected to produce your own work and follow the course collaboration guidelines.
• It is your responsibility to make sure you can access the server and modify your directories. You are not required to access the server from home, but it is highly recommended you attempt a connection if you plan to do any work outside the labs. All assignments in this course will be collected from the server - it is your responsibility to make sure you are able to fulfill this requirement.
• Your HTML and CSS work should validate and follow best practices.