|
|
const countryApiUrl = 'https://restcountries.com/v2/all';
|
|
|
let startButton = document.getElementById("start");
|
|
|
let anyButton = document.getElementById("any");
|
|
|
const sort = document.getElementById("sort");
|
|
|
const input = document.getElementById("filter");
|
|
|
const form = document.getElementById("form")
|
|
|
const list = document.getElementById("list")
|
|
|
const text = document.getElementById("text")
|
|
|
|
|
|
let countries = [];
|
|
|
let filteredCountries = [];
|
|
|
startButton = false
|
|
|
anyButton = true
|
|
|
|
|
|
|
|
|
addEventListener();
|
|
|
|
|
|
function addEventListener() {
|
|
|
|
|
|
form.addEventListener("click",choseButton)
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// fetchging data
|
|
|
|
|
|
fetch(countryApiUrl)
|
|
|
.then((response) => response.json())
|
|
|
.then(async (data) => {
|
|
|
await data.forEach((element) => {
|
|
|
countries.push(element.name);
|
|
|
|
|
|
});
|
|
|
// display(filteredCountries);
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// display arr metod in the HTML
|
|
|
|
|
|
function display(arr) {
|
|
|
|
|
|
let dizi = []
|
|
|
arr.map((ar) => {
|
|
|
|
|
|
const li = `<li>${ar}</li>`;
|
|
|
dizi.push(li)
|
|
|
});
|
|
|
list.innerHTML=dizi
|
|
|
sort.addEventListener("click",(e)=>{
|
|
|
e.preventDefault()
|
|
|
list.innerHTML = dizi.reverse();
|
|
|
|
|
|
})
|
|
|
}
|
|
|
|
|
|
//chose buttton whick filter aray
|
|
|
|
|
|
function choseButton(e){
|
|
|
|
|
|
input.addEventListener("keyup", filterAny);
|
|
|
|
|
|
switch(e.target.id){
|
|
|
|
|
|
|
|
|
case "start":
|
|
|
e.preventDefault()
|
|
|
filterStart()
|
|
|
break;
|
|
|
|
|
|
case "any":
|
|
|
e.preventDefault()
|
|
|
filterAny()
|
|
|
break;
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// filter array on click any button
|
|
|
|
|
|
function filterAny(){
|
|
|
let inputValue = input.value.toLowerCase().trim()
|
|
|
|
|
|
list.innerHTML = '';
|
|
|
filteredCountries = []
|
|
|
|
|
|
if(inputValue.length !==0){
|
|
|
|
|
|
countries.forEach((country)=>{
|
|
|
|
|
|
if(country.toLowerCase().trim().includes(inputValue,0)){
|
|
|
filteredCountries.push(country)
|
|
|
|
|
|
}else{
|
|
|
|
|
|
// console.log("Aradığınız ülke bulunamadı")
|
|
|
}
|
|
|
})
|
|
|
text.innerHTML=`Countries containing ${inputValue} are ${filteredCountries.length}`
|
|
|
|
|
|
}else{
|
|
|
// alert("Lütfen geçerli bir değer girin")
|
|
|
}
|
|
|
display(filteredCountries)
|
|
|
}
|
|
|
|
|
|
// filter array on click start button
|
|
|
|
|
|
function filterStart(){
|
|
|
let inputValue = input.value.toLowerCase().trim()
|
|
|
|
|
|
list.innerHTML = '';
|
|
|
filteredCountries = []
|
|
|
|
|
|
if(inputValue.length !==0){
|
|
|
|
|
|
countries.forEach((country)=>{
|
|
|
|
|
|
if(country.toLowerCase().trim().startsWith(inputValue,0)){
|
|
|
filteredCountries.push(country)
|
|
|
|
|
|
}else{
|
|
|
|
|
|
// console.log("Aradığınız ülke bulunamadı")
|
|
|
}
|
|
|
})
|
|
|
text.innerHTML=`Countries start with ${inputValue} are ${filteredCountries.length}`
|
|
|
}else{
|
|
|
// alert("Lütfen geçerli bir değer girin")
|
|
|
}
|
|
|
display(filteredCountries)
|
|
|
}
|
|
|
|
|
|
|
