let root = document.documentElement // Used for css variables

let selectedSports = []

$(".sport").on("click", function() {
    $(this).toggleClass("selected")

    let sportName = $(this).children()[1].innerHTML // 2nd element, which is the sport name

    
    let index = selectedSports.indexOf(sportName)
    if (index > -1 ) {  // If element is found in array
        selectedSports.splice(index, 1) // Remove sport at index
    } else {
        selectedSports.push(sportName)  // Add sport to array
    }

    $(this).trigger("selected", [selectedSports.includes(sportName), selectedSports]) // Trigger event
})

function getCSSVariable(name) {
    return getComputedStyle(root).getPropertyValue(name)
}

function tweetCell(tweet) {
    var cell = document.createElement("div");
    cell.innerHTML =
<<<<<<< Updated upstream
        '<div class="tweet">'+
            '<img src="' + tweet.user.profile_image_url + '" alt="" class="tweet-profilepicture">' +
            '<div class="tweet-content">' +
                '<div class="tweet-name">'+
                    '<span class="tweet-nickname">'+tweet.user.name+' </span>'+
                    '<span class="tweet-username">@'+tweet.user.screen_name+'</span>'+
                '</div>'+
                '<span class="tweet-text">'+tweet.text+'</span>'+
                '<div class="tweet-interactions">'+
                    '<div class="tweet-interaction tweet-likes">'+
                        '<span class="material-symbols-outlined">favorite</span>'+
                        '<span>'+tweet.favorite_count+'</span>'+
                    '</div>'+
                    '<div class="tweet-interaction tweet-retweets">'+
                        '<span class="material-symbols-outlined">repeat</span>'+
                        '<span>'+tweet.retweet_count+'</span>'+
                    '</div>'+
                    '<div class="tweet-interaction tweet-replies">'+
                        '<span class="material-symbols-outlined">chat_bubble</span>'+
                        '<span>'+tweet.reply_count+'</span>'+
                    '</div>'+
                '</div>'+
            '</div>'+
        '</div>';
    parent.append(cell);
=======
    `<div class="tweet">
        <img src="${tweet.user.profile_image_url}" alt="" class="tweet-profilepicture">
        <div class="tweet-content"> 
            <div class="tweet-name">
                <span class="tweet-nickname">${tweet.user.name}</span>
                <span class="tweet-username">@${tweet.user.screen_name}</span>
            </div>
            <span class="tweet-text">${tweet.text}</span>
            <div class="tweet-interactions">
                <div class="tweet-interaction tweet-likes">
                    <span class="material-symbols-outlined">favorite</span>
                    <span>${tweet.favorite_count}</span>
                </div>
                <div class="tweet-interaction tweet-retweets">
                    <span class="material-symbols-outlined">repeat</span>
                    <span>${tweet.retweet_count}</span>
                </div>
                <div class="tweet-interaction tweet-replies">
                    <span class="material-symbols-outlined">chat_bubble</span>
                    <span>${tweet.reply_count}</span>
                </div>
            </div>
        </div>
    </div>`
    return cell
>>>>>>> Stashed changes
}

$(document).on('tweet', console.log(tweet));