Animaaal

HTML

<script src="https://cdn.tailwindcss.com"></script>

  
  <div class="bg-gradient-to-br from-amber-100 to-pink-100 min-h-screen flex flex-col items-center p-4">
  <h1 class="text-4xl font-bold text-pink-600 mb-2">🐾 Animaaal</h1>
  <p class="text-lg text-gray-700 mb-4 text-center max-w-md">Guess the animal! You’ll get helpful hints about each trait. Can you discover which one it is?</p>

  <div class="w-full max-w-md space-y-2">
    <input id="guessInput" placeholder="Type an animal name..." class="w-full p-3 rounded-lg border border-pink-300 focus:outline-none focus:ring-2 focus:ring-pink-400" />
    <button onclick="submitGuess()" class="w-full bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-4 rounded-lg transition">Guess</button>
  </div>

  <div class="w-full mt-6 flex justify-center overflow-x-auto">
    <table class="table-auto w-full max-w-4xl bg-white shadow-md rounded-lg overflow-hidden text-sm">
      <thead class="bg-pink-200">
        <tr>
          <th class="px-4 py-2 text-pink-800">Animal</th>
          <th class="px-4 py-2 text-pink-800">Max Age</th>
          <th class="px-4 py-2 text-pink-800">Height</th>
          <th class="px-4 py-2 text-pink-800">Weight</th>
          <th class="px-4 py-2 text-pink-800">Diet</th>
          <th class="px-4 py-2 text-pink-800">Continent</th>
          <th class="px-4 py-2 text-pink-800">Group Size</th>
          <th class="px-4 py-2 text-pink-800">Legs</th>
          <th class="px-4 py-2 text-pink-800">Can Fly</th>
          <th class="px-4 py-2 text-pink-800">Can Swim</th>
        </tr>
      </thead>
      <tbody id="guesses" class="text-center text-gray-700"></tbody>
    </table>
  </div>

JavaScript

const animals = {
  dog: {
    age: 15,
    height: 60,
    weight: 30,
    diet: "omnivore",
    continent: "Worldwide",
    group: 1,
    legs: 4,
    canFly: false,
    canSwim: true,
  },
  cat: {
    age: 18,
    height: 25,
    weight: 4,
    diet: "carnivore",
    continent: "Worldwide",
    group: 1,
    legs: 4,
    canFly: false,
    canSwim: true,
  },
  elephant: {
    age: 70,
    height: 300,
    weight: 6000,
    diet: "herbivore",
    continent: "Africa",
    group: 10,
    legs: 4,
    canFly: false,
    canSwim: true,
  },
  lion: {
    age: 15,
    height: 120,
    weight: 190,
    diet: "carnivore",
    continent: "Africa",
    group: 6,
    legs: 4,
    canFly: false,
    canSwim: true,
  },
  penguin: {
    age: 20,
    height: 70,
    weight: 30,
    diet: "carnivore",
    continent: "Antarctica",
    group: 100,
    legs: 2,
    canFly: false,
    canSwim: true,
  },
  chicken: {
    age: 8,
    height: 40,
    weight: 2,
    diet: "omnivore",
    continent: "Worldwide",
    group: 20,
    legs: 2,
    canFly: true,
    canSwim: false,
  },
  duck: {
    age: 10,
    height: 40,
    weight: 3,
    diet: "omnivore",
    continent: "Worldwide",
    group: 10,
    legs: 2,
    canFly: true,
    canSwim: true,
  },
  giraffe: {
    age: 25,
    height: 550,
    weight: 1200,
    diet: "herbivore",
    continent: "Africa",
    group: 8,
    legs: 4,
    canFly: false,
    canSwim: false,
  },
  monkey: {
    age: 20,
    height: 50,
    weight: 15,
    diet: "omnivore",
    continent: "Asia",
    group: 10,
    legs: 2,
    canFly: false,
    canSwim: true,
  },
  zebra: {
    age: 25,
    height: 140,
    weight: 350,
    diet: "herbivore",
    continent: "Africa",
    group: 10,
    legs: 4,
    canFly: false,
    canSwim: false,
  },
  bear: {
    age: 25,
    height: 180,
    weight: 300,
    diet: "omnivore",
    continent:...