Загрузка данных

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Галерея городов</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

 
    <div class="row" id="row-top"></div>


    <div class="row" id="row-bottom"></div>

    <script src="data.js"></script>
    <script>

        const rowTop = document.getElementById('row-top');
        const rowBottom = document.getElementById('row-bottom');


        const template = document.createElement('div');
        template.className = 'city-card';
        template.innerHTML = `
            <img src="" alt="Город" class="city-image">
            <h3 class="city-name"></h3>
            <p class="city-country"></p>
            <p class="city-description"></p>
        `;

        function fillCard(card, city) {
            card.querySelector('.city-image').src = city.image;
            card.querySelector('.city-image').alt = city.name;
            card.querySelector('.city-name').textContent = city.name;
            card.querySelector('.city-country').textContent = city.country;
            card.querySelector('.city-description').textContent = city.description;
        }


        function renderCities(dataSlice, targetRow) {
            if (dataSlice.length === 0) return;

   
            const firstCardInRow = template.cloneNode(true);
            fillCard(firstCardInRow, dataSlice[0]);
            targetRow.appendChild(firstCardInRow);

      
            for (let i = 1; i < dataSlice.length; i++) {
                const newCard = firstCardInRow.cloneNode(true);
                fillCard(newCard, dataSlice[i]);
                targetRow.appendChild(newCard);
            }
        }

   
        const topCities = citiesData.slice(0, 3); 
        const bottomCities = citiesData.slice(3); 

        renderCities(topCities, rowTop);
        renderCities(bottomCities, rowBottom);
    </script>
</body>
</html>