hide links on click after perform the task for some seconds in javascript/jquery
Here is list of links , what we want is when
> some user click on any link lets suppose 2,
> it will open the video in new tab and , ask user to view the video for some seconds may be 50, 80 defined in code
> when user obey the rule in main tab, link of 2 become hidden and user need to watch next video
- 2 https://www.youtube.com/watch?v=SEh9sKCh_wA
- 3 https://www.youtube.com/watch?v=63xpryMp_sY
- 4 https://www.youtube.com/watch?v=l1mwO8Qv8wo
- 5 https://www.youtube.com/watch?v=l1mwO8Qv8wo
HERE IS CODE:
<ul class="list-group li_container">
<div id="info"></div>
<li data-id="0">
<span class="badge badge-info">
1
</span>
<p data-link="https://www.youtube.com/watch?v=vVHxPi5ckXQ" data-id="0" class="list-group-item">
https://www.youtube.com/watch?v=vVHxPi5ckXQ </p>
</li>
<li data-id="1">
<span class="badge badge-info">
2
</span>
<p data-link="https://www.youtube.com/watch?v=SEh9sKCh_wA" data-id="1" class="list-group-item">
https://www.youtube.com/watch?v=SEh9sKCh_wA </p>
</li>
<li data-id="2">
<span class="badge badge-info">
3
</span>
<p data-link="https://www.youtube.com/watch?v=63xpryMp_sY" data-id="2" class="list-group-item">
https://www.youtube.com/watch?v=63xpryMp_sY </p>
</li>
<li data-id="3">
<span class="badge badge-info">
4
</span>
<p data-link="https://www.youtube.com/watch?v=l1mwO8Qv8wo" data-id="3" class="list-group-item">
https://www.youtube.com/watch?v=l1mwO8Qv8wo </p>
</li>
<li data-id="4">
<span class="badge badge-info">
5
</span>
<p data-link="https://www.youtube.com/watch?v=l1mwO8Qv8wo" data-id="4" class="list-group-item">
https://www.youtube.com/watch?v=l1mwO8Qv8wo
</p>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
function pushValueToList(value) {
let hiddenList = JSON.parse(localStorage.getItem('hiddenList')) || [];
if (!hiddenList.includes(value)) {
hiddenList.push(value);
localStorage.setItem('hiddenList', JSON.stringify(hiddenList));
}
}
function makeValuesHidden(){
let hiddenList = JSON.parse(localStorage.getItem('hiddenList')) || [];
console.log(hiddenList);
hiddenList.forEach((value) => {
let elementsToHide = document.querySelectorAll(`li[data-id="${value}"]`);
elementsToHide.forEach((el) => {
el.style.display = 'none';
});
});
/********check if li and session length is equal then show withdraw*********/
if(Object.keys(hiddenList).length==$('.li_container li').length){
$(".withdrawl_div").show();
$(".ads_div").hide();
}
}
function check_date(){
var dateinsession = localStorage.getItem("dateis");
if(dateinsession==null){
localStorage.setItem('dateis', getCurrentDate())
}
}
function getCurrentDate() {
let dateObj = new Date();
let month = String(dateObj.getMonth() + 1).padStart(2, '0');
let day = String(dateObj.getDate()).padStart(2, '0');
let year = dateObj.getFullYear();
let output = day + '-' + month + '-' + year;
return output;
}
check_date();
/*************************************/
$(document).ready(function(){
makeValuesHidden();
});
$(".list-group-item").click(function(){
var idis = $(this).attr('data-id');
var link = $(this).attr('data-link');
console.log(idis);
viewAd(link,3,idis)
});
function viewAd(url,timeris,name) {
let ad;
let timer = timeris+1;
let btn = document.getElementById('info');
// let closeAlert = document.getElementById('closeAlert');
let adsUrl = "?google.com";
ad = window.open(url);
let checker = setInterval(function(){
timer--;
if(timer >= 0) {
if(ad.closed) {
btn.innerHTML = "View Ad again, Not got success";
document.title = "View Ad again";
btn.disabled = false;
clearInterval(checker);
} else {
document.title = timer+ " Seconds Remaining";
btn.innerHTML = timer+ " Seconds Remaining";
}
}else if(timer >= -3) {
document.title = " Validating Ad";
btn.innerHTML = " Validating Ad";
}else if(timer == -4) {
btn.innerHTML = " Redirecting you";
document.title = " Redirecting you";
clearInterval(checker);
pushValueToList(name);
setTimeout(function(){
window.location.reload();
}, 1000);
}
}, 1000);
}
</script>