Skip to main content

Task 21: Get Your Favorite Football Team Info with JavaScript + Axios!

Start with Affirmation​

  • "I am destined for greatness. Every step I take brings me closer to my goals. I embrace challenges, knowing they are stepping stones to success. My mind is focused, my heart is determined, and my actions are aligned with my dreams."

Daily Affirmations for Success

  • ✅ I am capable, confident, and unstoppable.
  • ✅ Success flows to me because I take consistent action.
  • ✅ I attract opportunities that align with my purpose.
  • ✅ My hard work and persistence create abundance.
  • ✅ I am always learning, growing, and evolving.
  • ✅ I believe in my potential and trust my journey.
  • ✅ I turn setbacks into comebacks with resilience.
  • ✅ I am grateful for every success, big and small.

Success Reflection​

"Every effort I made today has planted seeds for my future success. I release any doubts and trust the process. My dreams are possible, and I am getting closer every day. I am grateful, I am strong, and I am ready for more!"

💪 Repeat daily, feel the power, and watch your success unfold!

Task Answer - Video Link​

🔹 If you don’t understand the task, watch the video above for the answer.

Task​

In this task video, you'll learn how to use JavaScript and Axios to fetch real-time information about your favorite football team using a public API. Whether you’re building a sports stats app or just exploring API requests, this beginner-friendly tutorial walks you through every step—from setting up Axios to displaying team data dynamically.

What You'll Learn:

  • ✅ How to use Axios for HTTP requests
  • ✅ How to fetch football team info via API
  • ✅ How to handle JSON responses in JavaScript
  • ✅ Real-world API project for JS beginners

** Step 1: Create HTML Structure​

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>⚽ Football Team Info</title>
</head>
<body>
  <h1>⚽ Team Info Finder</h1>
  <input type="text" id="teamInput" placeholder="Enter Team Name..." />
  <button id="getTeam">Get Info</button>

  <div id="result"></div>

  <!-- Axios CDN -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Step 2: JavaScript Logic (script.js)​

const getBtn = document.getElementById("getTeam");
const result = document.getElementById("result");

getBtn.addEventListener("click", () => {
  const team = document.getElementById("teamInput").value.trim();

  if (!team) {
    result.innerHTML = "❗ Please enter a team name.";
    return;
  }

  axios.get(`https://www.thesportsdb.com/api/v1/json/3/searchteams.php?t=${team}`)
    .then(response => {
      const teamInfo = response.data.teams ? response.data.teams[0] : null;

      if (!teamInfo) {
        result.innerHTML = "⚠️ Team not found. Try another name!";
        return;
      }

      result.innerHTML = `
        <h2>${teamInfo.strTeam}</h2>
        <p>🏟️ Stadium: ${teamInfo.strStadium}</p>
        <p>📍 Location: ${teamInfo.strStadiumLocation}</p>
        <p>📅 Formed Year: ${teamInfo.intFormedYear}</p>
        <p>📝 Description: ${teamInfo.strDescriptionEN.slice(0, 200)}...</p>
        <img src="${teamInfo.strTeamBadge}" alt="${teamInfo.strTeam} Badge" width="150" />
      `;
    })
    .catch(err => {
      console.error(err);
      result.innerHTML = "❌ Something went wrong! Try again.";
    });
});