Skip to content

Instantly share code, notes, and snippets.

@ryanbekabe

ryanbekabe/jalur_pendaftaran.html

Created May 4, 2023 01:22
Show Gist options
  • Save ryanbekabe/b3bea14c8a6d68396e89299953fa632e to your computer and use it in GitHub Desktop.
Save ryanbekabe/b3bea14c8a6d68396e89299953fa632e to your computer and use it in GitHub Desktop.
Download ZIP
Akan menampilkan DIV dengan ID selesai yang status displaynya none jika video YouTubenya sudah selesai ditonton sampai selesai di halaman web min1kotapky_com/ppdb-pendaftaran 2023
Raw
jalur_pendaftaran.html
<html>
<div id="selesai" style="display:block;">
<h1 class="text-center" style="font-family: Cambria;"><b>PILIH JALUR PENDAFTARAN</b></h1>
<div class="row">
<div class="col-md-4">
<a href="http://ppdbmin.com/jalur_afirmasi/beranda/69726697">
<div class="box box-solid" style="border-radius: 5px;">
<div class="box-body text-center" style="border-radius: 5px;padding: 30px;background: #37991e;">
<img src="https://min1kotapky.com/asset/dist/img/logo_afirmasi.png">
<h2 style="font-family: Britannic;color: white;margin: 0px 0px 0px 0px;">JALUR<br>AFIRMASI</h2>
</div>
</div>
</a>
</div>
<div class="col-md-4">
<a href="http://ppdbmin.com/jalur_kemenag/beranda/69726697">
<div class="box box-solid" style="border-radius: 5px;">
<div class="box-body text-center" style="border-radius: 5px;padding: 30px;background: #37991e;">
<img src="https://min1kotapky.com/asset/dist/img/logo_kemenag.png">
<h2 style="font-family: Britannic;color: white;margin: 0px 0px 0px 0px;">JALUR<br>KEMENAG</h2>
</div>
</div>
</a>
</div>
<div class="col-md-4">
<a href="http://ppdbmin.com/jalur_umum/beranda/69726697">
<div class="box box-solid" style="border-radius: 5px;">
<div class="box-body text-center" style="border-radius: 5px;padding: 30px;background: #37991e;">
<img src="https://min1kotapky.com/asset/dist/img/logo_umum.png">
<h2 style="font-family: Britannic;color: white;margin: 0px 0px 0px 0px;">JALUR<br>UMUM</h2>
</div>
</div>
</a>
</div>
</div>
</div>
</html>
Raw
tampilkan_divID_setelah_selesai_nonton_video_youtube.js
<script>
var durasi = '540';
var c = 0;
var t;
var timer_is_on = 0;
function timedCount() {
document.getElementById("txt").value = c;
c = c + 1;
t = setTimeout(timedCount, 1000);
}
var tag = document.createElement('script');
tag.id = 'iframe-demo';
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('existing-iframe-example', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
document.getElementById('existing-iframe-example').style.borderColor = '#FF6D00';
}
function changeBorderColor(playerStatus) {
var color;
if (playerStatus == -1) {
color = "#37474F"; // unstarted = gray
} else if (playerStatus == 0) {
clearTimeout(t);
timer_is_on = 0;
if (c >= durasi) {
var mulai_selesai = document.getElementById("mulai");
mulai_selesai.style.display= "none";
var selesai = document.getElementById("selesai");
if (selesai.style.display === "none") {
selesai.style.display = "block";
} else {
selesai.style.display = "none";
}
} else {
$("#distop").modal("show");
}
color = "#FFFF00"; // ended = yellow
} else if (playerStatus == 1) {
if (!timer_is_on) {
timer_is_on = 1;
timedCount();
}
color = "#33691E"; // playing = green
} else if (playerStatus == 2) {
clearTimeout(t);
timer_is_on = 0;
color = "#DD2C00"; // paused = red
} else if (playerStatus == 3) {
clearTimeout(t);
timer_is_on = 0;
color = "#AA00FF"; // buffering = purple
} else if (playerStatus == 5) {
color = "#FF6DOO"; // video cued = orange
}
if (color) {
document.getElementById('existing-iframe-example').style.borderColor = color;
}
}
function onPlayerStateChange(event) {
changeBorderColor(event.data);
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment