The "method" for finding your new best friend. Project by Chris Chan, Natalia Hess, and Toby Zitsman GA WDI 32.
paws is a website designed for users who are looking to either adopt a new pet or put their pet up for adoption.
The user is able to search for a pet by name or by type (dog, cat, other). If the user wishes to request additional information or express interest in adoption, he or she can click on the owner's name to send an email.
On the other hand, if a user wishes to list his or her pet for adoption, he or she may simply click the "add a pet" button. This will navigate the user to a form where he or she can enter the information required to add the furry friend into our paws database.
See the published project on Heroku.
The original wireframes for the profile card created with Moqups
- JavaScript
- jQuery
- HTML
- CSS
- AJAX
- MongoDB
- Bootstrap
Homepage view listing all pets currently available for adoption
Profile "card" listing name, age, gender, location, description, medical information, contact information, and how many people are interested
Search by name
Search by type (dog, cat, other)
Post a pet modal
About us page
// Post a pet modal
$('#addThePet').on('click', function(e) {
e.preventDefault();
// Pet info added and submitted
if ($('#newPetName').val() == "") {
alert('please enter valid name for pet');
} else if ($('#petPicture').val() == "") {
alert('picture is not valid. please enter url for picture');
} else if ($('#petAge').val() == "") {
alert ('Not a valid age');
} else {
newPet.name = $('#newPetName').val();
newPet.picture = $('#petPicture').val();
newPet.age = $('#petAge').val();
if ($('#petFixed').prop('checked') == true) {
newPet.fixed = true;
} else {
newPet.fixed = false;
}
if ($('#petVaccination').prop('checked') == true) {
newPet.vaccination = true;
} else {
newPet.vaccination = false;
}
if ($('#petGenderM').prop('checked') == true) {
newPet.gender = 'male';
} else if ($('#petGenderF').prop('checked') == true) {
newPet.gender = 'female';
} else {
alert('Please choose a gender');
return;
}
$('#newPet').toggle();
newPet.type = $('#petType').val();
$.ajax({
method: 'POST',
url: '/api/pets',
data: newPet,
success: newPetSuccess,
error: newPetError
});
console.log("New animal created");
}
});
- View the app on Heroku
- Check out our Trello Board
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent