Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a project that displays time based dynamic greetings with javascript. To build this project, we need HTML, CSS and Javascript.
This project wishes the user based on what time of day it is. That is in 24 hr format, if the time is between 5 and 11, it wishes the user – “Good Morning”. If the time is between 12 and 5, it displays – “Good after”. For the remaining time after that, it wishes “Good evening”.
This is a beginner-friendly javascript project. If you are interested in more such tutorials to improve your javascript skills, you can check out this playlist here. This playlist consists of 90+ javascript projects. The difficulty of these projects varies from simple to quite complex. Hence these projects are suitable for javascript beginners as well as javascript experts.
Video Tutorial:
If you are interested in learning by watching a video tutorial rather than reading this blog post, you can check out the video down below. Also, subscribe to my youtube channel where I post new tutorials every alternate day.
Project Folder Structure:
Before we start coding, let us take a look at the project folder structure. We create a project folder called – “Dynamic Greetings”. Inside this folder, we have three files. These files are – index.html which is the HTML document. Next, we have style.css which is the stylesheet. And finally, we have script.js which is the script file.
HTML:
We begin with the HTML code. HTML creates the elements necessary to build the structure and layout of our project. First, copy the code below and paste it into your HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dynamic Greetings</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">DEMO TEXT</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style these elements using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #ae9cff;
}
.container {
font-size: 1.3em;
width: 25em;
background: linear-gradient(-240deg, #8468ff 70%, #785bf7 70%);
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
padding: 4.5em 1.3em;
border-radius: 0.4em;
box-shadow: 0 1.3em 1.8em rgba(94, 72, 181, 0.25);
}
.container h1 {
font-family: "Poppins", sans-serif;
text-align: center;
color: #ffffff;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 0.1em;
word-spacing: 0.4em;
}
Javascript:
We finally add functionality to our project. To do so we use Javascript. Now copy the code below and paste it into the script file.
let container = document.querySelector(".container");
let timeNow = new Date().getHours();
let greeting =
timeNow >= 5 && timeNow < 12
? "Good Morning"
: timeNow >= 12 && timeNow < 18
? "Good Afternoon"
: "Good evening";
container.innerHTML = `<h1>${greeting}</h1>`;
That’s it for this tutorial. Your time based dynamic greetings are now ready. If you face any issues while creating this code you can download the source code by clicking on the ‘Download Code’ button below. Also, I would love to hear from you guys, so if you have any queries, suggestions or feedback comment below.
Happy Coding!
