Senin, 04 September 2023

Progress Bars HTML CSS

Progress Bars

Progress Bars (1)

Progress Bars (2)

Progress Bars (3)

Progress Bars (4)

Reset

HTML

CSS

Javascript

* {
  box-sizing: border-box;
}
#Group {
  background: #333;
  text-align: center;
  color: #eee;
  font-family: system-ui, sans-serif;
  padding: 10px 0;
}
.PB {
  box-sizing: content-box;
  height: 20px; /* Can be anything */
  position: relative;
  margin: 20px; /* Just for demo spacing */
  background: #555;
  border-radius: 25px;
  padding: 10px;
  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}
.PB span {
  display: block;
  height: 100%;
  width: 0;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: rgb(43, 194, 83);
  background-image: linear-gradient(
    center bottom,
    rgb(43, 194, 83) 37%,
    rgb(84, 240, 84) 69%
  );
  box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3),
    inset 0 -2px 6px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
  text-align: left;
  color: #000;
}
.PB span:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
  z-index: 1;
  background-size: 50px 50px;
  animation: move 2s linear infinite;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden;
}
.Judul {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.orange span {
  background-image: linear-gradient(#f1a165, #f36d0a);
}

.red span {
  background-image: linear-gradient(#f0a3a3, #f42323);
}

.blue span {
  background-image: linear-gradient(#8080ff, #1a1aff);
}
.noanimate span,
.noanimate span::after {
  background-image: none;
}

@keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}

.Btns {
  display: inline-block;
  border: 1px solid white ;
  padding: 10px 20px;
  margin: 5px;
  font weight: 800;
  cursor: pointer;
}
.Btns:hover {
  background-color: #f1f1f1;
  color: #000;
}
.Btns:active {
  box-shadow: 0 0 10px yellow;
  background-color: transparent;
  border-color: yellow;
  color: lime;
}

Silahkan share untuk menambah manfaat.

Semoga bermanfaat,

Minggu, 03 September 2023

Internet IP Address, Time (Javascript, JQuery)

Your IP Address from ipinfo :

Your IP Address from API ipify :

Your time from Timezone :

Your time from IP :

HTML

Javascript

Silahkan share untuk menambah manfaat.

Semoga bermanfaat,

Time Life, Countdown, Stopwatch (HTML, JQuery, Javascript)

Hari

Tanggal

Jam

HTML

Javascript

<!DOCTYPE html>
<html lang="id">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
    p {
        text-align: center;
        font-size: 3em;
        margin: 0;
    }
    div {margin-bottom: 8px;}
    input, select, button {margin: 0 8px; padding: 2px 4px;}
    option {padding: 2px 4px;}
</style>
</head>
<body>
    <div>
        <p>Hari <span id="tampilanhari"></span></p>
        <p>Tanggal <span id="tampilantgl"></span></p>
        <p>Jam <span id="tampilanjam"></span></p>
    </div>
    <div>
        <select id="Pilih">
            <option value="0" selected hidden></option>
            <option value="1">Menit</option>
            <option value="2">Jam</option>
            <option value="3">Hari</option>
        </select>
        <input type="number" id="Nmr">
        <button id="btn1">RUN</button>
    </div>
    <div><p id="demo1"></p></div>
    <div>
        <input type="date" id="Tgl">
        <input type="time" id="Jam">
        <button id="btn2">RUN</button>
    </div>
    <div><p id="demo2"></p></div>
    <div>
        <button id="btnStart">Start</button>
        <button id="btnStop">Stop</button>
        <button id="btnReset">Reset</button>
    </div>
    <div><p id="demo3"></p></div>
</body>
</html>

const nmbulan = ["Januari", "Februari", "Maret", "April", "Mai", "Juni", "Juli", "Augustus", "September", "Oktober", "Nopember", "Desember"]; 
    const nmhari = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jum\'at", "Sabtu"];
    function LifeTime(){
        var waktu = new Date();

var jam = waktu.getHours() + "";
        var menit = waktu.getMinutes() + "";
        var detik = waktu.getSeconds() + "";
        $("#tampilanjam").html((jam.length==1?"0"+jam:jam) + ":" + (menit.length==1?"0"+menit:menit) + ":" + (detik.length==1?"0"+detik:detik));

var tgl = waktu.getDate() + "";
        var bulan = nmbulan[waktu.getMonth()];
        var tahun = waktu.getFullYear() + "";
        $("#tampilantgl").html((tgl.length==1?"0"+tgl:tgl) + " " + bulan + " " + tahun);

var hari = nmhari[waktu.getDay()];
        $("#tampilanhari").html(hari);

setTimeout(LifeTime, 1000);
    }
    $(document).ready(function(){
        LifeTime();
    });

var Sisa, x, y ;
    $('#btn1').click(function(){
        var Nmr = parseInt(document.getElementById("Nmr").value) || 0 ;
        var Pilih = parseInt(document.getElementById("Pilih").value) || 0 ;

if (Nmr <1 || Pilih <1) return ;

switch(Pilih) {
            case 1:
                Sisa = Nmr*60*1000;
                break;
            case 2:
                Sisa = Nmr*60*60*1000;
                break;
            case 3:
                Sisa = Nmr*24*60*60*1000;
        }

clearInterval(x);
        x = setInterval(function() {
            var now = new Date().getTime();
            Sisa -= 1000;
            var D = Math.floor(Sisa / (1000 * 60 * 60 * 24));
            var H = Math.floor((Sisa % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var M = Math.floor((Sisa % (1000 * 60 * 60)) / (1000 * 60));
            var S = Math.floor((Sisa % (1000 * 60)) / 1000);

$("#demo1").html((D==0?"":D+ "h ") + (H==0?"":(H<10?"0"+H:H)+ "j ") + (M==0?"":(M<10?"0"+M:M)+ "m ")  + (S<10?"0"+S:S) + "d");

if (Sisa < 0) {
                clearInterval(x);
                $("#demo1").html("EXPIRED");
            }
        }, 1000);
    });

$('#btn2').click(function(){
        var Tgl = document.getElementById("Tgl").value ;
        var Jam = document.getElementById("Jam").value ;

if (Nmr.length <1 || Jam.length <1) return ;
        var Akhir = new Date(Tgl+"T"+Jam).getTime();

clearInterval(y);
        y = setInterval(function() {
            var Skrg = new Date().getTime();
            var Sisa2 = Akhir - Skrg;
            
            var D = Math.floor(Sisa2 / (1000 * 60 * 60 * 24));
            var H = Math.floor((Sisa2 % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var M = Math.floor((Sisa2 % (1000 * 60 * 60)) / (1000 * 60));
            var S = Math.floor((Sisa2 % (1000 * 60)) / 1000);

$("#demo2").html((D==0?"":D+ "h ") + (H==0?"":(H<10?"0"+H:H)+ "j ") + (M==0?"":(M<10?"0"+M:M)+ "m ")  + (S<10?"0"+S:S) + "d");
            if (Sisa2 < 0) {
                clearInterval(y);
                $("#demo2").html("EXPIRED");
            }
        }, 1000);
    })

var [ milseconds, seconds, minutes, hours, days ] = [0,59,58,23,0];
    var display = $('#demo3');
    var stopwatch = null;

const start = $('#btnStart');
    const pause = $('#btnStop');
    const reset = $('#btnReset');

start.click(function() {
        if(stopwatch!==null){
            clearInterval(stopwatch);
        }
        stopwatch = setInterval(startButton, 10);
    })

pause.click(function() {
        clearInterval(stopwatch);
    })

reset.click(function() {
        [ seconds, minutes, hours, days ] = [0, 0, 0, 0]
        display.html('00 : 00 : 00 : 00 : 00');
        clearInterval(stopwatch)
    })

function startButton(){
        milseconds +=1;
        if (milseconds == 100) {
            milseconds = 0;
            seconds++;

if(seconds == 60){
                seconds = 0;
                minutes++;
        
                if(minutes == 60){
                    minutes = 0;
                    hours++;
                    
                    if (hours == 24){
                        hours = 0;
                        days++;
                    }
                }
            }
        }

var d = days < 10 ? "0" + days : days ;
        var h = hours < 10 ? "0" + hours : hours ;
        var m = minutes < 10 ? "0" + minutes : minutes ;
        var s = seconds < 10 ? "0" + seconds : seconds ;
        var ms = milseconds < 10 ? "0" + milseconds : milseconds ;

display.html( d +' : '+ h +' : '+ m +' : '+ s +' : '+ ms);
    }

Silahkan share untuk menambah manfaat.

Learn on my own

Senin, 04 September 2023

Progress Bars HTML CSS

Progress Bars

Semoga bermanfaat,

Minggu, 03 September 2023

Internet IP Address, Time (Javascript, JQuery)

Semoga bermanfaat,

Time Life, Countdown, Stopwatch (HTML, JQuery, Javascript)

Semoga bermanfaat,

Baru Tayang