A photo album built with jQuery and photos from unsplash
This project was created to fulfill an assignment for The Iron Yard Charleston's Front-End Engineering course. The original assignment text is below:
Note I did not use the wireframes, so I haven't included them in the repo.
Week 3, Day 4
##jQuery - Photo Albums We'll create a simple single-page application that lets us view photos grouped by album.
###You Should Know
- HTML
- CSS Layout
- Javascript Fundamentals
- DOM Manipulation
- Javascript Events
- JQuery Fundamentals
###Your Mission We're going to create a photo gallery application which allows users to view their albums as well as the individual photos contained within. We'll implement this as a single page application (SPA). Use the following wireframes as layout inspiration: Album View
####Explore Mode Challenge #1.1: Use your HTML & CSS knowledge to create the initial layouts for the SPA. Make sure you follow along with the wireframes above. Place your HTML in a file called index.html and your CSS in a file called styles.css. Include any pictures you use in a directory called images.
Goal #1.1: A web page incorporating all three views using HTML & CSS.
Challenge #1.2: Now that you've built the site layout, let's use jQuery to make it dynamic. Make sure you can switch between your List, Album & Photo views without reloading the page. Clicking an Album should load a list of the photos, and clicking the photos should open them individually full-screen for viewing. Call your Javascript file app.js. Make sure you have a minimum of 6 photo albums with at least 3 photos each.
Goal #1.2: Javascript/jQuery providing a dynamic experience on our photo album page.
Challenge #1.3: Don't forget your version control! Create a local git repository, add your work to it, and upload it to Github.
Goal #1.3: Submit your Github URL below.
####Adventure Mode Challenge #2.1: In addition to Explore Mode challenges, update your individual photo view to allow a user to navigate to other photos in the same album by clicking to the left/right of the photo currently being viewed.
Goal #2.1: Refined Javascript/jQuery with individual photo view navigation options.
####Epic Mode Challenge #3.1: Add the ability to add new photos to albums. You don't need to save the photos anywhere, but they should be added to the DOM and visible until the page is reloaded. Instead of trying to upload files, just add URL's to remote images. You should be able to add these photos via a simple form. Don't forget to update your Github respository.
Goal #3.1: Refined web page with an input form for adding photos to albums.