Sometimes, it’s the little things that make a web experience feel more human. A personalized greeting based on the time of day is a small touch that adds warmth and friendliness to a website — especially when paired with a sleek light/dark theme toggle. Let’s explore how you can build your own Greeting Page using HTML, CSS, and JavaScript.
🔧 What We’re Building
We’re creating a simple web app that:
-
Greets the user with “Good Morning,” “Good Afternoon,” or “Good Evening” based on the time of day.
-
Includes a theme toggle button that switches between light and dark mode.
-
Is easy to style, responsive, and beginner-friendly.
🧱 HTML Structure
We use semantic tags to build a clean layout:
-
A
h1element for the dynamic greeting -
A small paragraph for a warm welcome
-
A
buttonfor toggling between light and dark themes
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Greeting Page</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1 id="greeting">Hello!</h1>
<p>Welcome to your day 😊</p>
<button class="toggle-btn" onclick="toggleTheme()">Toggle Theme</button>
<script src="script.js"></script>
</body>
</html>
🎨 CSS Styling
The design uses CSS variables (--bg-color, --text-color, etc.) to easily switch between themes. When .dark-mode is added to the body, all the variables switch values—thanks to CSS custom properties.
This allows a smooth and elegant transition from day mode to night mode, enhancing readability and aesthetic appeal.
:root {
--bg-color: #ffffff;
--text-color: #222222;
--button-bg: #f0f0f0;
--button-text: #222222;
}
body.dark-mode {
--bg-color: #1e1e2f;
--text-color: #f9f9f9;
--button-bg: #333;
--button-text: #f9f9f9;
}
body {
margin: 0;
padding: 0;
background: var(--bg-color);
color: var(--text-color);
font-family: "Poppins", sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
transition: background 0.3s, color 0.3s;
}
h1 {
font-size: 3rem;
margin-bottom: 10px;
}
p {
font-size: 1.2rem;
margin-bottom: 30px;
}
.toggle-btn {
padding: 10px 20px;
background: var(--button-bg);
color: var(--button-text);
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 1rem;
transition: background 0.3s, color 0.3s;
}
🧠 JavaScript Logic
Two functions power the interactivity:
-
updateGreeting(): Checks the current hour and updates the greeting accordingly. -
toggleTheme(): Toggles the.dark-modeclass on thebody, which flips the theme.
Everything runs instantly on page load, and the user can switch themes anytime.
function updateGreeting() {
const greeting = document.getElementById("greeting");
const hour = new Date().getHours();
if (hour < 12) {
greeting.textContent = "Good Morning, Mitali!";
} else if (hour < 18) {
greeting.textContent = "Good Afternoon, Mitali!";
} else {
greeting.textContent = "Good Evening, Mitali!";
}
}
function toggleTheme() {
document.body.classList.toggle("dark-mode");
}
updateGreeting();
💡 Why This Project?
This greeting page is perfect for:
- Practicing time-based conditions (
if-else) - Exploring CSS variables for dynamic theming
- Adding a personalized touch to a portfolio or landing page
- 🚀 Final Thoughts
This greeting app is a fun and practical way to combine JavaScript logic, CSS theming, and DOM manipulation. It’s also easy to customize — you can add emojis, animations, or even fetch weather or name data to personalize it further.
Want to go one step further? Add local storage to remember the user’s preferred theme!
