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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment