HTML components not working properly when JSON called - html

Question

I'm really struggling with an issue that is hard to describe. I've included a JSFiddle here: https://jsfiddle.net/z8L392ug/
enter code here
Basically the issue is that I have a news API that I am calling for F1 stories. I can call the API successfully, but the component on the page that houses the news articles isn't working correctly. The correct functionality can be found on this site:
https://drivetodescribe.com/news.html (please note this page has to be updated manually and isn't calling the news API)
Can anyone help me or point me in the right direction to get these components working correctly??

Answer 1

Writing a question
In order to resolve your issue, you should provide us with enough information to answer your questions.
but the component on the page that houses the news articles isn't working correctly.
Is rather vague. Other people don't have the context you're working with and have to go on a scavenger hunt to find what you actually mean.
you could rewrite your question like.
"I render a list of tiles . The data is coming from an api call. In each tile has a button on the top right. Clicking the button should cause the tile's content to change. this is not happening"
Attaching handlers
you have a function in your code that runs when the page loads. That piece of code attache a click handler to the .mc-btn-action elements.
When this function runs. it will look for all items in the DOM that have that class.
When your api-call is still fetching, this piece of code cannot find any elements. (as they will only be added when the api call finishes)
Attaching it after the tiles are added to the DOM.
you can attach the handlers whenever you're certain the elements are in the DOM. For example in your render function
function renderCountries(countries) {
const countriesContainer = document.getElementById('myUL');
if (countries.length > 0) {
countriesContainer.innerHTML = countries
.map(country => cardTemplate(country))
.join(' ');
$('.material-card > .mc-btn-action').click(onHelmetClick);
} else {
countriesContainer.innerHTML = '<p>No countries found.</p>';
}
}
Example
$(function() {
$('.material-card > .mc-btn-action').click(onHelmetClick);
});
function onHelmetClick() {
var card = $(this).parent('.material-card');
var icon = $(this).children('i');
icon.addClass('fa-spin-fast');
if (card.hasClass('mc-active')) {
card.removeClass('mc-active');
window.setTimeout(function() {
icon
.removeClass('fa-arrow-left')
.removeClass('fa-spin-fast')
.addClass('fa-bars');
}, 800);
} else {
card.addClass('mc-active');
window.setTimeout(function() {
icon
.removeClass('fa-bars')
.removeClass('fa-spin-fast')
.addClass('fa-arrow-left');
}, 800);
}
}
function myFunction() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName('li');
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
function onHelmetClick() {
var card = $(this).parent('.material-card');
var icon = $(this).children('i');
icon.addClass('fa-spin-fast');
if (card.hasClass('mc-active')) {
card.removeClass('mc-active');
window.setTimeout(function() {
icon
.removeClass('fa-arrow-left')
.removeClass('fa-spin-fast')
.addClass('fa-bars');
}, 800);
} else {
card.addClass('mc-active');
window.setTimeout(function() {
icon
.removeClass('fa-bars')
.removeClass('fa-spin-fast')
.addClass('fa-arrow-left');
}, 800);
}
}
function renderCountries(countries) {
const countriesContainer = document.getElementById('myUL');
if (countries.length > 0) {
countriesContainer.innerHTML = countries
.map(country => cardTemplate(country))
.join(' ');
$('.material-card > .mc-btn-action').click(onHelmetClick);
} else {
countriesContainer.innerHTML = '<p>No countries found.</p>';
}
}
function cardTemplate(data) {
return `
<li class="li-no-hover"><div class="profile">
<article class="material-card Profile">
<a style="text-decoration: none;" href="">
<h2><strong>${data.headline}</strong></h2>
<div class="mc-content">
<div class="img-container">
<img src="${data.image}" alt="Sidepods" style="height: 100%; background-position: center;";>
</div></a>
<div class="mc-description" style="text-align: left; line-height: 135%;">
<p style="text-align: center;">${data.story}</p>
<div class="mc-description-bottom">
<h5>${data.byline}</h5></div>
</div></div>
<a class="mc-btn-action">
<img style="width:60%" src="/page-assets/d2d-icon(left).svg"></a>
</article></div></li>
`;
}
(function start() {
const url =
'https://script.google.com/macros/s/AKfycbzXIL78B0c6lF10Ekhj9c77NXfhyoeFtBIR7RaswQMNv36P4P1laLu03J0WjngMgaXE/exec';
fetch(url)
.then(res => {
return res.json();
})
.then(json => {
COUNTRIES = json.data;
renderCountries(COUNTRIES);
addDropdownOptions(COUNTRIES);
});
})();
$(function() {
$('.material-card > .mc-btn-action').click(onHelmetClick);
});
#import url('https://fonts.googleapis.com/css2?family=Aclonica&family=Audiowide&family=Black+Ops+One&family=Bungee&family=Bungee+Hairline&family=Bungee+Inline&family=Bungee+Outline&family=Bungee+Shade&family=Days+One&family=Michroma&family=Monoton&family=Racing+Sans+One&family=Titillium+Web:ital,wght#0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');
#font-face {
font-family: D2DTitle1;
src: url(fonts/Formula1-Regular_web_0.ttf);
}
#font-face {
font-family: D2DTitle2;
src: url(fonts/Formula1-Bold_web_0.ttf);
}
#font-face {
font-family: D2DTitle3;
src: url(fonts/Formula1-Wide_web_0.ttf);
}
#font-face {
font-family: D2DBody1;
src: url(fonts/TitilliumWeb-ExtraLight.ttf);
}
#font-face {
font-family: D2DBody2;
src: url(fonts/TitilliumWeb-Light.ttf);
}
#font-face {
font-family: D2DBody3;
src: url(fonts/TitilliumWeb-Regular.ttf);
}
#font-face {
font-family: D2DBody4;
src: url(fonts/TitilliumWeb-SemiBold.ttf);
}
#font-face {
font-family: D2DBody5;
src: url(fonts/TitilliumWeb-SuperBold.ttf);
}
#font-face {
font-family: D2DBody6;
src: url(fonts/TitilliumWeb-SuperSuperBlack.ttf);
}
#font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?oymsdl');
src: url('fonts/icomoon.eot?oymsdl#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?oymsdl') format('truetype'), url('fonts/icomoon.woff?oymsdl') format('woff'), url('fonts/icomoon.svg?oymsdl#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^="icon-"],
[class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-news:before {
content: "\e900";
}
.icon-flag:before {
content: "\e901";
}
.icon-helmet:before {
content: "\e902";
}
.icon-wheel:before {
content: "\e903";
}
.icon-specials:before {
content: "\e91c";
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #000000;
color: #ffffff;
box-sizing: border-box;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: 'D2DBody2';
min-height: 100vh;
text-align: center;
overflow-x: hidden;
}
body>* {
width: 100%;
}
h1,
h2,
h3,
h7 {
text-transform: uppercase;
text-align: center;
}
h1 {
font-size: 35pt;
color: black;
text-shadow: 0 0 4px white;
font-family: 'D2DTitle2', sans-serif;
margin: 1.5rem 0;
}
h2 {
font-size: 18pt;
color: white;
font-family: 'D2DTitle2', sans-serif;
}
h3 {
font-size: 14pt;
color: white;
text-align: center;
font-family: 'D2DTitle2', sans-serif;
}
h4 {
font-size: 11pt;
color: white;
text-align: left;
font-family: 'D2DBody1';
}
h5 {
font-size: 8pt;
font-style: italic;
margin-right: 10px;
color: white;
text-align: right;
font-family: 'D2DBody1';
}
h6 {
font-size: 10pt;
color: white;
text-align: center;
font-family: 'D2DBody1';
}
h7 {
font-size: 12pt;
color: white;
text-align: center;
font-family: 'D2DTitle2', sans-serif;
}
p {
font-size: 12pt;
margin-bottom: 12pt;
font-family: 'D2DBody1', sans-serif;
}
h8 {
font-size: 12pt;
margin-bottom: 12pt;
font-family: 'D2DBody4', sans-serif;
}
.container {
max-width: 90%;
margin: 0 auto;
}
#about {
top: 1em;
background-color: black;
font-weight: 500;
font-family: 'D2DTitle2';
}
#media screen and (max-width: 915px) {
h1 {
font-size: 25pt;
}
h2 {
font-size: 14pt;
}
p {
font-size: 11pt;
}
}
.countries-container {
margin-top: 2rem;
margin-bottom: 2rem;
width: 100%;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.countries-container .card {
position: relative;
width: 250px;
margin: 0 1rem 1rem 0;
background-color: #4D4D4D;
cursor: pointer;
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.countries-container .card .card-header .card-title {
color: white;
display: absolute;
margin: 0;
text-align: center;
line-height: 1.2;
padding: 0.5rem 0.75rem;
white-space: pre-wrap;
}
.countries-container .card .card-header img {
display: absolute;
height: 167px;
-o-object-fit: cover;
object-fit: cover;
}
.countries-container .card .card-body {
padding: 0.5rem 0.75rem;
}
.countries-container .card .card-body .card-body-item {
margin-bottom: 0.5rem;
}
.countries-container .card .card-body .card-body-item:last-child {
margin-bottom: 0;
}
.countries-container .card .card-body .card-body-item p {
margin: 0;
}
.card-img-caption .card-img-top {
z-index: 0;
}
.linkicons {
width: 30px;
}
.race-container {
position: relative;
text-align: center;
color: white;
height: 150px;
width: 90%;
overflow: hidden;
background-size: cover;
background-position: center;
}
.r-result {
position: absolute;
color: white;
top: 40%;
right: 5%;
font-family: 'D2DTitle2', sans-serif;
font-size: 1.5em;
text-shadow: .1em .1em #4D4D4D;
text-transform: uppercase;
-webkit-text-stroke-width: 1.3px;
-webkit-text-stroke-color: black;
}
.points {
position: absolute;
color: white;
top: 70%;
right: 5%;
font-family: 'D2DTitle2', sans-serif;
font-size: 1.5em;
text-shadow: .1em .1em #4D4D4D;
text-transform: uppercase;
-webkit-text-stroke-width: 1.3px;
-webkit-text-stroke-color: black;
}
.q-result {
position: absolute;
color: white;
top: 10%;
right: 5%;
font-family: 'D2DTitle2', sans-serif;
font-size: 1.5em;
text-shadow: .1em .1em #4D4D4D;
text-transform: uppercase;
-webkit-text-stroke-width: 1.3px;
-webkit-text-stroke-color: black;
}
.round-name {
position: absolute;
color: white;
top: 40%;
left: 5%;
font-family: 'D2DTitle2', sans-serif;
font-size: 1.5em;
text-shadow: .1em .1em #4D4D4D;
text-transform: uppercase;
-webkit-text-stroke-width: 1.3px;
-webkit-text-stroke-color: black;
}
.specials {
position: relative;
text-align: center;
color: white;
width: 90%;
overflow: hidden;
background-size: cover;
background-position: center;
font-family: 'D2DTitle2', sans-serif;
font-size: 30px;
text-transform: uppercase;
}
.grid-container {
display: grid;
grid-template-columns: 25% 25%;
grid-gap: 50%;
font-size: 3em;
}
.countries-container .profile {
position: relative;
width: 300px;
margin: 1em 1em 1em 1em;
background-color: #000000;
cursor: pointer;
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.countries-container .circuit {
position: relative;
width: 275px;
margin: .75em .75em .75em .75em;
background-color: #000000;
cursor: pointer;
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.material-card {
position: relative;
padding-bottom: calc(100% - 16px);
margin-bottom: 1em;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 2px solid #fff;
}
.material-card h2 {
position: absolute;
top: calc(100% - 54px);
left: 0;
width: 100%;
height: 54px;
padding: 10px 16px;
color: #fff;
margin: 0;
z-index: 10;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.material-card h2 span {
display: block;
font-size: 14px;
}
.material-card h2 strong {
display: block;
font-size: 12px;
}
.material-card .mc-description {
position: absolute;
right: .5em;
left: .5em;
bottom: .5em;
overflow: hidden;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all 1.2s;
-moz-transition: all 1.2s;
-ms-transition: all 1.2s;
-o-transition: all 1.2s;
transition: all 1.2s;
text-align: left;
}
.material-card .mc-footer {
height: 0;
overflow: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.material-card .img-container {
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 3;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.material-card.mc-active .mc-description {
top: 30px;
padding-top: 2em;
padding-bottom: 10px;
overflow-y: scroll;
opacity: 1;
filter: alpha(opacity=100);
color: white;
}
.material-card.Profile h2 {
background-color: #000000;
}
.material-card.Profile.mc-active .mc-content {
background-color: #4d4d4d;
}
.material-card.circuit h2 {
background-color: #000000;
}
.material-card.circuit.mc-active .mc-content {
background-color: #4d4d4d;
}
.material-card.mc-active h2 {
top: 0;
padding: 10px 0px 0px 40px;
}
.material-card .mc-content {
position: absolute;
right: 0;
top: 0;
bottom: 0px;
left: 0;
text-align: center;
overflow: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.material-card .mc-btn-action {
position: absolute;
right: 2px;
top: 2px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 44px;
height: 44px;
text-align: center;
color: #fff;
cursor: pointer;
z-index: 20;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.material-card.mc-active .mc-btn-action {
top: calc(100% - 34px);
}
.material-card.mc-active .img-container {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
width: 54px;
height: 54px;
z-index: 30;
left: 0px;
top: 0px;
}
.material-card.mc-active .mc-description-bottom {
position: flex;
bottom: 0em;
right: 0;
text-align: left;
}
.no-hover:hover {
background-color: transparent;
}
#myInput {
background-color: #000;
width: 60%;
font-size: 16px;
font-family: "D2DTitle2";
color: #fff;
padding: 12px 20px 12px 20px;
border: 1.5px solid #fff;
margin-bottom: 5px;
}
.standings-column {
float: left;
width: 50%;
padding: 15px;
}
.standings-row:after {
content: "";
display: table;
clear: both;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 190%;
}
#-webkit-keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
#keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.ticker-wrap {
position: inline-block;
top: 0;
width: 100%;
overflow: hidden;
height: 4rem;
background-color: rgba(0, 0, 0, 0.9);
padding-left: 100%;
}
.ticker {
display: inline-block;
height: 4rem;
line-height: 4rem;
white-space: nowrap;
padding-right: 100%;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: ticker;
animation-name: ticker;
-webkit-animation-duration: 30s;
animation-duration: 30s;
}
.ticker_item {
display: inline-block;
padding: 0 2rem;
font-size: 2rem;
color: white;
}
.panel-container {
display: flex;
width: 95%;
}
.panel {
color: white;
cursor: pointer;
flex: content;
margin: .3vw;
position: relative;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: .2vw solid #fff;
}
.panel h3 {
font-size: 2vw;
position: absolute;
text-align: center;
bottom: -.01em;
height: 100%;
width: 100%;
writing-mode: vertical-rl;
text-shadow: 0 0 5px black;
position: absolute;
background-color: #4d4d4d;
}
.panel.active {
flex: 22;
}
.panel.active h3 {
writing-mode: horizontal-tb;
margin-left: auto;
margin-right: auto;
width: 100%;
left: 0;
text-align: center;
padding: 0 0;
height: 2.5vw;
transform: rotate(-0deg);
font-size: 2vw;
border-top: .2vw solid #fff;
background-color: black;
}
h1,
h2,
h3,
h7 {
text-transform: uppercase;
text-align: center;
}
h1 {
font-size: 35pt;
color: black;
-webkit-text-stroke-width: 1.3px;
-webkit-text-stroke-color: white;
font-family: 'D2DTitle2', sans-serif;
margin: 1.5rem 0;
}
h2 {
font-size: 18pt;
color: white;
font-family: 'D2DTitle2', sans-serif;
}
h3 {
font-size: 14pt;
color: white;
text-align: center;
font-family: 'D2DTitle2', sans-serif;
}
h4 {
font-size: 11pt;
color: white;
text-align: left;
font-family: 'D2DBody1';
}
h5 {
font-size: 8pt;
font-style: italic;
margin-right: 10px;
color: white;
text-align: right;
font-family: 'D2DBody1';
}
h6 {
font-size: 10pt;
color: white;
text-align: center;
font-family: 'D2DBody1';
}
h7 {
font-size: 12pt;
color: white;
text-align: center;
font-family: 'D2DTitle2', sans-serif;
}
p {
font-size: 12pt;
margin-bottom: 12pt;
}
.container {
max-width: 90%;
margin: 0 auto;
}
.countries-container {
margin-top: 2rem;
margin-bottom: 2rem;
width: 100%;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.countries-container .profile {
position: relative;
width: 18.75em;
margin: 1em 1em 1em 1em;
background-color: #000000;
cursor: pointer;
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.countries-container .circuit {
position: relative;
width: 18.75em;
margin: .75em .75em .75em .75em;
background-color: #000000;
cursor: pointer;
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.material-card {
position: relative;
padding-bottom: calc(100% - 16px);
margin-bottom: 2em;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 2px solid #fff;
}
.material-card h2 {
position: absolute;
top: calc(100% - 2.4em);
left: 0;
width: 100%;
height: 2.4em;
padding: 10px 16px;
color: #fff;
margin: 0;
z-index: 10;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.material-card h2 span {
display: block;
font-size: 0.7em;
}
.material-card h2 strong {
display: block;
font-size: 0.6em;
}
.material-card .mc-description {
position: absolute;
right: .5em;
left: .5em;
bottom: .5em;
overflow: hidden;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all 1.2s;
-moz-transition: all 1.2s;
-ms-transition: all 1.2s;
-o-transition: all 1.2s;
transition: all 1.2s;
}
.material-card .mc-footer {
height: 0;
overflow: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.material-card .img-container {
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 3;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.material-card.mc-active .mc-description {
top: 40px;
padding-top: 2em;
padding-bottom: 2em;
overflow-y: scroll;
opacity: 1;
filter: alpha(opacity=100);
}
.material-card.Profile h2 {
background-color: #000000;
}
.material-card.Profile.mc-active .mc-content {
background-color: #4d4d4d;
}
.material-card.circuit h2 {
background-color: #000000;
}
.material-card.circuit.mc-active .mc-content {
background-color: #4d4d4d;
}
.material-card.mc-active h2 {
top: 0;
padding: 5px 0px 0px 2.5em;
}
.material-card .mc-content {
position: absolute;
right: 0;
top: 0;
bottom: 0px;
left: 0;
text-align: center;
overflow: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.material-card .mc-btn-action {
position: absolute;
right: 2px;
top: 2px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 54px;
height: 54px;
text-align: center;
color: #fff;
cursor: pointer;
z-index: 20;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.material-card.mc-active .mc-btn-action {
top: calc(100% - 2.6em);
}
.material-card.mc-active .img-container {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
width: 3.6em;
height: 3.6em;
z-index: 30;
left: 0px;
top: 0px;
}
.material-card.mc-active .mc-description-bottom {
position: flex;
bottom: 0;
left: 0;
}
.material-card.mc-active .mc-description {
top: 30px;
padding-top: 2em;
opacity: 1;
filter: alpha(opacity=100);
color: #fff;
}
#myInput {
background-color: #000;
width: 60%;
font-size: 16px;
font-family: "D2DTitle2";
color: #fff;
padding: 12px 20px 12px 20px;
border: 1.5px solid #fff;
margin-bottom: 5px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Drive to Describe: News</title>
<meta name="www.drivetodescribe.com" content="News" />
<link rel="stylesheet" href="../style/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DXPBR1GF8S"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>
<body>
<hr style="height:1px;background-color:white">
<h1>News</h1>
</header>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search On Page..">
<ul id="myUL" class="countries-container container">
</ul>
</div>
</body>
</html>