Skip to content
forked from MattOz/Pupify

🐶 A front-end web app about dogs to help users decide if they should adopt a dog. (Project 1)

Notifications You must be signed in to change notification settings

hbarry89/Pupify

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

90 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Pupify 🐶

Description 📄

  • Pupify is a simple, easy to use, web app that allows the user to view images of over 140 different dog breeds.
  • Pupify also gives the user various kinds of information regarding man’s best friend! Click the “cool pup stuff” button and learn all kinds of interesting things!
  • Being dog parents ourselves, we wanted to create something as an homage to our pups who are always supporting us through this coding journey.
  • The purpose of this web app is to help people who are thinking about getting a dog see what a particular breed looks like and learn some facts about dogs.

User Story

  • AS A person who is interested in getting a dog
  • I WANT to see what a particular breed looks like and know some information about dogs
  • SO THAT I can decide if I should to get a dog

Usage 🔧

  • Click here to navigate to the live link of this repository.
  • You will also need to click here to request access to the demo server for the Dog fact API to show up. (You will also need to keep requesting it if Dog Fact is not showing since it only allows for a temporary access for a period of time).

  • You will be presented with an interactive webpage:


  • Click the dropdown menu to select a bread, then click search for an image of the breed you selected to show:


  • If you search multiple breeds, you will have your selections stored in your searh history that you click on and display that breed again:


  • If you click on "Cool Pup Stuff" it will display a dog fact, you can click as many times you would like to dosplay different fact:


Features 🎊

  • 2 Server-Side APIs
  • CSS Framework
  • Responsive Webpage
  • Interactive Webpage
  • Client-Side Storage
  • Dropdown Search Menu
  • Image Display
  • Fact Display
  • Styled Cursor
  • Use of Emojis
  • Use of Color Palettes

Technologies Used ✨

APIs

Framework

Color Palette

Applications

  • VS Code

Challenges 🌪️

  • Image API inconsistent display from their server.
  • Need to request temporary access to demo server for the Dog Facts API.
  • Search bar caused a syntax issue with user input due to spelling and casing issues.

Successes 🌟

  • Functional deployed website that is interactive and responsive.
  • Both APIs are connected successfully.
  • CSS Framework is connected successfully.
  • earch bar issue was resolved by turning it into a dropdown menu to avoid spelling and casing issues.

Future Development 💡

  • If time was not a factor, we could have matched dog fact with the dog breed. This would require a more extensive API for the dog fact library.
  • If money was not an issue as well, we would be able to get more thorough API data.

Credit 🎖️

  • Bootcamp Instructor and TA.
  • Bootcamp Materials.
  • Bootcamp Class Video Recordings.

Thank you for visiting! 🌺

About

🐶 A front-end web app about dogs to help users decide if they should adopt a dog. (Project 1)

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 73.5%
  • JavaScript 20.9%
  • CSS 5.6%