zoekharvey / picture-box-vuejs Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 0.0 1.32 MB

A challenge to learn and build a Vue.js app in 48 hours

Home Page: http://picture-box.herokuapp.com/

JavaScript 14.58% HTML 9.09% Vue 76.33%

picture-box-vuejs's People

Watchers

picture-box-vuejs's Issues

Have home page open to random photos

Future iteration:

When a user first visits the home page, there are random photos that are displayed until they search for a word / term

Add API key to env file

Add functionality to move to previous and next pages of photos

Add buttons for previous and next pages
Add on click events for both buttons
Add currentPage in state
Add 2 functions, decrease/increase current page counter
Pass current page into apiCall to get current page only

Add styling to header area of page

Sign up for API key through unsplash

Write a function to clean results

In order to display all search results on page, there has to be a function that maps through results.
In this function, clean the data to just the url and maybe tags!

Allow to view single photo

Future iteration

Allow user to click on single photo, bringing user to full size original picture

Style footer area

Add .env to .gitignore file

Display all pictures from search

Currently:

Only first picture of the pictures array are getting displayed on page

What's next:

Make a function to map through pictures array

Fetch returning a 401 in Deployment

Need to solve .env issue

Because Heroku runs off github master, .env is not running with the API key.
Returning a 401 error - need validation from the .env variable

Add functionality to increase and decrease how many pictures are displayed on a page at a time

Write fetch in API calls to search by input value

Set 'state' to hold searched word and an array of all pictures from that search

Array of pictures from that search should just be the result of the fetch

### As a user:

When I open the application, I should be prompted to enter a search word/term to view photos