آموزش ساخت ویترین مخزن GitHub با استفاده از HTML، CSS و جاوا اسکریپت

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

header {
    background: #333;
    color: #fff;
    padding: 10px 0;
    width: 100%;
    text-align: center;
}

#repo-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}

.repo {
    background: #fff;
    margin: 10px;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    width: 300px;
}

.repo h2 {
    margin: 0 0 10px;
    font-size: 1.5em;
}

.repo p {
    margin: 0 0 10px;
}

document.addEventListener("https://dev.to/dk119819/DOMContentLoaded"https://dev.to/dk119819/, function() {
    const username = "https://dev.to/dk119819/your-github-username"https://dev.to/dk119819/;
    const repoContainer = document.getElementById("https://dev.to/dk119819/repo-container"https://dev.to/dk119819/);

    async function fetchRepositories() {
        try {
            const response = await fetch(`https://api.github.com/users/${username}/repos`);
            const repos = await response.json();
            displayRepositories(repos);
        } catch (error) {
            console.error("https://dev.to/dk119819/Error fetching repositories:"https://dev.to/dk119819/, error);
        }
    }

    function displayRepositories(repos) {
        repos.forEach(repo => {
            const repoElement = document.createElement("https://dev.to/dk119819/div"https://dev.to/dk119819/);
            repoElement.classList.add("https://dev.to/dk119819/repo"https://dev.to/dk119819/);

            repoElement.innerHTML = `
                
${repo.name}
                ${repo.description || "https://dev.to/dk119819/No description available"https://dev.to/dk119819/}
                ${repo.html_url}" target="_blank">View Repository
            `;

            repoContainer.appendChild(repoElement);
        });
    }

    fetchRepositories();
});