🌍
Country Info Project (UlkeBilgiSistemi)
Your own REST API project. Memorize the patterns: template-literal URLs, nested property access, array indexing, .src for images, .innerHTML for text.
let secilenUlke = document.getElementById("country");
let ulkeAdi = document.getElementById("ulkeAdi");
let ulkeResim = document.getElementById("ulkeResim");
let ulkeBaskent = document.getElementById("ulkeBaskent");
let nufus = document.getElementById("nufus");
function ulkeBilgisiGetir() {
fetch(`https://restcountries.com/v3.1/alpha/${secilenUlke.value}?fields=name,flags,capital,population`)
.then(res => res.json())
.then(data => {
ulkeAdi.innerHTML = `Ülke Adı: ${data.name.common}`;
ulkeResim.src = data.flags.png;
ulkeBaskent.innerHTML = `Ülke Başkent: ${data.capital[0]}`;
nufus.innerHTML = `Ülke Nüfus: ${data.population.toLocaleString("tr-TR")}`;
});
}Patterns to spot
- URL built with a template literal:
`https://...alpha/${var}?fields=...` - Nested property:
data.name.common - Array indexing for first element:
data.capital[0] .srcfor setting image source vs.innerHTMLfor setting text/HTML.toLocaleString("tr-TR")for Turkish-formatted numbers