I am working with Github API and I am displaying the data from users. When the date is displayed I want it to only have the date user.created_at with DD/MM/YY and not the whole hour. Also when the user has no Biography user.bio the data appears as null, and I want it to display the text 'The user has no bio'. I have not figured out the way to do both things so if you could help me I would very much appreciate it

Here below the code:

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(username){
try{
    const { data } = await axios(APIURL   username)
    createUserCard(data)
    getRepos(username)
}catch (err){
    if(err.response.status == 404){
        createErrorCard('No profile with this Username')
      }
  }
}

async function getRepos(username){
try{
    const { data } = await axios(APIURL   username   '/repos?sort=created')

    addReposToCard(data)
}catch (err){
    createErrorCard('Problem Fetching Repos')

   }
 }

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

            <div >
            <h2>${user.name}</h2>
            <p >Joined ${user.created_at}</p>
            </div>
            <p>@${user.login}</p>
            <p>${user.bio}</p>
            
            

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

                <div >
                <strong>Followers</strong>
                
                <strong>Following</strong>
                
                <strong>Repos</strong>
                
                
                </div>
            
            
                
            </ul>
            
            <div >
            <p ><img src="./img/location.svg" alt="Location"  />  ${user.location} </p>
            <a href=${user.html_url} target="_blank"><img src="./img/link.svg" alt="Link"  />${user.html_url}</a>
            </div>

            <div id="repos"></div>
        </div>
    </div>`

main.innerHTML = cardHTML
}


function createErrorCard(msg){
const cardHTML = `
    <div >
        <h1>${msg}</h1>
    </div>
`
 main.innerHTML = cardHTML
}


function addReposToCard(repos){
const reposEl = document.getElementById('repos')

repos
    .slice(0, 5)
    .forEach(repo => {
        const repoEl = document.createElement('a')
        repoEl.classList.add('repo')
        repoEl.href = repo.html_url
        repoEl.target = '_black'
        repoEl.innerText = repo.name

        reposEl.appendChild(repoEl)
    })
}

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

const user = search.value

if(user){
    getUser(user)

    search.value = ''
}
})

CodePudding user response：

1. in the case of user.bio you can use the ternary operator:

   (conditional)?value when conditional true: value when conditional false
   

   for example:

   ${(user.bio!="null")?user.bio:"The user has no bio"}
   

   or

   ${(user.bio!=null)?user.bio:"The user has no bio"}
   

2. in the case of date github helps us giving us a formated string that we can cast to a date using new Date() and format it using Date.prototype.toLocaleString()

   ${(new Date(user.created_at)).toLocaleDateString()}
   

   in this case is not needed to pass parameters to toLocaleDateString() but I encourage you to read about this function here