The countdown functionality can easily be added to HTML code, you do need to set the expiry time and add some jquery code to your project.
<div id="countdown"> <div id="days"></div> <div id="hours"></div> <div id="minutes"></div> <div id="seconds"></div> </div> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
function counterTime() {
var endTime = new Date("10 June 2023 12:00:00 GMT+05:30");
endTime = (Date.parse(endTime) / 1000);
var now = new Date();
now = (Date.parse(now) / 1000);
var timeLeft = endTime - now;
var days = Math.floor(timeLeft / 86400);
var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
if (hours < "10") { hours = "0" + hours; }
if (minutes < "10") { minutes = "0" + minutes; }
if (seconds < "10") { seconds = "0" + seconds; }
if(days >= 0 && hours >= 0 && minutes >= 0 && seconds >= 0){
$("#days").html(days + "<span>Days</span>");
$("#hours").html(hours + "<span>Hours</span>");
$("#minutes").html(minutes + "<span>Minutes</span>");
$("#seconds").html(seconds + "<span>Seconds</span>");
}else{
$("#countdown").html('Expired');
}
}
setInterval(function() { counterTime(); }, 1000);
#countdown{
display: flex;
font-family: 'Poppins';
}
#countdown div{
margin: 0 7px;
font-size: 24px;
font-weight: bold;
}
#countdown span{
font-weight: normal;
font-size: 16px;
margin: 0 5px;
}
In this post, we find a difference between two dates in days
var timeStart= new Date(this.startDate).getTime();
var timeEnd = new Date(this.endDate).getTime();
var diff = timeEnd - timeStart; //in ms
var milliseconds = timeStart > timeEnd ? timeStart % timeEnd : timeEnd % timeStart;
var seconds = milliseconds / 1000;
var minutes = seconds / 60;
var hours = minutes / 60;
var days = hours / 24;
var weeks = days / 7;
var totalDays = Math.ceil(days);
this.result = totalDays + ' Days';
// console.log('Days',days.toFixed(2));
console.log('Total Days',totalDays);
<h1>Difference b/w two dates in days</h1>
<p>Start Date - <b>{{startDate}}</b></p>
<p>End Date - <b>{{endDate}}</b></p>
<p>Result - <b>{{result}}</b></p>
StackBiltz working example here Open StackBiltz
In ngx-datatable we show our data to the datatable link this [rows]=”rows”, what you need to do is filter out the objects you don’t want to be in the datatable, something like this in your TypeScript file
filterDataList: any; const case1= 'Aryan'; const case2= 'Maurya'; this.filterDataList = this.rows.filter(row => case1.includes(row.first_name)); this.filterDataList = this.rows.filter(row => !case2.includes(row.last_name));
<ngx-datatable
[rows]="filterRewardDataList"
>
<ngx-datatable-column
name="Sr. No"
headerClass="no-sorting text-center"
prop="srNum"
[sortable]="false"
>
<ng-template let-value="value" ngx-datatable-cell-template>
<div class="text-center">{{ value }}</div>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
name="First Name"
prop="first_name"
>
<ng-template let-value="value" ngx-datatable-cell-template>
<div class="text-center text-wrap">
{{ value }}
</div>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
name="Last Name"
prop="last_name"
>
<ng-template let-value="value" ngx-datatable-cell-template>
<div class="text-center text-wrap">
{{ value }}
</div>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
The jQuery siblings() method is used to get the sibling elements of the selected element.
The following example will highlight the siblings of the <li> element by adding the class .active on document ready.
In the initial step, you need to load the latest version of jQuery into your file.
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <ul> <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li> <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li> <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li> <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li> <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li> </ul>
ul li{
cursor: pointer;
background: #008f8d;
list-style: none;
margin-bottom: 15px;
padding: 7px 15px;
}
.active{
background: black;
color: white;
}
Finally, we will write down our jquery code.
$(document).ready(function(){
$('li').click( function(){
$(this).toggleClass('active').siblings().removeClass('active');
});
});
Today we are going to create a Countdown timer that shows minutes & Seconds.
In the initial step, you need to load the latest version of jQuery into your file.
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
Now the important step to create the HMTL markup. Let’s create a div with a class name countdown. Remember, we will use this class in jQuery.
<div class="countdown"></div>
Finally, we will write down our jquery code.
<script type="text/javascript">
var timer2 = "02:00";
var interval = setInterval(function() {
var timer = timer2.split(':');
//by parsing integer, I avoid all extra string processing
var minutes = parseInt(timer[0], 10);
var seconds = parseInt(timer[1], 10);
--seconds;
minutes = (seconds < 0) ? --minutes : minutes;
if (minutes < 0) clearInterval(interval);
seconds = (seconds < 0) ? 59 : seconds;
seconds = (seconds < 10) ? '0' + seconds : seconds;
//minutes = (minutes < 10) ? minutes : minutes;
$('.countdown').html(minutes + ':' + seconds);
timer2 = minutes + ':' + seconds;
}, 1000);
</script>