geomago/sidebar_with_apis.js

## sidebar_with_apis.js
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .sidebar {
            position: fixed;
            top: 20px;
            right: 20px;
            width: 25vw;
        }

        .card {
            margin-bottom: 1rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
        }

        .sidebar .quote {
            background-color: aliceblue;
        }

        .sidebar .quote .card-text {
            font-size: smaller;
            color: darkblue;
        }

        .sidebar .author {
            font-size: smaller;
            font-style: italic;
            text-align: right;
        }

        .sidebar dl {
            max-height: 33vh;
            overflow-y: auto;
            font-size: smaller;
        }

        .sidebar a {
            text-decoration: none;
        }

        .weather-icon {
            width: 70px;
            background-repeat: no-repeat;
        }

    </style>
    <title>Sidebar from public APIs</title>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col">
                <!-- Main content goes here -->
            </div>
            <div class="sidebar">
                <div class="card weather">
                    <div class="card-body">
                        <h5 class="card-title">Weather</h5>
                        <div class="spinner-border" role="status"></div>
                        <div class="card-text">
                            <table>
                                <tr>
                                    <td class="weather-icon"></td>
                                    <td class="weather-text">
                                        <div class="weather-temp"></div>
                                        <div class="weather-wind"></div>
                                        <div class="weather-rain"></div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="card quote">
                    <div class="card-body">
                        <h5 class="card-title">Quote of the day</h5>
                        <div class="spinner-border" role="status"></div>
                        <p class="card-text"></p>
                        <div class="author"></div>
                    </div>
                </div>
                <div class="card news">
                    <div class="card-body">
                        <h5 class="card-title"></h5>
                        <div class="spinner-border" role="status"></div>
                        <dl></dl>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        (async function () {
            // Get the IP location
            var apiKey = 'b0b167ff21930f1d85db120f240276b15411cbc2d7b3383098a49047';
            var apiUrl = `https://api.ipdata.co?api-key=${apiKey}`;
            var response = await fetch(apiUrl);
            var loc = await response.json();

            // Fill the Weather card
            document.querySelector('.sidebar .weather .card-title').innerText = "Weather in " + loc.city;
            var options = {
                method: 'GET',
                headers: {
                    'X-RapidAPI-Key': '177fffb1e0mshb9e624021ff5b30p18ce1cjsn9807e5e3c192',
                    'X-RapidAPI-Host': 'weatherapi-com.p.rapidapi.com'
                }
            };
            apiUrl = `https://weatherapi-com.p.rapidapi.com/current.json?q=${loc.latitude}%2C${loc.longitude}`;
            response = await fetch(apiUrl, options);
            var wea = await response.json();
            document.querySelector('.sidebar .weather .spinner-border').remove();

            var icon = document.querySelector('.weather-icon');
            icon.style.backgroundImage = `url(https:${wea.current.condition.icon})`;

            document.querySelector('.weather-temp').innerHTML = `<b>${wea.current.condition.text} - ${wea.current.temp_c}</b>°C`;
            document.querySelector('.weather-wind').innerHTML = `Wind: <b>${wea.current.wind_dir} ${wea.current.wind_kph}</b> km/h`;
            document.querySelector('.weather-rain').innerHTML = `Rain: <b>${wea.current.precip_mm}</b> mm`;

            // fill the "Quote of the day"
            options = {
                headers: {
                    'X-Api-Key': '9qRQuM5zMRT3Fr7COi4f1g==Sam3A0A7v9pDndLv'
                }
            };
            response = await fetch('https://api.api-ninjas.com/v1/quotes', options);
            var data = await response.json();
            document.querySelector('.sidebar .quote .spinner-border').remove();

            document.querySelector('.sidebar .quote .card-text').innerText = data[0].quote;
            document.querySelector('.sidebar .quote .author').innerText = data[0].author;

            // fill the "News"
            document.querySelector('.sidebar .news .card-title').innerText = "News from " + loc.country_name;

            options = {
                headers: {
                    'X-BingApis-SDK': 'true',
                    'X-RapidAPI-Key': '177fffb1e0mshb9e624021ff5b30p18ce1cjsn9807e5e3c192',
                    'X-RapidAPI-Host': 'bing-news-search1.p.rapidapi.com'
                }
            };

            apiUrl = `https://bing-news-search1.p.rapidapi.com/news?cc=${loc.country_code}`;
            response = await fetch(apiUrl, options);
            data = await response.json();
            // Sort by descending date
            var articles = data.value;
            articles.sort((a, b) => b.datePublished.localeCompare(a.datePublished));
            document.querySelector('.sidebar .news .spinner-border').remove();

            // Create the list
            var list = document.querySelector('.sidebar .news dl');
            articles.forEach((article) => {
                var term = document.createElement('dt');
                term.innerText = article.datePublished.substring(11, 16);
                list.appendChild(term);

                var item = document.createElement('dd');
                var link = document.createElement('a');
                link.setAttribute('target', '_blank');
                link.setAttribute('href', article.url);
                link.innerText = article.name;
                item.appendChild(link);

                list.appendChild(item);
            });
        })();
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<style>
	.sidebar {
	position: fixed;
	top: 20px;
	right: 20px;
	width: 25vw;
	}

	.card {
	margin-bottom: 1rem;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
	}

	.sidebar .quote {
	background-color: aliceblue;
	}

	.sidebar .quote .card-text {
	font-size: smaller;
	color: darkblue;
	}

	.sidebar .author {
	font-size: smaller;
	font-style: italic;
	text-align: right;
	}

	.sidebar dl {
	max-height: 33vh;
	overflow-y: auto;
	font-size: smaller;
	}

	.sidebar a {
	text-decoration: none;
	}

	.weather-icon {
	width: 70px;
	background-repeat: no-repeat;
	}

	</style>
	<title>Sidebar from public APIs</title>
	</head>

	<body>
	<div class="container">
	<div class="row">
	<div class="col">
	<!-- Main content goes here -->
	</div>
	<div class="sidebar">
	<div class="card weather">
	<div class="card-body">
	<h5 class="card-title">Weather</h5>
	<div class="spinner-border" role="status"></div>
	<div class="card-text">
	<table>
	<tr>
	<td class="weather-icon"></td>
	<td class="weather-text">
	<div class="weather-temp"></div>
	<div class="weather-wind"></div>
	<div class="weather-rain"></div>
	</td>
	</tr>
	</table>
	</div>
	</div>
	</div>
	<div class="card quote">
	<div class="card-body">
	<h5 class="card-title">Quote of the day</h5>
	<div class="spinner-border" role="status"></div>
	<p class="card-text"></p>
	<div class="author"></div>
	</div>
	</div>
	<div class="card news">
	<div class="card-body">
	<h5 class="card-title"></h5>
	<div class="spinner-border" role="status"></div>
	<dl></dl>
	</div>
	</div>
	</div>
	</div>
	</div>
	<script>
	(async function () {
	// Get the IP location
	var apiKey = 'b0b167ff21930f1d85db120f240276b15411cbc2d7b3383098a49047';
	var apiUrl = `https://api.ipdata.co?api-key=${apiKey}`;
	var response = await fetch(apiUrl);
	var loc = await response.json();

	// Fill the Weather card
	document.querySelector('.sidebar .weather .card-title').innerText = "Weather in " + loc.city;
	var options = {
	method: 'GET',
	headers: {
	'X-RapidAPI-Key': '177fffb1e0mshb9e624021ff5b30p18ce1cjsn9807e5e3c192',
	'X-RapidAPI-Host': 'weatherapi-com.p.rapidapi.com'
	}
	};
	apiUrl = `https://weatherapi-com.p.rapidapi.com/current.json?q=${loc.latitude}%2C${loc.longitude}`;
	response = await fetch(apiUrl, options);
	var wea = await response.json();
	document.querySelector('.sidebar .weather .spinner-border').remove();

	var icon = document.querySelector('.weather-icon');
	icon.style.backgroundImage = `url(https:${wea.current.condition.icon})`;

	document.querySelector('.weather-temp').innerHTML = `<b>${wea.current.condition.text} - ${wea.current.temp_c}</b>°C`;
	document.querySelector('.weather-wind').innerHTML = `Wind: <b>${wea.current.wind_dir} ${wea.current.wind_kph}</b> km/h`;
	document.querySelector('.weather-rain').innerHTML = `Rain: <b>${wea.current.precip_mm}</b> mm`;

	// fill the "Quote of the day"
	options = {
	headers: {
	'X-Api-Key': '9qRQuM5zMRT3Fr7COi4f1g==Sam3A0A7v9pDndLv'
	}
	};
	response = await fetch('https://api.api-ninjas.com/v1/quotes', options);
	var data = await response.json();
	document.querySelector('.sidebar .quote .spinner-border').remove();

	document.querySelector('.sidebar .quote .card-text').innerText = data[0].quote;
	document.querySelector('.sidebar .quote .author').innerText = data[0].author;

	// fill the "News"
	document.querySelector('.sidebar .news .card-title').innerText = "News from " + loc.country_name;

	options = {
	headers: {
	'X-BingApis-SDK': 'true',
	'X-RapidAPI-Key': '177fffb1e0mshb9e624021ff5b30p18ce1cjsn9807e5e3c192',
	'X-RapidAPI-Host': 'bing-news-search1.p.rapidapi.com'
	}
	};

	apiUrl = `https://bing-news-search1.p.rapidapi.com/news?cc=${loc.country_code}`;
	response = await fetch(apiUrl, options);
	data = await response.json();
	// Sort by descending date
	var articles = data.value;
	articles.sort((a, b) => b.datePublished.localeCompare(a.datePublished));
	document.querySelector('.sidebar .news .spinner-border').remove();

	// Create the list
	var list = document.querySelector('.sidebar .news dl');
	articles.forEach((article) => {
	var term = document.createElement('dt');
	term.innerText = article.datePublished.substring(11, 16);
	list.appendChild(term);

	var item = document.createElement('dd');
	var link = document.createElement('a');
	link.setAttribute('target', '_blank');
	link.setAttribute('href', article.url);
	link.innerText = article.name;
	item.appendChild(link);

	list.appendChild(item);
	});
	})();
	</script>
	</body>

	</html>