<script>

let mainContainer = document.getElementById('main-container');

// const list = document.createDocumentFragment();
const url = 'http://localhost:8088/news';

fetch(url)
.then(response => response.json())
.then(articles => {
articles.forEach(article => {
const articleDiv = document.createElement('div');
articleDiv.innerHTML = `
<div class="content">
<div class="news-img">
<input type="text" value="${article.id}" name="id" hidden>
<img src="imgs/articles/${article.imageUrl}" alt="">
<span>${article.section}</span>
</div>
<div class="news-content">
<h3 >${article.title}</h3>
<p>${article.content}</p>
<span class="news-date">${article.publishDate}</span>
<a href="#">Read More</a>
</div>
</div>
`;
mainContainer.appendChild(articleDiv);
});
})
.catch(error => console.error(error));

// match

let main = document.getElementsByTagName("main")[0];

const url1 = 'localhost://8088/matchs';
fetch(url1)
.then((response) => {
return response.json();
})
.then((data) => {
let articles = data;

articles.map(function(article) {
// add names of variables
let match = `
<div class="matchs-container">
<div class="team1">
<div class="img"><img src=imgs/logo/${article.file1}></div>
<p>${article.homeTeamName}</p>
</div>
<div class="result">
<div><span>${article.homeTeamScore}</span>:<span>$
{article.awayTeamScore}</span></div>
<p>${article.matchDate}</p>
<p>${article.time}</p>
</div>
 <div class="team2">
<div class="img"><img src=imgs/logo/${article.file2}></div>
<p>${article.awayTeamName}</p>
</div>
</div>
`;
main.appendChild(match);
});
})
.catch(function(error) {
console.log(error);
});

// ul.appendChild(list);

// ul.appendChild(list);
let match = document.getElementById("match");
let matchs = document.querySelector(".matchs");
let home = document.getElementById("home");
let about = document.getElementById("about");
let contact = document.getElementById("contact");
let feedback = document.getElementById("feedback");
let allMainContent = Array.from(document.querySelectorAll(".main > div"));
let football = document.getElementById("football");
let basketball = document.getElementById("basketball");
let tennis= document.getElementById("tennis");
let volleyball = document.getElementById("volleyball");
let dropdownBtn = document.querySelector(".drop");
let dropdownContainer = document.querySelector(".dropdown-container");
let info = document.getElementById("info");
// match.addEventListener("click", function () {
// allMainContent.forEach(ele => {
// ele.style.display = "none";
// });
// matchs.style.display = "block";
// });
home.addEventListener("click", function () {
allMainContent.forEach(ele => {
ele.style.display = "none";
});
mainContainer.style.display = "block";
dropdownContainer.style.display = "none";
});
dropdownBtn.addEventListener("click", function () {
if(dropdownContainer.style.display == "none") {
dropdownContainer.style.display = "block";
football.addEventListener("click", function () {
allMainContent.forEach(ele => {
ele.style.display = "none";
});
matchs.style.display = "block";
dropdownContainer.style.display = "none";
});
basketball.addEventListener("click", function () {
allMainContent.forEach(ele => {
ele.style.display = "none";
 });
matchs.style.display = "block";
dropdownContainer.style.display = "none";
});
tennis.addEventListener("click", function () {
allMainContent.forEach(ele => {
ele.style.display = "none";
});
matchs.style.display = "block";
dropdownContainer.style.display = "none";
});
volleyball.addEventListener("click", function () {
allMainContent.forEach(ele => {
ele.style.display = "none";
});
matchs.style.display = "block";
dropdownContainer.style.display = "none";
});
}
else
dropdownContainer.style.display = "none";
});

// about.addEventListener("click", function () {
// allMainContent.forEach(ele => {
// ele.style.display = "none";
// });
// matchs.style.display = "block";
// dropdownContainer.style.display = "none";
// });
// contact.addEventListener("click", function () {
// allMainContent.forEach(ele => {
// ele.style.display = "none";
// });
// matchs.style.display = "block";
// dropdownContainer.style.display = "none";
// });
// feedback.addEventListener("click", function () {
// allMainContent.forEach(ele => {
// ele.style.display = "none";
// });
// matchs.style.display = "block";
// dropdownContainer.style.display = "none";
// });

feedback.onclick = function () {
allMainContent.forEach(ele => {
ele.style.display = "none";
});
info.style.display = "block";
}
</script>