Submit (Search) - This function is used to search for new gifs based on the input of the user. Using this button will pull from the input of the user. Depending on what is input in the search box, the app will search the Giphy database and return the results. If no results appear, the current image will persist.

Shuffle - This function allows you to move through the results of the API search. It will take you through the next result returned from the API and continue until the end of the results at which point it will return you to the first result. This function does not work until the user has already used the Submit (Search) function.

Rating - This selector adjusts the rating of the gif results. All possible variations are provided to the user and are inclusive of stricter ratings. Using this selector will reset the result and maintain whatever search the user has input.

Copy - This function copies the original sized gif file and adds it to the user's clipboard. This function will not work until the user has used the Submit (Search) function.

This app is simple to use and allows you to cycle gifs quickly pulling from Giphy! You are able to perform 4 functions using the online app including Search, Shuffle, Copy, Rating Alteration.

Navigation - Navigation persists on all pages accross the gift guide. It has an attached 5 functions, which are contingent sign-in status.

Home - This button will return you to the home page from any location. The home page maintains example data on the information provided to the user based on the stock.

About - This page is meant to guide the user on some of the functions included on the site. It includes information on all the pages provided to the user.

Search - This will bring the user to the search page that requires input of a stock symbol. Hitting the search button on this page will redirect the user to that stock's page and provide the user with detailed information.

Watchlist - This route can actually be renamed using the settings page mentioned below. This page contains a lesser amount of information on each stock the user add's to the their watchlist from the stock page.

Settings - This page will route the user to the settings for their unique Stock Watchlist's setup. This information will be saved, so any changes will reapear upon login.

Stock Pages - This page maintains detailed information on a stock including daily information, pre-market information, book information, and trading information. This page maintains a CTA below the data that compares against the user's current watchlist. If the stock is in the watchlist, it will tell the user "Added to Watchlist", otherwise a CTA will appear to track the stock.

Watchlist Page - This page is locked for users that are not signed-in. The name of the watchlist can be edited by the user using the settings page. Each added stock will provide a CTA to the stock page for additional information by clicking the ticker. This page will provide basic details for every stock on the list including company name, price, daily percent change, and daily volume. All stocks can then be removed from the watchlist using the CTA at the bottom of the card.

Settings Page - This page allows the user to change their individual settings and is locked for only signed-in users. The page allows the user to update the navigation/main color as well as the accent color of their setup. Additionally, it provides the ability to change the name of the user's watchlist. Hitting the update button will then save this information for future use.

The Stock Watchlists app is designed to be an all-encompassing tracker for stocks based on user input and saved settings.

Navigation - Navigation persists on all pages accross the gift guide. It has an attached 4 functions.

Home - This button will return you to the home page from any location.

Holiday Dropdown - This dropdown is a self-updating dropdown that will display all of the holidays that have been input for any products in the database. It will navigate you to the respective holiday page.

Recipient Dropdown - This dropdown is also self-updating and will show all of the recipients currently in the system. Selecting a recipient will bring you to that recipients page of gifts.

Add New Gifts - This button will bring you to the new page where a gift can be added.

Index Pages - The pages are as follows, the core index page, the holiday show page, the recipient show page, and the holiday-recipient show page. Each page serves to help the user with a different layer of filtering. Each show page with the exception of the core index page will also display the total cost of all the gifts associated with it. Additionally, selecting the image of a product will take you to that product's display page, while selecting either the holiday or recipient will redirect you to that recipient or holiday show page respectively.

Product Display Pages - By selecting a product by it's image you will be taken to the PDP. This maintains all information about the product and a link that will redirect the user to the product's direct URL. This page also allows you to delete the product entirely or adjust any information.

Edit/New Pages - These pages will direct you to a form that can be used to input product information for the gift you are buying. If the user does not wish to put in the actual image URL for the gift they are buying, they are prvodided with the ability to search for an image using the Uplash API. This API will grab images from the Uplash DB and return them for the user. If the user likes the image, using the UPDATE IMAGE URL button will allow the user to automatically input the URL for the image they found into the form.

The holiday gift guide is designed to make it easier and more approachable to keep track of the gifts you have purchsed for any occassion.

Portfolio