github-search-users/script.js at main · kaan1999/github-search-users · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
'use strict';

window.onload = () =>
    {
        const body = document.querySelector('body');
        const navbar = document.querySelector('.header__navbar');
        const btnMenuOpen = document.querySelector('.header__btn-menu-open');
        const btnAbout = document.querySelector('.header__nav-about');
        const btnHome = document.querySelector('.header__nav-home');
        const btnSearch = document.querySelector('.header__btn-search');
        const sectionSearchResultContainer = document.querySelector('.search-result__container');
        const inputSearch = document.querySelector('.header__input-user');
        const userCards = [];
        const sectionAbout = document.querySelector('.search-result__about');
        navbar.classList.add('hide');

        const accessToken = prompt('Enter Your Github API Acess Token');

        btnMenuOpen.addEventListener('click', e => {
            e.stopPropagation();
            navbar.classList.toggle('hide');
        })

        btnAbout.addEventListener('click', e => {
            userCards.forEach(userCard => userCard.classList.add('hide'));
            sectionAbout.classList.remove('hide');
            sectionSearchResultContainer.classList.add('search-result__container-auto-fit');
            btnMenuOpen.click();
        })

        btnHome.addEventListener('click', e => {
            userCards.forEach(userCard => userCard.classList.remove('hide'));
            sectionAbout.classList.add('hide');
            sectionSearchResultContainer.classList.remove('search-result__container-auto-fit');
            btnMenuOpen.click();
        })

        body.addEventListener('click', e => {
            if(!navbar.classList.contains('hide')) btnMenuOpen.click();
        })
        //Search Result

        function createUserCard({login, avatar_url, html_url, name, company, location, bio}) {
            if(!login) login = '';
            if(!company) company = '';
            if(!location) location = '';
            if(!bio) bio = '';
            //user card divider
            const userCard = document.createElement('div');
            userCard.classList.add('search-result__card');

            userCard.innerHTML =
            `
                <h1 class='search-result__name'>${name}</h1>
                <img class='search-result__avatar' src='${avatar_url}' alt='user avatar'/>
                <span class='search-result__username'>${login}</span>
                <p class='search-result__bio'>${bio}</p>
                <ul class='search-result__info'>
                    <li class='search-result__company'>
                        <i class="fa-regular fa-building"></i>
                        <span>${company}</span>
                    </li>
                    <li class='search-result__location'>
                        <i class="fa-solid fa-location-dot"></i>
                        <span>${location}</span>
                    </li>
                </ul>
                <a class='search-result__link' href='${html_url}' target='_blank'>See on Github</a>
            `
            userCards.push(userCard);
            sectionSearchResultContainer.appendChild(userCard);
        }

        async function fetchUser({login}) {
            const response = await fetch(`https://api.github.com/users/${login}`, {
                headers: {
                    'Authorization': `Bearer ${accessToken}`
                }
            });
            if(!response.ok)
                throw new Error(`Response Status: ${response.status}`);

            const user = await response.json();
            createUserCard(user);
        }

        async function fetchUsers(searchTerm) {
            try {
                const response = await fetch(`https://api.github.com/search/users?q=${searchTerm}`, {
                    headers: {
                        'Authorization': `Bearer ${accessToken}`
                    }
                });
                if(!response.ok)
                    throw new Error(`Response Status: ${response.status}`);
                const users = await response.json();
                users.items.forEach(user => fetchUser(user));
            } catch (error) {
                alert(error);
            }
        }

        btnSearch.addEventListener('click', e => {
            btnHome.click();
            const cards = Array.from(sectionSearchResultContainer.children);
            cards.forEach(card => {
                if(card.classList.contains('search-result__card') && !card.classList.contains('search-result__about'))
                    card.remove();
            })
            const searchTerm = inputSearch.value;
            if(!searchTerm){
                alert('Error');
                return false;
            }
                fetchUsers(searchTerm);
            inputSearch.value = '';
        })
        inputSearch.addEventListener('keypress', e => {
            if(e.key === 'Enter')
                btnSearch.click();
        })
    }