techdegree-project-05

TeamTreehouse Front-End Developer TechDegree Project 5

Table of contents

• General info
• UX Screen Recording
• Feature List
• Technologies Used

General info

Project completed as part of the Front End Web Development track at TeamTreehouse.com.

UX Screen Recording

https://vimeo.com/580375989/5dca590bc7

Feature List

Lightbox features

• When gallery thumbnail image is clicked, larger image appears with overlay.
• Background overlay hides the gallery and covers the entire window when displaying a larger image.
• Images in lightbox include full text captions for each image.
• Lightbox images can be navigated by clicking right and left arrows.
• The lightbox can be closed to return to the gallery view.

Search box features

• Gallery photos update in real time as the user types into the search box, only photos that match the caption text appear in the gallery.
• Case insensitivity has been added so searches will ignore letter case.
• Entire caption is searchable, not just title or keywords.

Additional features

• Mobile-first responsive layout for both the gallery page and the lightbox.
• Original JavaScript code to implement search box functionality instead of a plugin.
• Javascsript includes HTML integrity checks to ensure search input, photos, and captions exist.
• Javascsript displays "No photos found" message displayed if no matches.
• Search field and photo thumbnail hover effects added to encourage interaction.
• Search field includes aria-label to describe functionality.
• Search field includes type="search" attribute allowing browsers to add enhancements such as a clear field icon.
• Search field includes spellcheck="false" and autocomplete="off" attributes.
• No HTML <div> tags used.
• Tested in latest Chrome, Firefox, and Safari browsers.

Technologies Used

This project includes:

• HTML
• CSS
• Responsive Layout
• Vanilla JavaScript for custom search feature
• Fancyapps Fancybox UI Lightbox carousel
• PNG images optimized using ImageOptim and multiple passes
• Best practices for modern evergreen browsers
• Code validated by W3C to meet HTML5 and CSS3 standards