Developer Snippet Diary

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

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>
Posted by: R GONDAL
Email: rizikmw@gmail.com