JavaScript 1: PHOTO GALLERY

Project Description You have been hired as a webdesigner for afictitious company called Creative Genius Web Design. Your first day on the job your supervisor asks you to create a simple five-image photo gallery web page. Photo galleries provide an interactive way to view imagecontent on websites.
Project ComponentsA complete photo gallery must feature the following components on the HTML web page:1. A Title (e.g. Animals in Character in the screenshot above)2. Five thumbnail images (refer to Sourcing Free High-Resolution Images on the Internet below)3. Large image areatodisplay a larger version of the selected thumbnail image4. Descriptive captions that are relevant to the image being displayed(50 words or less)Project FunctionalityA complete photo gallery must provide the following functionality:1. A JavaScript mouse event will: (a)Display the matching caption when the thumbnail image is hovered over.2. JavaScript functions (2 or 3) will: (a)Add a border to a thumbnailimage when it is clicked remove the border when anotherthumbnail image is clicked (hint: use a for loop that targets CSSclasses)*(b) Display the selected thumbnail in the large image area (hint: use an if/else statement)*(c)Add or alter any element in the DOMNOTE 1:* (a) and (b) above may be combined into one function.ProjectRequirementsThe zipped file attached to this assignment provides the folder structure that is required for this project. Instructions for how to unzip the file on a PC or a Mac can be found at visitchttp://www.wikihow.com/Extract-Files. Individual files have also been provided. All files must be externally linked in their respective image style and script folders. Points will be deducted if embedded or inline styles are used where not instructed.
Submission RequirementsPlease submit the following to your Assignments Folder:1. Host your working photo gallery.js 2. Submit the HTML files you used to create the webpage to your project Assignments Folder3. Write a Project Reflection (see description below)
4. Style.cssProject ReflectionAnswer the following questions when you submit your assignments files. a. What is the theme of your design? b. Where did you find your photos (include URL if image was downloaded from the Internet)? c. Whatmodifications did you make to the images (describe what you did to complete the assignment)?d. What issues or challenges did you face completing this project? Please submit your Project Reflection as a Microsoft Word document or just copy and paste your answers in your Assignments Folder’s text box when you submit your assignment along with the rest of the required project files. HTML ValidationYour pages should validate without errors using the W3C HTML Markup Validation Serviceat http://validator.w3.org.
How to do this:
If there are errors correct them. Ignore errors on the image tag where . and % are indicated.Helpful ResourcesThis assignment will require you to interact with the DOM. The links below highlightspecific concepts and topicsthat you will need to learn in order tocomplete this assignment successfully.
1. Types of Mouse Eventshttps://www.w3schools.com/jsref/dom_obj_event.asp2. Targeting IDshttps://www.w3schools.com/jsref/met_document_getelementbyid.asp3. Creating Loopshttps://www.w3schools.com/js/js_loop_for.asp4. Targeting and Altering HTMLhttps://www.w3schools.com/jsref/prop_html_innerhtml.asp5. Getting and Passing Attributeshttps://www.w3schools.com/jsref/met_element_getattribute.asp
Sourcing Free High-Resolution Images on the InternetThis assignment will require you to find or create and resize five images to use in the photo gallery. You do not have to spend any money to acquire images but you will need some knowledge of photo editing software to resize the images that you use to the appropriate 800×400 pixel size.
Here are some sites that offer free high-resolution photos. Please remember to provide links to the location of the images you use inyour Project Reflection.
NOTE: Be careful. Make sure you don’t download any install programs to view images. If the site asks you to install software onto your computer try another site or simply perform a browser search for free stock photos. If a site requires creating a free account this is generally not a problem.Use Your Own PhotosIf you are particularly talented in the area of photography feel free to use your own images and photos. Indicate the source of your photography in your Project Reflection.
NOTE 2:
De

You can leave a response, or trackback from your own site.
error: Content is protected !!