Pet Haven 🐾

Project Overview Box

ℹ️ Info Project Details

• Difficulty Level: Intermediate
• Estimated Time: 2-3 hours
• Skills Practiced:
  • DOM Manipulation with querySelectorAll()
  • Event Listeners and Event Handling
  • Array Methods (forEach())
  • CSS Display Properties
  • Bootstrap Components
  • HTML Structure Understanding

🗺️ Project Roadmap 🗺️

1. Phase 2: DOM Selection - Complete the second phase
2. Phase 3: Event Handling - Set up event listeners
3. Phase 4: Filtering Logic - Complete this step
4. Phase 5: Testing - Test all functionality
5. Bonus: Extensions - Complete this step
6. Phase One: Setup - Configure initial project settings

Download your material

What you'll do: Open the project and familiarize yourself with the interface

• Open the StackBlitz template: Pet Haven
• Other alternative: you can download the source code template from Stackblitz Download Project button if you want to use IDE.

⚠️ IMPORTANT: Before You Start

DO NOT DELETE the existing files in the template:

• Package files
• Any other files you didn't create

ONLY EDIT the necessary files.

⚠️ Common Pitfall #1 Many students accidentally delete important template files! Remember: only edit the script.js file unless instructed otherwise. The HTML and CSS files are already set up for you.

Project Introduction

Welcome to Pet Haven! 🏠 You're about to build an interactive pet adoption website where visitors can browse adorable animals by category. This project will strengthen your JavaScript skills while creating something meaningful - helping pets find their forever homes!

The website will:

• Display various animals available for adoption
• Allow users to filter animals by category (Cats, Dogs, Reptiles, etc.)
• Show animal details including names and adoption messages
• Include a heartwarming story section about Pet Haven

Phase One: Understanding the Structure 🔍

🎯 Milestone Checkpoint 1

Before proceeding, make sure you've:

• Opened the StackBlitz template
• Familiarized yourself with the file structure
• Located the index.html and script.js files

Follow the instructions:

We want to be able to change category by clicking on the buttons:

tip Pro Tip Take a moment to click around the template first! Notice how the buttons look clickable but nothing happens yet? That's because we haven't added the JavaScript functionality - that's your job!

HTML Detective Work 🕵️

Take a look at the index.html file and study where these button groups and animal cards are. Which HTML tags do you think are the buttons and animals?

Answer: The <input> tags with the "select" class are the button groups and the <div> tags with the "item" class are the animal cards.

ℹ️ Info Understanding Bootstrap Radio Buttons The <input> tags have special Bootstrap classes that allow us to create the button groups using radio inputs. This is a clever trick - we're using radio buttons styled to look like regular buttons!

You can learn more from the official Bootstrap 4 documentation: https://getbootstrap.com/docs/4.0/components/buttons/#checkbox-and-radio-buttons

Phase 2: JavaScript Implementation - DOM Selection 🎮

🎯 Milestone Checkpoint 2

Before this phase, ensure you understand:

• What elements we need to select (buttons and cards)
• Why we're using querySelectorAll() instead of querySelector()
• That the result will be a NodeList (similar to an array)

Let's start by declaring the necessary variables and select using DOM:

⚠️ Common Pitfall #2 Make sure you're writing your JavaScript in the script.js file, NOT in the HTML file! Also, don't forget the dot (.) before class names in your selectors.

Step One: Select the Category Buttons

Declare a variable called buttons and assign the value as the <input> tags with the select class using the querySelectorAll() DOM method.

Like this:

// Select all category filter buttons
// The dot (.) means we're selecting by class name
var buttons = document.querySelectorAll(".select");

tip Why querySelectorAll()? We use querySelectorAll() because there are multiple buttons (All, Cats, Dogs, etc.). This method returns a NodeList containing all matching elements, which we can loop through later!

Step 2: Select the Animal Cards

Just like the buttons, declare a variable called cards and assign the value as the <div> tags with the item class using the querySelectorAll() DOM method.

// Select all animal cards
// These are the pet profiles we'll show/hide
var cards = document.querySelectorAll(".item");

These cards are the animals that are available for adoption. Each with their name, species and message written in index.html file.

ℹ️ Info Quick Check After adding these two lines, you can test if they work by adding console.log(buttons, cards); and checking the browser console. You should see NodeLists containing your elements!

Phase 3: Event Handling - Making Buttons Work! 🎯

🎯 Milestone Checkpoint 3

Before starting this phase:

• You have successfully selected the buttons and cards
• You understand what forEach() does
• You're ready to make the buttons interactive!

For each buttons, add a "click" event listener:

⚠️ Common Pitfall #3 Remember that forEach() takes a function as a parameter. Many students forget the arrow function syntax. The pattern is: array.forEach((item) => { /* code here */ })

Step One: Loop Through Each Button

Use the .forEach() method for each buttons.

// Loop through each button
buttons.forEach((button) => {
    // We'll add the event listener here
});

Step 2: Add Click Event Listener

Then inside the .forEach() arrow function, use the addEventListener() method to add a "click" event.

buttons.forEach((button) => {
    button.addEventListener("click", () => {
        // The filtering logic will go here
    });
});

tip Understanding Arrow Functions The () => {} is called an arrow function. It's a shorter way to write functions. Think of it as "when this happens, do this."

