Pet Name Generator
Published: 2023-11-11 09:47:35

The Pet Name Generator is a charming and fun tool designed to help you come up with short, funny, and loving names for your beloved pets. It is a stylish and user-friendly web application that provides you with a unique pet name every time you click the "**Generate Name**" button.

With a carefully curated list of 100 adorable pet names, you'll be sure to find the perfect moniker for your furry, feathered, or scaly friend.

## Key Features

**Stylish Design:** The Pet Name Generator boasts a clean and stylish design, featuring the elegant "Poppins" font and a user-friendly interface.

**Vast Name Selection:** With a list of 100 pet names, you have a diverse range of options to choose from. Whether you're looking for a cute, funny, or loving name, you're sure to find the ideal fit for your pet.

**Randomized Names:** Each time you click the "Generate Name" button, the generator will provide a different name, ensuring that your pet's name is as unique as they are.

**No Repeats:** The Pet Name Generator keeps track of used names and prevents duplicates, allowing you to explore all the names in the list before any repetition occurs.

The Pet Name Generator is the perfect companion for pet owners, animal lovers, and anyone seeking inspiration for naming their furry, feathered, or scaly companions. Give it a try and discover the ideal name for your beloved pet!

This tool is coded by Melba Ambrose from [https://petfriendlypicks.com](https://petfriendlypicks.com)

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
    <title>Pet Name Generator</title>
</head>
<body>
    <div class="container">
        <h1>Pet Name Generator</h1>
        <button id="generate-button">Generate Name</button>
        <p id="generated-name"></p>
    </div>
    <script src="script.js"></script>
</body>
</html>

```

```
body {
    font-family: 'Poppins', sans-serif;
    text-align: center;
    background-color: #f2f2f2;
    margin: 0;
    padding: 0;
}

.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    max-width: 300px;
    margin: 0 auto;
}

h1 {
    color: #333;
}

button {
    background-color: #3498db;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #2980b9;
}

p {
    margin-top: 20px;
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

```

```
document.addEventListener("DOMContentLoaded", function () {
    const generateButton = document.getElementById("generate-button");
    const generatedName = document.getElementById("generated-name");

    const petNames = [
        "Fluffy",
        "Whiskers",
        "Fido",
        "Mr. Paws",
        "Snuggles",
        "Bubbles",
        "Luna",
        "Coco",
        "Max",
        "Oreo",
        "Charlie",
        "Mittens",
        "Buddy",
        "Daisy",
        "Rocky",
        "Lucy",
        "Tiger",
        "Bella",
        "Milo",
        "Molly",
        "Leo",
        "Cinnamon",
        "Sophie",
        "Bailey",
        "Oliver",
        "Rosie",
        "Toby",
        "Pepper",
        "Sasha",
        "Oscar",
        "Ziggy",
        "Lola",
        "Bentley",
        "Pumpkin",
        "Rusty",
        "Zoe",
        "Gizmo",
        "Lily",
        "Bentley",
        "Tigger",
        "Dexter",
        "Chloe",
        "Shadow",
        "Ruby",
        "Simba",
        "Misty",
        "Louie",
        "Lulu",
        "Zeus",
        "Mocha",
        "Blue",
        "Angel",
        "Smokey",
        "Snickers",
        "Penny",
        "Apollo",
        "Holly",
        "Cupcake",
        "Lucky",
        "Peanut",
        "Casper",
        "Bear",
        "Daisy",
        "Ginger",
        "Romeo",
        "Cooper",
        "Muffin",
        "Jackson",
        "Hazel",
        "Nala",
        "Sammy",
        "Spike",
        "Riley",
        "Kiki",
        "Hank",
        "Boots",
        "Lenny",
        "Scout",
        "Popcorn",
        "Rusty",
        "Dusty",
        "Chewy",
        "Misty",
        "Joey",
        "Gigi",
        "Maddie",
        "Charlie",
        "Maddie",
        "Buster",
        "Angel",
        "Cody",
        "Salem",
        "Mochi",
        "Buddy",
        "Peaches",
        "Willow",
        "Kiki",
        "Tasha",
        "Snowball",
        "Minnie",
        "Snickers",
        "Sasha",
        "Lenny",
        "Lola",
        "Daisy",
        "Mickey",
        "Harley",
        "Zozo"
    ];

    const usedNames = [];

    generateButton.addEventListener("click", function () {
        if (usedNames.length === petNames.length) {
            alert("You've used all the names!");
            return;
        }

        let newName;
        do {
            newName = petNames[Math.floor(Math.random() * petNames.length)];
        } while (usedNames.includes(newName));

        usedNames.push(newName);
        generatedName.textContent = newName;
    });
});

```