JSFiddle - React, Tailwind, and code Playground

by jowan

HTML

<hr />
<div>
<div id="time1" class="timer">00:00:05</div>
<div class="post">Lorem Ipsum</div>
</div>
<hr />
<div>
<div id="time2" class="timer">00:00:10</div>
<div class="post">Lorem Ipsum</div>
</div>
<hr />
<div>
<div id="time3" class="timer">00:00:15</div>
<div class="post">Lorem Ipsum</div>
</div>
<hr />

CSS

body {
    padding: 10%;
}

hr {
    margin: 0px;
    padding: 0px;
    height: 6px;
    background: black;
}

.timer {
    margin: 0px;
    padding: 8px 8px;
    background-color: whitesmoke;
    color: red;    
}

.post {
    margin: 0px;
    padding: 8px 8px;
    background: white;
    /*border-bottom: 4px solid black;*/
}

JavaScript

function tampilkan(ele){
    var str= $(ele).text();

    get_time= str.split(":",3);
    jam= get_time[0];
    menit= get_time[1];
    detik= get_time[2];
    
    total_detik= parseInt(jam) * 3600;
    total_detik+= parseInt(menit) * 60;
    total_detik+= parseInt(detik);
    return total_detik;
}

function get_elapsed_time_string(total_seconds) {
    function pretty_time_string(num) {
    return ( num < 10 ? "0" : "" ) + num;
    }
    
        var hours = Math.floor(total_seconds / 3600);
         total_seconds = total_seconds % 3600;
        
        var minutes = Math.floor(total_seconds / 60);
        total_seconds = total_seconds % 60;
        
        var seconds = Math.floor(total_seconds);
        
        hours = pretty_time_string(hours);
        minutes = pretty_time_string(minutes);
        seconds = pretty_time_string(seconds);
        
        var currentTimeString = hours + ":" + minutes + ":" + seconds;        
        return currentTimeString;
}

var
elapsed_seconds= tampilkan("#time1");
elapsed_seconds2= tampilkan("#time2");
elapsed_seconds3= tampilkan("#time3");

timer= setInterval(function() {
    if (elapsed_seconds != 0){
        elapsed_seconds = elapsed_seconds - 1;
        $('#time1').text(get_elapsed_time_string(elapsed_seconds))
    }else{
        $('#time1').parent().slideUp('slow', function(){
            $(this).find('.post').text("Post has been deleted");
        })
        $('#time1').parent().slideDown('slow');
        clearInterval(timer);
    }
}, 1000);

timer2= setInterval(function() {
    if (elapsed_seconds2 != 0){
        elapsed_seconds2 = elapsed_seconds2 - 1;
        $('#time2').text(get_elapsed_time_string(elapsed_seconds2))
    }else{
        $('#time2').parent().slideUp('slow', function(){
            $(this).find('.post').text("Post has been deleted");
        })
        $('#time2').parent().slideDown('slow');
        clearInterval(timer2);
    }
}, 1000);

timer3= setInterval(function() {
    if (elapsed_seconds3...