Show Dynamic Greet Good Morning, Afternoon, Evening as per time in jQuery
Hello friends
Today we will learn how to show dynamic greetings Good Morning, Good Afternoon and Good Evening. This automated greet will show into user panel according to his local time. You can display dynamic greet anywhere you want.
To show dynamic greet we need a HTML markup and an a jQuery script. Just follow the bellow two steps:
Lets see the output first:
Step-1: HTML Markup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Greetings - WebJourney</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="dashboard-left-flex text-center mt-5">
<span class="date-text"></span>
<h2 class="heading-two fw-500 mt-2"></h2>
<h2 class="mt-2 fw-500"></h2>
</div>.
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</body>
</html>
Here we use class="date-test" for displaying user current date-time and class="heading-two" to show greet message
Step-2: JQuery Script
<script>
function greetings(){
let current_time = new Date();
let get_hours = current_time.getHours();
let string_return = "";
switch (true){
case get_hours >= 5 && get_hours < 12:
string_return = "Good Morning";
break;
case get_hours >= 12 && get_hours < 17:
string_return = "Good Afternoon";
break;
case get_hours >= 17 && get_hours <= 24 || (get_hours < 5):
string_return = "Good Evening";
break;
default:
return null;
}
return string_return;
}
$(document).ready(function (){
let dates = new Date();
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
let full_date = dates.toLocaleDateString('en-US',options);
let hour = dates.getHours();
let full_time = (hour > 12 ? hour - 12 : hour) + ":" + dates.getMinutes() + ":" + dates.getSeconds() + (hour > 12 ? " PM" : " AM");
$(".dashboard-left-flex .heading-two").text(greetings());
$(".dashboard-left-flex .date-text").text(full_date + " " + full_time);
setInterval(function (){
let dates = new Date();
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
let full_date = dates.toLocaleDateString('en-US',options);
let hour = dates.getHours();
let full_time = (hour > 12 ? hour - 12 : hour) + ":" + dates.getMinutes() + ":" + dates.getSeconds() + (hour > 12 ? " PM" : " AM");
$(".dashboard-left-flex .date-text").text(full_date + " " + full_time);
},1000);
})
</script>
This step we write jQuer code for showing current date-time and greet message. tha'ts all. Hope this will help you a lot.
If you like what you are reading, please think about buying us a coffee as a token of appreciation.
We appreciate your support and are committed to providing you useful and informative content.
We are thankful for your ongoing support
You May Also Like:
How to setup jQuery with Laravel 10 and vite - WebJourney
Realtime Check Password and Confirm Password is Match or not in jQuery Javascript
jQuery Javascript Dynamic Slug Generate - WebJourney
Dynamic Dependent Dropdown Laravel 10 jQuery Ajax(Category SubCategory)