Using javascript to create a simple, five-image photo galleries

                   

   

PROJECT 1: PHOTO       GALLERY
 

 Project       Description
You have been hired as a       web designer for a fictitious 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 image content on websites.

  

 

 

Screenshot image of what your web page photo gallery         should look like when completed. This is a screenshot – The         images are not clickable.

 Project Components
A 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 area to display a larger version of the selected       thumbnail image
      4. Descriptive captions that are relevant to the image being       displayed (50 words or less)
 

 Project       Functionality
A 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 thumbnail image when it is clicked,       remove the border when another thumbnail image is clicked (hint: use       a for loop that targets CSS classes)*
      (b) Display the selected thumbnail in the large image area (hint: use an       if/else statement)*
      (c) Add or alter any element in the DOM
 

NOTE 1:* (a)       and (b) above may be combined into one function.
 

 Project Requirements
The 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 visit http://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.

  1. Image dimensions must be 800 pixels (width)            x 400 pixels (height) and stored externally in a separate image            folder
  2. Only use the index.html template to create your            photo gallery
  3. Use the style.css file to store styles in a            separate CSS folder
  4. Use the image-gallery.js file to store            function(s) externally in a separate JavaScript folder
  5. Use // to document your code by providing            comments that explain the purpose of all lines of code you write

 Submission       Requirements
Please submit the following to       your Assignments Folder:
1. Host your working photo       gallery online using the Nova Server
      2. Submit the HTML files you used to create the webpage to your project       Assignments Folder
3. Write a Project Reflection       (see description below)
 

 Project       Reflection
Answer 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. What modifications 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 Validation
      Your pages should validate without errors using the W3C HTML Markup       Validation Service at http://validator.w3.org.

How to do this:

  1. Publish your pages to            Nova
  2. Go to the W3C validator            and paste in the URL to your index.html page
  3. Select the check button

If there are errors, correct       them. Ignore errors on the image tag where       “.” and “%” are indicated.
 

 Helpful       Resources
      This assignment will require you to interact with the DOM. The links       below highlight specific concepts and topics that you will need       to learn in order to complete this assignment successfully.

1. Types of Mouse Events
https://www.w3schools.com/jsref/dom_obj_event.asp
2. Targeting IDs
https://www.w3schools.com/jsref/met_document_getelementbyid.asp
3. Creating Loops
https://www.w3schools.com/js/js_loop_for.asp
4. Targeting and Altering HTML
https://www.w3schools.com/jsref/prop_html_innerhtml.asp
5. Getting and Passing       Attributes
https://www.w3schools.com/jsref/met_element_getattribute.asp

 Sourcing Free,       High-Resolution Images on the Internet
This 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 in your 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 Photos
      If 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.

  

 Due Date: November 7 

Late Penalty: 10% (2       points out of 20 total for the assignment) reduction each day (24-hour       period, starting at the midnight due date deadline) the assignment is       late. For example, if you are three days late, your grade will be deducted       6 points, leaving you with a 6/20, which is a grade of 70 (C). After       5 days, late assignments will not be accepted or graded. Your       Assignments folder will be closed at this point as well and you will not       be able to to physically submit the assignment.
 

  

Duepapers
Calculate your paper price
Pages (550 words)
Approximate price: -

Why Work with Us

Top Quality and Well-Researched Papers

We always make sure that writers follow all your instructions precisely. You can choose your academic level: high school, college/university or professional, and we will assign a writer who has a respective degree.

Professional and Experienced Academic Writers

We have a team of professional writers with experience in academic and business writing. Many are native speakers and able to perform any task for which you need help.

Free Unlimited Revisions

If you think we missed something, send your order for a free revision. You have 10 days to submit the order for review after you have received the final document. You can do this yourself after logging into your personal account or by contacting our support.

Prompt Delivery and 100% Money-Back-Guarantee

All papers are always delivered on time. In case we need more time to master your paper, we may contact you regarding the deadline extension. In case you cannot provide us with more time, a 100% refund is guaranteed.

Original & Confidential

We use several writing tools checks to ensure that all documents you receive are free from plagiarism. Our editors carefully review all quotations in the text. We also promise maximum confidentiality in all of our services.

24/7 Customer Support

Our support agents are available 24 hours a day 7 days a week and committed to providing you with the best customer experience. Get in touch whenever you need any assistance.

Try it now!

Calculate the price of your order

Total price:
$0.00

How it works?

Follow these simple steps to get your paper done

Place your order

Fill in the order form and provide all details of your assignment.

Proceed with the payment

Choose the payment system that suits you most.

Receive the final file

Once your paper is ready, we will email it to you.

Our Services

No need to work on your paper at night. Sleep tight, we will cover your back. We offer all kinds of writing services.

Essays

Essay Writing Service

No matter what kind of academic paper you need and how urgent you need it, you are welcome to choose your academic level and the type of your paper at an affordable price. We take care of all your paper needs and give a 24/7 customer care support system.

Admissions

Admission Essays & Business Writing Help

An admission essay is an essay or other written statement by a candidate, often a potential student enrolling in a college, university, or graduate school. You can be rest assurred that through our service we will write the best admission essay for you.

Reviews

Editing Support

Our academic writers and editors make the necessary changes to your paper so that it is polished. We also format your document by correctly quoting the sources and creating reference lists in the formats APA, Harvard, MLA, Chicago / Turabian.

Reviews

Revision Support

If you think your paper could be improved, you can request a review. In this case, your paper will be checked by the writer or assigned to an editor. You can use this option as many times as you see fit. This is free because we want you to be completely satisfied with the service offered.