<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ben 10 Alien Generator</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    .container {
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    label {
      display: block;
      margin-bottom: 5px;
    }
    input[type="number"] {
      width: 100%;
      padding: 8px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 3px;
    }
    .category-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
    button {
      background-color: #4CAF50;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 3px;
      cursor: pointer;
    }
    button:hover {
      background-color: #45a049;
    }
    .result {
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 3px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>Random Ben 10 Alien Generator</h2>
    <div class="category-container">
      <button onclick="generateRandomAlien()">Generate Ben 10 Alien</button>
      <div class="result" id="resultAlien"></div>
    </div>
  </div>

  <script>
    var alienCategories = {
      alien: ['Heatblast', 'Four Arms', 'XLR8', 'Diamondhead', 'Upgrade', 'Ghostfreak', 'Ripjaws', 'Stinkfly', 'Wildmutt', 'Grey Matter', 'Cannonbolt', 'Wildvine', 'Blitzwolfer', 'Snare-oh', 'Frankenstrike', 'Upchuck', 'Ditto', 'Eye Guy', 'Way Big', 'Spitter', 'Buzzshock', 'Arctiguana', 'Swampfire', 'Echo Echo', 'Humungousaur', 'Jetray', 'Big Chill', 'Chromastone', 'Brainstorm', 'Spidermonkey', 'Goop', 'Alien X', 'Lodestar', 'Rath', 'Nanomech', 'Water Hazard', 'AmpFibian', 'Armodrillo', 'Terraspin', 'NRG', 'Fasttrack', 'Clockwork', 'ChamAlien', 'Eatle', 'Juryrigg', 'Shocksquatch', 'Feedback', 'Bloxx', 'Gravattack', 'Crashhopper', 'Ball Weevil', 'Walkatrout', 'Pesky Dust', 'Mole-Stache', 'The Worst', 'Kickin Hawk', 'Toepick', 'Astrodactyl', 'Bullfrag', 'Atomix', 'Gutrot', 'Whampire'],
      // Add more categories and aliens as needed
    };

    function generateRandomAlien() {
      var categories = Object.keys(alienCategories);
      var randomCategory = categories[Math.floor(Math.random() * categories.length)];
      var aliens = alienCategories[randomCategory];

      if (!aliens || aliens.length === 0) {
        document.getElementById('resultAlien').innerHTML = 'No aliens found for this category';
        return;
      }

      var randomIndex = Math.floor(Math.random() * aliens.length);
      var randomAlien = aliens[randomIndex];

      document.getElementById('resultAlien').innerHTML = randomAlien;
    }
  </script>
</body>
</html>
by