Pet Haven :emoji:

Project Overview Box

:information_source: 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

:emoji:️ Project Roadmap

graph LR
    A[Phase 1: Setup] --> B[Phase 2: DOM Selection]
    B --> C[Phase 3: Event Handling]
    C --> D[Phase 4: Filtering Logic]
    D --> E[Phase 5: Testing]
    E --> F[Bonus: Extensions]
    
    style A fill:#e1f5fe
    style B fill:#b3e5fc
    style C fill:#81d4fa
    style D fill:#4fc3f7
    style E fill:#29b6f6
    style F fill:#ffd54f

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.

:warning: 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.

:warning: 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! :emoji: 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 :mag:

:dart: 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 :emoji:️

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.

:information_source: 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 :video_game:

:dart: 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:

:warning: 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.

:information_source: 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! :dart:

:dart: 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:

:warning: 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! :sparkles:

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";
    }
});

:information_source: 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!

:dart: 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:

:bug: 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 :art:

:dart: 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

:rocket: 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

:bulb: 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

:warning: 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

:emoji: 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! :emoji::heart:

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! :star2:

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