MIS 370 Client Side Programming
Assignment 3: Travel Site
This assignment will be due by noon on Thursday, April 5
Part 0: Assignment Set UpNOTE: While this part of the assignment is ungraded, all directions must be followed exactly or your assignment may not be collected.
- 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
- 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.)
- Create a file called "assignment3.js" within your "public_html/courses/MIS_370/includes" directory. Refer to this file by including
</script>(with PATH replaced by the correct relative path to your .js file) within the body just before
- The theme for this page will be travel. Choose a country or area that you would like to advertise.
Part I: SlideshowIn 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:
<img>elements or use the
background-imagemethod used in class.
- The images should automatically change every five seconds, and should continuously cycle through all images.
- 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.
- 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 FeedIn 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: FormIn 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 ???: ExtrasThe 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.