brandonnorsworthy / pet-seeker Goto Github PK

If the petfinder api runs out of stuff to give user expand the search range so it might beable to find more for them to keep browsing

some kind of animation of some kinda so its maybe not always visible

grey x icon and bigger
blue check icon and bigger

should go into top left about past likes

Should display

• Image of pet
• Name
• description if one is avaliabe
• BONUS.... add a date of when it was liked ex: Liked 1 day ago
  

When one checkbox is checked string for gender should be

genderStr = "male"

When two checkboxes are checked string should have a comma separating the two options as per PetFinder Docs

genderStr = "male, female"

*** Accepts multiple values, e.g. gender=male,female.***

images come in at all shapes and sizes format them to a uniform width to make it look nice

1. petId from api gets saved in local storage probably key: pastLikes: ["petId","petId"]
2. then it redirects to the adoption page

ReadMe should include

• demo gif
• about section describing how it was designed
• functionality section about what you can use it for and how it works

API brings back 20 responses so loop over the responses but only show the next card after the first one has been denied or liked

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

when they like something
if localstorage.getitem("likes") is 5 or more
shift() the localstorage array to delete the first one
concat() the new liked animal so array can stay at 5 but not got over
then put it back into storage

This will prevent us going over our limit of 1000 or something so since the amount retrieved will be inflated

• grab pet id that in local storage
• name
• picture
• url
• description

• Age
• Name
• Gender
• Breed
• Size
• Animal Type
• PICTURE

move "header" into the main div area so its above the cards

age, gender, size...
can just be like

age = document.getElementById("Age").value

thereby "linking" the element in the html to the js api call

If the description of the petanimal === null set the string in the <p> tag to empty or just don't display it

1. discards current card div
2. slice the old animal out of the animals array
3. displays a new one from the animals array

Should go long instead of sit horizontally if a mobile like device

You can currently close the preferences as soon as the webpage loads so they can look at the empty page

min-width: 310px or something idk never below 310px tho messes up liked animal descriptions

get last element in the arrayOfPetsInQueue
look at the date created or something similar
then send a api request to pet finder using after=<dategotfromlastelement>

this will only show pets that were there after the date of the last element so they dont repeat

*please leave init always at bottom of file

Set the height of the card to a fixed amount so the buttons don't try to shift around