Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Find a Pet app project template from https://learnvanillajs.com.

Project Details

Use the Petfinder API to get a list of available pets from a shelter and display them on a web page.

Bonus: Dynamically create filters for things like age, gender, breed, and type of animal, and let users filter out pets that don't match their criteria.

Quick heads up: The Petfinder API is buggy and poorly maintained, so you may run into some hiccups along the way.

Considerations

  • How will you display pet images?
  • Will you convert any links in the content into working URLs? If so, how?
  • Will you display the full profile text for each pet on one page, or let users dig into a more detailed view?
<!DOCTYPE html>
<html>
<head>
<title>Project Template</title>
<style type="text/css">
body {
margin-left: auto;
margin-right: auto;
max-width: 40em;
width: 88%;
}
</style>
</head>
<body>
<h1>Find a Pet</h1>
<div id="app"></div>
<script>
// Project code...
</script>
</body>
</html>
@Steffan153

This comment has been minimized.

Copy link

commented Jun 21, 2019

Quick question: Is using the PetFinders SDK still considered Vanilla JS? I know this project is about Vanilla JS, so no violating the rules. 😃

@fmontone

This comment has been minimized.

Copy link

commented Jul 2, 2019

Quick question: Is using the PetFinders SDK still considered Vanilla JS? I know this project is about Vanilla JS, so no violating the rules. 😃

On thing is one think. Other thing is other thing. As a wiseman once said. You fetch the api in plain js code and works around it in plain js code too. You gonna be cheating only if you use some framework to do so. I really didn't understand the question, but I think there is some misconception around it.

@BerkeSoysal

This comment has been minimized.

Copy link

commented Sep 16, 2019

Didn't like this assignment, petfinders isn't available in my country though.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.