Phase 4: Filtering Logic - The Magic Happens! ✨

Inside the click event arrow function:

Step One: Get the Selected Category

Declare a variable called selected and assign the value as button.name (this is to get the name of the <input> tag)

button.addEventListener("click", () => {
    // Get which category was clicked
    var selected = button.name;
    console.log("Selected category:", selected); // Debug helper!
});

Step 2: Filter the Animal Cards

Use the .forEach() method for each cards. Then, for each cards:

button.addEventListener("click", () => {
    var selected = button.name;
    
    // Loop through all animal cards
    cards.forEach((card) => {
        // Filtering logic goes here
    });
});

Step 3: Implement the Filtering Rules

Here's the complete filtering logic with helpful comments:

cards.forEach((card) => {
    // Show ALL animals when "all" is selected
    if (selected === "all") {
        card.style.display = "block";
    }
    // Show animals that match the selected category
    else if (card.classList.contains(selected)) {
        card.style.display = "block";
    }
    // Hide animals that don't match
    else {
        card.style.display = "none";
    }
});

ℹ️ Info How the Filtering Works

1. "All" button: Shows every animal card (display = "block")
2. Category buttons: Only shows cards with matching class names
3. Non-matching cards: Hidden from view (display = "none")

The magic is in classList.contains() - it checks if an element has a specific class!

🎯 Milestone Checkpoint 4

Test your filtering:

• Click "All" - all animals should appear
• Click "Cats" - only cats should appear
• Click "Dogs" - only dogs should appear
• Each category should work correctly

If you have done it correctly, it should look something like this:

🐛 Debugging Tips Section

Having trouble? Here are common issues and solutions:

Nothing happens when I click the buttons

• Check 1: Did you save your script.js file?
• Check 2: Open the browser console (F12) and look for error messages
• Check 3: Make sure your selectors have the dot: .select and .item

All animals disappear and don't come back

• Check: Is your "all" comparison using three equals (===) or two (==)? Both work, but be consistent!
• Check: Make sure you typed "all" in lowercase

Some animals don't filter correctly

• Check: Look at the HTML - do the animal cards have the correct class names (cats, dogs, reptiles)?
• Check: Remember JavaScript is case-sensitive: "Cats" != "cats"

tip Pro Debugging Tip Add console.log() statements to see what's happening:

console.log("Button clicked:", selected);
console.log("Card classes:", card.classList);

Phase 5: Testing & Polish 🎨

🎯 Milestone Checkpoint 5

Final testing checklist:

• All category buttons are clickable
• Filtering works correctly for each category
• The "All" button shows every animal
• No JavaScript errors in the console
• The page looks good and functions smoothly

🚀 Extension Challenges

Ready to take your Pet Haven to the next level? Try these exciting challenges!

Challenge One: Add a New Category (Recommended)

Add another category to the button groups and a few more animals to it.

We have All, Cats, Dogs, Reptiles and Others. Add at least another category such as Fish or Birds.

Requirements:

• Add at least 2 more animals for this new category
• Give your new animals names and adoption messages
• Don't forget to add the category class name to your new animal cards!

tip HTML Structure for New Animals

<div class="item birds"> <!-- Note the "birds" class! -->
    <img src="bird-image-url.jpg" alt="Bird name">
    <h3>Tweety</h3>
    <p>Loves to sing in the morning!</p>
</div>

Challenge 2: Add Animation Effects

Make the filtering smoother with CSS transitions:

.item {
    transition: opacity 0.3s ease;
}

Challenge 3: Add a Counter

Show how many animals are currently displayed:

// Add this after your filtering logic
var visibleCount = document.querySelectorAll('.item[style="display: block;"]').length;
console.log("Showing " + visibleCount + " animals");

Challenge 4: Style Enhancement

• Change the button colors when active
• Add hover effects to animal cards
• Customize the fonts and layout
• Add a header or footer

Challenge 5: Advanced Features

For the brave programmers:

• Add a search bar to search by animal name
• Add "favorite" buttons to each animal
• Create an adoption form that appears when clicking an animal

💡 Helpful Resources

Finding Images:

You can search for more animal images here:

• https://www.pexels.com/ (Free stock photos)
• https://unsplash.com/ (High-quality free images)
• https://pixabay.com/ (Another great free resource)

Uploading Images:

To upload images in StackBlitz:

1. Open the assets folder
2. Drag & drop your images in it to upload
3. Click on your uploaded images to copy the URL

⚠️ Image Tips

• Keep image file sizes small (under 500KB) for faster loading
• Use consistent image dimensions for a professional look
• Always add meaningful alt text for accessibility

🎊 Congratulations!

You've built an interactive pet adoption website! You've practiced:

• DOM manipulation with querySelectorAll()
• Event handling with addEventListener()
• Array methods like forEach()
• CSS display properties
• Working with Bootstrap components

Take a moment to appreciate what you've created - you're helping virtual pets find their forever homes! 🏠❤️

Project Submission

When you have completed your "Pet Haven" project, submit it using the link below:

Submit Your Project Here

tip Before You Submit Make sure to test your webpage:

• Try all category buttons
• Check that filtering works properly
• Verify any extra features you added work correctly
• Test in different browsers if possible
• Be proud of your work! 🌟

Remember: Every expert was once a beginner. Keep coding, keep learning, and keep building amazing things!