Page History

/* updated news section */
#latest-news h2 { margin-bottom: 2.5rem;}
#latest-news .content-by-label{display: none; visibility: 'hidden';}
#latest-news .news-wrapper{display: flex; flex-direction: column;}
#latest-news .news-wrapper > .btn{margin: auto; margin-top: 32px;}
#latest-news .news-grid{display: grid; grid-template-columns: repeat(3auto-fill, minmax(320px, 1fr)); gap: 20px;}
#latest-news .news-grid .news-item{overflow: hidden; border-radius: 12px;
box-shadow: 0px 2px 12px 0px rgba(0, 24, 50, 0.08); display: flex; flex-direction: column; gap: 24px; background: white;}

#latest-news .news-grid .news-item .article-details{padding-inline: 40px; padding-bottom: 40px; display: flex; flex-direction: column; flex: 1;}
#latest-news .news-grid .news-item .article-preview{width: 100%; height: 200px; object-fit: cover; clip-path: ellipse(70% 142% at 71% -46%);}
#latest-news .news-grid .news-item .article-title{font-size: 20px; font-style: normal; font-weight: 400; line-height: 24px;}
#latest-news .news-grid .news-item .article-date{font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; display: flex;
align-items: center; gap: 8px;}
#latest-news .news-grid .news-item .article-link{margin-left: auto; margin-top: auto;}

<script>
    document.addEventListener('DOMContentLoaded', ev => {

        const items = [];

        const contentByLabel = document.querySelector('#latest-news .content-by-label');
        const newsList = document.querySelector('#latest-news .news-grid');

        populateArray();
        sortFun('desc');
        addDomElements();

        contentByLabel.remove();


        // functions -----------------------------
        function populateArray() {
            Array.from(contentByLabel.children).forEach(element => {
                try {
                    const arTitle = element.querySelector('.details > a').innerText;
                    const arLink = `https://ec.europa.eu${element.querySelector('.details > a').getAttribute('href')}`;
                    const arTime = formatTime(element.querySelector('.details time').innerTextgetAttribute('datetime'));
                    const sortableTime = new Date(element.querySelector('.details time').innerTextgetAttribute('datetime'));
                    const arPreview = element.querySelector('.details .exc-preview').innerText;

                    const domElement = document.createElement('div');
                    domElement.classList.add('news-item');
                    domElement.innerHTML = `
                            <img loading="lazy" class="article-preview" src="${arPreview}" alt="" aria-hidden="true">
                            <div class="article-details">
                                <h5 class="article-title">${arTitle}</h5>
                                <p class="article-date"><img src="/digital-building-blocks/sites/download/attachments/760938508/ico-date.svg"/> ${arTime}</p>
                                <a class="article-link link-cta primary after" href="${arLink}"><span>Read article</span></a>
                            </div>
                        `;

                    items.push({
                        arTitle: arTitle,
                        arLink: arLink,
                        arTime: arTime,
                        sortableTime: sortableTime,
                        arPreview: arPreview,
                        arDOMElement: domElement
                    });
                } catch (err) { }
            });

        }

        function formatTime(timetxt) {
            const date = new Date(timetxt);
            const monthName = date.toLocaleString('en-US', { month: 'long' });
            const datetxt = `${date.getDate()} ${monthName} ${date.getFullYear()}`;
            return datetxt;
        }

        function sortFun(type) {
            if (type === 'desc') {
                items.sort((a, b) => {
                    return a.sortableTime < b.sortableTime ? 1 : -1
                });
                return;
            }
            items.sort((a, b) => {
                return a.sortableTime > b.sortableTime ? 1 : -1
            });
        }

        function addDomElements() {
            let num = 3;
            for (let index = 0; index < num; index++) {
                let element = items[index];
                if(!element) break;

                newsList.appendChild(element.arDOMElement);
            }
        }
    });
</script>