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 th
e 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 functionalit
y:
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 thumbna
il
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 v
isitchttp://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.
Image dimensions must be 800 pixels (width) x 400 pixels (height) and stored externally in a separate image folder
Only use the index.html template to create your photo gallery
Use the style.css file to store styles in a separate CSS folder
Use the image-gallery.js file to store function(s) externally in a separate JavaScript folder
Use // to document your code by providing comments that explain the purpose of all lines of c
ode you write
Submission Requirements
Please 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 Folder
3. Write a Project Reflection (see description below)
4. Style.css
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 assignm.
Project Description You have been hired as a web designer for a fi.docx
1. 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 th
e 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
functionalit
y:
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 thumbna
2. il
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 v
isitchttp://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.
Image dimensions must be 800 pixels (width) x 400 pixels
(height) and stored externally in a separate image folder
Only use the index.html template to create your photo gallery
Use the style.css file to store styles in a separate CSS folder
Use the image-gallery.js file to store function(s) externally in a
separate JavaScript folder
Use // to document your code by providing comments that
explain the purpose of all lines of c
ode you write
Submission Requirements
Please submit the following to your Assignments Folder:
1. Host your working photo gallery.js
3. 2. Submit the HTML files you used to create the webpage to
your project Assignments Folder
3. Write a Project Reflection (see description below)
4. Style.css
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:
Publish your pages to Nova
Go to the W3C validator and paste in the URL to your
index.html page
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
4. 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_getelementbyi
d.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 800x400 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.
Adobe Stock (
http://stock.adobe.com
)
Flickr: Creative Commons (
https://www.flickr.com/creativecommons/
)
CAMIO (
http://camio.oclc.org
)
OCLC's Catalog of Art Museum Images Online (
http://camio.oclc.org)
.
5. Pexels (
https://www.pexels.com
)
Pixabay (
https://pixabay.com/
)
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.
NOTE 2:
De
