http-request/index.html at main · Chibike-267/http-request · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
    initial-scale=1.0">
    <title>SPA</title>
    <style>
        html {
            font-size: 22px;
        }

        body {
            padding: 1rem;
        }

        .card {
            background-color: dodgerblue;
            color: white;
            padding: 1rem;
            /* height: 4rem; */
        }

        .cards {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            gap: 1rem;
        }

        @media (min-width: 600px) {
            .cards {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (min-width: 900px) {
            .cards {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        .description{
            display: none;
        }
    </style>
</head>

<body>
    <h1 style="text-align: center;">STAR WARS ACTORS</h1>
    <p id="loading">Loading API. Please wait...</p>

    <div id="people" class="cards">


    </div>


    <script>
        // api url
        const api_url = "https://swapi.dev/api/people";
        getapi(api_url);
        // Defining async function
        async function getapi(url) {
            fetch(api_url)
                .then(response => response.json())
                .then(data => {
                    hideloader();
                    show(data.results);
                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                });
        }

        function hideloader() {
            document.getElementById('loading').style.display = 'none';
        }

        function show(data) {
           // l= ;

           console
           let tab = "";


             data.forEach(item => {

                 tab += `<div class='card display' style='text-align: center;''><img alt='profile' width='100px' src='images/profile.jpg'><br><p class='name' style='cursor: pointer;'>${item.name}</p><div class='description'>Height: ${item.height} , Gender: ${item.gender} </div> </div>`;

                });


                document.getElementById("people").innerHTML = tab;
            const elements = document.querySelectorAll('.name');
           elements.forEach((item) => {
           item.addEventListener('click', function() {
                const nextElement = item.nextElementSibling;
                nextElement.style.display = 'block';
            });
            name.addEventListener
           });

            }

  </script>
</body>

</html>