JSFiddle - React, Tailwind, and code Playground

by charlescarver

HTML

<script src="https://raw.github.com/mattbryson/TouchSwipe-Jquery-Plugin/master/jquery.touchSwipe.js"></script>
<div class='row'><div class='row-inside'><div class='row-l'>" + school + "</div><div class='row-r'>" + type + "</div></div><div class='star'><div class='star-inside'></div></div></div>

CSS

div{
    width:200px;
    height:50px;
    background-color:red;
}

JavaScript

$("div").swipe({
    swipeLeft: function(event, direction, distance, duration, fingerCount) {
        setFavorite();
    },
    threshold: 10,
    triggerOnTouchEnd: false
});


function setFavorite() {
    
    if ($(event.target).attr("class") === "row-inside") {
        var element = $(event.target);
    }
    if ($(event.target).attr("class") === "row-l") {
        var element = $(event.target).parent();
    }
    if ($(event.target).attr("class") === "row-r") {
        var element = $(event.target).parent();
    }
    
    
    var text = $(element).find(".row-l").text();
    var favstatus = $(element).find(".row-r").text();
    var thisStar = $(element).parent().find(".star-inside");
    $(element).css("margin-left", "-75px");
    if ($(thisStar).hasClass("favorite")) {
        $(".clear span").text("");
        $(thisStar).removeClass("favorite");
        localStorage.removeItem("favorite");
        localStorage.removeItem("favorite-status");
    } else {
        $(".clear span").text("\"" + text + "\"");
        localStorage.setItem("favorite", text);
        localStorage.setItem("favorite-status", favstatus);
        $(".star-inside").not(thisStar).removeClass("favorite");
        $(thisStar).addClass("favorite");
    }
    setTimeout(function() {
        $(element).css("margin-left", "0px");
    }, 500);
    setTimeout(function() {
        $(document).on("touchmove", ".row", function() {
            touchMove();
        });
    }, 800);



}