reto-frontend-puro/js/templates.js

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>`;
}