Skip to content

BetoShiver/flickr-gallery

 
 

Repository files navigation

Additions To This Application

This application was given to me with various tasks to complete which can be seen below. One of these tasks was innovating on it by adding new features to it. To that end, I added the following:

  1. A modal appears when user comes to the site for the first time, asking for his name to personalize the title. Additionally, there is an option to change the name.
  2. Added a button on expanded image with the option to give the image a color blend, which changes the contracted image as well.
  3. Similarly, added a button to change the shape of the image form square to circle and vice versa.
  4. Also added a button with the option to add/remove a frame to the image.
  • Not really a feature, but I also added a css gradient to the header to male the title stand out a bit more.

Flickr Gallery

Welcome to the Flickr Gallery application. This app is simple, you write a tag at the top and you get images from flickr with that tag.

Your Tasks

Step 1 - Installation

  • Fork this repo to your own account --Done
  • Install the dependencies and run it -- Done

Step 2 - Image Actions

Each image has three buttons that appear on mouse hover. You need to make them work.

  1. Delete: clicking the delete button should remove the image from the display. -- Done
  2. Rotate: each click should rotate the image by 90 degrees. -- Done
  3. Expand: clicking an image should display this image in a larger view. --Done

Step 3 - Gallery Actions

  1. Responsive: the gallery adjusts the size of each image so that all the images will fit into the screen without margin. However, when the window is resized, the images are not fitted so well. Make sure the images are always adjusted to the window width. --Done
  2. Infinite Scroll: currently the gallery displays only 100 images. Create a mechanism that loads more images from flickr when the user is scrolling past the last image. --Done
  3. Drag & Drop: let your users choose the order of the images by adding an option to drag & drop images to their new position. --Done

Step 4 - Wrapping Up

  1. Try inovating the product, add any features you think are useful. be creative, creative is good.
  2. Deploy your result as a github page to https://[YOUR_USERNAME].github.io/flickr-gallery/ --Done
  3. Send us an email with your repo link and the deployed app link

Tips

  • Write readable code, and use descriptive commits (we'll need to figure out what you did)
  • Write tests for the features you write and make sure they pass (tests are written in spec.js files)
  • Be responsible for your code. You may consult with Google about the code you write but you will need to explain what you did.

Good Luck!

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • JavaScript 88.9%
  • SCSS 9.1%
  • HTML 2.0%