The github profile API data is undefined in JavaScript

I already check again on this code, but still couldn't figure it out why it won't work. So that I manage to make this web app using GitHub API.

but when I tried to search some data by their name, it turns out 'undefined' for everything that I was trying to find, like name, image, bio and etc.

My html code:

<html>
    <head>
        <title>Github Profile!</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
    </head>
<body>
        <form id="form">
            <input type="text"
            id="search"
            placeholder="Search a User Here" />
        </form>
        <main id="main"></main>
        <script src="script.js" defer></script>
</body>
</html>

Javascript:

const APIURL = 'https://api.github.com/users';

const main = document.getElementById('main');
const form = document.getElementById('form');
const search = document.getElementById('search');

async function getUser(user) {
    const resp = await fetch(APIURL + user );
    const respData = await resp.json();

    createUserCard(respData);
}

function createUserCard(user) {
    const cardHTML = `
        <div class="card">
            <div>
                <img src="${user.avatar_url}"
                alt="${user.name}" />
            </div>
            <div>
                <h2>${user.name}</h2>
                <p>${user.bio}</p>

                <ul>
                    <li>${user.followers}</li>
                    <li>${user.following}</li>
                    <li>${user.public_repos}</li>
                </ul>
            </div>
        </div>
    `;

    main.innerHTML = cardHTML;
}

form.addEventListener('submit', (e) => {
    e.preventDefault();

    const user = search.value;

    if (user) {
        getUser(user);

        search.value = "";
    }
});

I don't know what actually went wrong here.

Solution

Looks like you were just using the wrong URL.

const APIURL = 'https://api.github.com/users'; // no end slash

async function getUser(user) {
    const resp = await fetch(APIURL + user );

so what you're doing here is calling the URL

https://api.github.com/usersusername

so you just need to add a slash in the APIURL variable.

const APIURL = 'https://api.github.com/users/';

const main = document.getElementById('main');
const form = document.getElementById('form');
const search = document.getElementById('search');

async function getUser(user) {
  const resp = await fetch(APIURL + user);
  console.log(resp)
  const respData = await resp.json();
console.log(respData)
  createUserCard(respData);
}

function createUserCard(user) {
  const cardHTML = `
            <div class="card">
                <div>
                    <img src="${user.avatar_url}"
                    alt="${user.name}" />
                </div>
                <div>
                    <h2>${user.name}</h2>
                    <p>${user.bio}</p>
    
                    <ul>
                        <li>${user.followers}</li>
                        <li>${user.following}</li>
                        <li>${user.public_repos}</li>
                    </ul>
                </div>
            </div>
        `;

  main.innerHTML = cardHTML;
}

form.addEventListener('submit', (e) => {
  e.preventDefault();

  const user = search.value;

  if (user) {
    getUser(user);

    search.value = "";
  }
});

<html>

<head>
  <title>Github Profile!</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <form id="form">
    <input type="text" id="search" placeholder="Search a User Here" />
  </form>
  <main id="main"></main>
  <script src="script.js" defer></script>
</body>

</html>