ui.js

class UI {
    constructor() {
        this.profile = document.getElementById("profile");
    }

    // Show profile data
    showProfile(user) {
        this.profile.innerHTML = `
       <div class="car card-body mb-3">
       <div class="row">
       <div class="col-md-3">
       <img class="img-fluid mb-2" src="${user.avatar_url}">
       <a href=${user.html_url} class="btn btn-primary btn-block mb-3" target="_blank">View Profile</a>
       </div>
       <div class="col-md-9">
       <span class="badge badge-primary"> Public Repos: ${user.public_repos}</span>
       <span class="badge badge-secodary"> Public Gists: ${user.public_gists}</span>
       <span class="badge badge-success"> Followers: ${user.followers}</span>
       <span class="badge badge-info"> Following: ${user.following}</span>
       </div>
       <br><br>
       <ul class="list-group">
       <li class="list-group-item"> Company: ${user.company}</li>
       <li class="list-group-item"> Website/Blog: ${user.blog}</li>
       <li class="list-group-item"> Location: ${user.location}</li>
       <li class="list-group-item"> Member since: ${user.created_at}</li>
       </ul>
       </div>
       </div>
       <h3 class="page-heading mb-3">Latest Repos: </h3>
       <div id="repos"></div>
       `;
    }

    // Show repos
    showRepos(repo) {
        let output = "";
        repo.forEach(repository => {
            output += `
            <div class="card card-body mb-3">
            <div class="row">
            <div class="col-md-6">
            <a href=${repository.html_url} target="_blank">${repository.name} </a>
            </div>
            <div class="col-md-6">
            <span class="badge badge-primary"> Stars: ${repository.stargazers_count}</span>
            <span class="badge badge-secodary"> Watchers ${repository.watchers_count}</span>
            <span class="badge badge-success"> Forks: ${repository.forms_count}</span>
            </div>
            </div>
            </div>`  
        });

        document.getElementById("repos").innerHTML = output;
    }

    // Clear profile data on page
    clearProfile() {
        this.profile.innerHTML = "";
    }

    // Show alert message
    showAlert(message, className) {
        //Clear any alert message
        this.clearAlert();

        // Create block for message and put data
        const div = document.createElement("div");
        div.className = className;
        div.appendChild(document.createTextNode(message));
        const container = document.querySelector(".searchContainer");
        const search = document.querySelector(".search");
        container.insertBefore(div, search);

        // Timeout after 3 secounds
        setTimeout(() => {
            this.clearAlert();
        },3000);
    }

    // Clear aler message

    clearAlert() {
        const currentAlert = document.querySelector(".alert");
        if(currentAlert) {
            currentAlert.remove();
        }
    }
}