https://internetshutdowns.in/static/newscript/trendingVideos.js

1//The function to render trending videos in html body
2function renderTrendingVideos(trendingVideos) {
3
4    //initializing the container for trendingVideos section.
5    let container = document.getElementById('trendingVideosContainer');
6
7    //starting for loop for iterating response array through api using apiCallForTrendingVideos()
8    for (let i = 0; i < trendingVideos.length; i++) {
9
10      //I have set 2 if conditions for example if the current index is 0 then it will create first block of layout with
11      //one big container and
12      //for the second index it will create two small containers within a same size as first container
13
14      //condition 0 for one big container
15        if (i === 0) {
16            container.innerHTML += `
17                  <div class="fifth-col-2-row-1"
18                       style="background-image: url('https://internetshutdowns.in/media/${trendingVideos[i].fields.uploadThumbnail}');">
19                    <div class="fifth-col-2-row-1-txt">${trendingVideos[i].fields.videoTitle}</div>
20                    <img src="static/images/playbtn.png" alt="playbutton"
21                         onclick="window.open('${trendingVideos[i].fields.videoLink}', '_blank');"
22                         data-url="${trendingVideos[i].fields.videoLink}"
23                         class="video-play-btn-img">
24                  </div>
25                  
26                  <div class="fifth-col-2-row-2" id="fifth-col-2-row-2"> </div>
27                `;
28            container = document.getElementById("fifth-col-2-row-2");
29        }
30        //second condition for two small containers within a big container
31        else if (i === 1 || i === 2) {
32            container.innerHTML += `
33        <div class="fifth-col-2-row-2-col-1"
34             style="background-image: url('https://internetshutdowns.in/media/${trendingVideos[i].fields.uploadThumbnail}')">
35          <div class="fifth-col-2-row-2-txt">${trendingVideos[i].fields.videoTitle}</div>
36          <img src="static/images/playbtn.png" alt="playbutton"
37               onclick="window open('${trendingVideos[i].fields.videoLink}', '_blank');"
38               data-url="${trendingVideos[i].fields.videoLink}"
39               class="video-play-btn-img">
40        </div>
41    `;
42        }
43    }
44
45}
46
47
48//function to create api call and getting array as a response for trending videos section.
49function apiCallForTrendingVideos() {
50    const xhr = new XMLHttpRequest();
51
52// Set the request method and URL
53    xhr.open("GET", "get-trending-videos");
54
55// Set the request header
56    xhr.setRequestHeader("Content-Type", "application/json");
57
58// Define a callback function to handle the response
59    xhr.onload = function () {
60        // Check if the request was successful
61        if (xhr.status === 200) {
62            // Get the response data and parse it into a JSON response
63
64            const arrayData = JSON.parse(JSON.parse(xhr.response).data);
65
66            //calling renderTrendingVideos() function to render the section with response data
67
68            renderTrendingVideos(arrayData)
69
70        }
71    };
72
73// Send the request
74    xhr.send();
75}
76
77apiCallForTrendingVideos()
78