LAcalist Test

				
					<div id="events-container-2"></div>
<script type="text/javascript">
    function loadEvents() {
        var apiUrl = 'https://events.la.psu.edu/wp-json/custom/v1/events?group=empathy-and-moral-psychology-lab&days=365&num=5&lookback=1';
        fetch(apiUrl)
            .then(response => response.json())
            .then(events => {
                var html = '';
                html += '<div class="event_list">';
                
                events.forEach(event => {
                    var thumbnail = event.thumbnail_url ? `<a href='${event.url}' class='thumb'><img decoding="async" src="${event.thumbnail_url}" alt="${event.event_title}" /></a>` : '';
                    var timeString = event.time_string ? `, ${event.time_string}` : ''; 

                    var subtitle = event.subtitle ? `
                        <div class='event_sub'>
                            ${event.event_subtitle}
                        </div>` : '';

                    var exp_and_location = event.location ? `
                        <div class='event_exp'>
                            ${event.experience} event, ${event.location}
                        </div>` : `
                        <div class='event_exp'>
                            ${event.experience} event
                        </div>`;

                    html += `
                        <div class='event_row'>
                            ${thumbnail}
                            <div class='event_title'><a href='${event.url}'>${event.event_title}</a></div>
                            ${subtitle}
                            <div class='event_datetime'>${event.date_string}${timeString}</div>
                            ${exp_and_location}
                            <div class='event_desc'>${event.description}</div>
                        </div>
                    `;
                });
                
                html += '</div>';
                document.getElementById('events-container-2').innerHTML = html;
            })
            .catch(error => {
                console.error('An error occurred:', error);
            });
    }
    loadEvents();
</script>
<style>
.event_list {}
.event_row { 
    bborder:1px solid #314D64;
    bborder-radius:.5rem;
    bpadding: 1rem 1rem .75rem 1rem;
    margin-bottom:1rem;
    bbackground:#fafafa;
    overflow: hidden; /* This ensures the contents are contained within the card */
    position: relative; /* Sets a stacking context for absolutely positioned children */
    font-size:.9rem;
    
}
.event_row .event_title { 
    font-weight:700;
    font-size:1.15rem;
}

.event_row .event_title a:hover { 
    color: #1e407c;
    text-decoration: underline;
    text-decoration-color: #005fa9;
    text-decoration-thickness: 2px;
}


.event_row .event_desc p {margin-bottom:0;}
.event_row a.thumb {
    float: right;
    right: 1rem; /* Aligns the thumbnail to the right */
    bottom: 1rem; /* Ensures the thumbnail is contained within the bottom of the card */
    display: block;
    max-width:75px;
    margin-left: 1rem;
}

.event_datetime {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.2rem;
    color: #1e407c;
    margin: 4px 0 0 0 ;
}

.event_row img { 
    border-radius:.25rem;
    height: auto; /* Maintains aspect ratio */
    max-height: 100%; /* Limits the height off the thumb container */
    max-width: 100%; /* Limits the width to the thumb container */
    object-fit: cover; /* Ensures the image covers the area without distorting */
}

.event_row {
    border-bottom: 1px solid #e4e5e7;
    padding-bottom: 1rem;
}

.event_row:last-child {
    border-bottom: none;
    padding-bottom: 0rem;
}

.event_row .event_desc {
   overflow: hidden;
   color: #666666;
   display: -webkit-box;
   -webkit-line-clamp: 1;
           line-clamp: 1; 
   -webkit-box-orient: vertical;
}
</style>