| 1 |
- function clickGestures(item) { let openItem = document.getElementById('item-'+item); openItem.addEventListener('click', function(e) { if (document.getElementById('modal-'+this.id).style.display === '') { document.getElementById('modal-'+this.id).style.display = 'none'; return; } document.getElementById('modal-'+this.id).style.display = ''; }); let closeItem = document.getElementById('close-'+item); closeItem.addEventListener('click', function(e) { let ritem = this.id.replace('close','item'); if (document.getElementById('modal-'+ritem).style.display === '') { document.getElementById('modal-'+ritem).style.display = 'none'; return; } document.getElementById('modal-'+ritem).style.display = ''; });}let request = new XMLHttpRequest();request.open('GET', 'https://restcountries.eu/rest/v2/lang/es', true);request.onload = function () { const array = JSON.parse(this.response); let countryModalLoop = document.querySelector('.country-modal'); let countryLoop = document.querySelector('.country-container'); let item = 0; array.forEach(function(obj){ /* populate array in home */ countryLoop.insertAdjacentHTML('beforeend', countryItem(obj, item)); /* modal */ countryModalLoop.insertAdjacentHTML('beforeend', countryModal(obj, basicsTable(obj), translationTable(obj.translations), item)); /* set click gestures */ clickGestures(item); item++; });};request.send();function translationTable(obj) { return `<table border="1"> <tr><th> Translations </th></tr> <tr><td> fa: ${obj.fa} </td></tr> <tr><td> hr: ${obj.hr} </td></tr> <tr><td> nl: ${obj.nl} </td></tr> <tr><td> pt: ${obj.pt} </td></tr> <tr><td> br: ${obj.br} </td></tr> <tr><td> it: ${obj.it} </td></tr> <tr><td> ja: ${obj.ja} </td></tr> <tr><td> fr: ${obj.fr} </td></tr> <tr><td> es: ${obj.es} </td></tr> <tr><td> de: ${obj.de} </td></tr> <table>`;}function basicsTable(obj) { return `<table border="1"> <tr> <th>cioc</th> <th>flag</th> <th>numericCode</th> <th>nativeName</th> <th>gini</th> <th>area</th> <th>demonym</th> <th>population</th> <th>subregion</th> <th>region</th> <th>capital</th> <th>alpha3Code</th> <th>alpha2Code</th> </tr> <tr> <td>${obj.cioc}</td> <td>${obj.flag}</td> <td>${obj.numericCode}</td> <td>${obj.nativeName}</td> <td>${obj.gini}</td> <td>${obj.area}</td> <td>${obj.demonym}</td> <td>${obj.population}</td> <td>${obj.subregion}</td> <td>${obj.region}</td> <td>${obj.capital}</td> <td>${obj.alpha3Code}</td> <td>${obj.alpha2Code}</td> </tr> <table>`;}function tableTHTranslations(th) { return `<table border="1"><tr>${th}</tr>`;}function tableTH(th) { return `<table border="1"><tr>${th}</tr>`;}function tableTD(td) { return `<tr>${td}</tr></table>`;}function countryItem(obj,i) { return `<article id="item-${i}" class="item-box"> <div class="item-country country-item"> <a class="thumbnail-box" href="javascript: void(0)" title="País: ${obj.name}"> <div class="thumbnail"> <img class="thumbnail-img" alt="${obj.name}" src="${obj.flag}"> <p class="length">Capital: ${obj.capital}</p> </div> </a> <h4 class="title"><a href="#" title="${obj.name}">${obj.name}</a></h4> <address title="${obj.name}"><b><a href="#">Ver más</a></b></address> <div class="stats horizontal-stats"> <span>Continente: ${obj.subregion}</span> <div class="views">Nombre Nativo: ${obj.nativeName}</div> </div> </div></article>`;}function countryModal(obj,basics,content,i) { return `<div id="modal-item-${i}" class="container" style="display: none;"> <div class="simple-modal" tabindex="0"> <div class="simple-modal__content"> <header> <h4>${obj.name}</h4> <span id="close-${i}" class="close">Cerrar</span> </header> <div class="modal-main"> ${basics} ${content} </div> </div> </div></div>`;}
|
