JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<div class="drop-area"><b>Drop Link Here</b><br><input class="drop-input"></input></div>
<br>
<div class="output"></div>
    
    item id = time ++ 
    get time second(statick),
    update time in title,
    var timeAgo = oldTime - newTime;

CSS

.drop-area{
    border:solid 1px gray;
    border-radius:7px;
    padding:.5em;
    margin:0 auto;
    width:11em;
}
.delete{cursor:pointer;}
.time{cursor:default;}

JavaScript

$(document).ready(function(){
    jQuery.event.props.push('dataTransfer');
    var urlText,
        agoInterval;
    
    function time(){
       var d = new Date();
       var h = d.getHours();
       var m = d.getMinutes();
       var t = h+':'+m;
       return(t);
    }
    
    $(this).on('mouseover', '.time',function(){
        
        var d = new Date();
        var h = d.getHours();
        var m = d.getMinutes();
        var s = d.getSeconds();
        
        var oldSec = $(this).attr('oldSec');
        var newSec = String(h)+String(m)+String(s);
        var t = newSec - oldSec;
        
        var agoInterval = setInterval(function(){
            $(this).attr('title','Added '+t+' seconds ago');
        },1000);
    });
    
    
    function appendToList(){
        var d = new Date();
        var h = d.getHours();
        var m = d.getMinutes();
        var s = d.getSeconds();
        
        var oldSec = $(this).attr('oldSec');
        var newSec = String(h)+String(m)+String(s);
        var t = newSec - oldSec;
        
        agoInterval = setInterval(function(){
            $(this).attr('title','Added '+t+' seconds ago');
        },1000);
        
        $('.output').append('<li><a href="'+urlText+'" target="_blank">'+urlText+' </a><b class="time" oldSec="'+h+''+m+''+s+'" title=" ">'+time()+'</b><b class="delete" title="remove item"> (X)</b><br></li>');
    }
    
    $('.drop-area')
        .bind( 'dragenter dragover', false)
        .bind( 'drop', function(e){
            e.stopPropagation();
            e.preventDefault();
            urlText = e.dataTransfer.getData('text');
            appendToList();
    });
    
    $('.drop-input').keypress(function(e){
        if(e.keyCode == 13){
            urlText = $(this).val();
            appendToList();
            $(this).val('');
        }
    });
    
    $(this).on('click', '.delete', function (){
        clearInterval(agoInterval);
        $(this).parent().remove();
    });
});