Creating a Stylish Countdown Timer using [Html- CSS -JavaScript ] II Buffoon Sachin
Introduction:
Countdown timers are useful tools for various applications, from setting reminders to creating interactive experiences on websites. In this blog post, we'll explore how to create a sleek countdown timer using the power of HTML, CSS, and JavaScript. Follow along as we break down each step of the process, from setting up the basic structure to adding interactivity and styling. At last code is given .
Step 1: Setting Up the HTML Structure
Start by creating the HTML structure for the countdown timer. We'll need elements for displaying the timer itself, as well as input fields for setting the countdown duration.
Step 2: Styling with CSS
Enhance the visual appeal of the countdown timer by adding CSS styles. We'll use modern design principles to create a sleek and stylish appearance, ensuring that the timer looks great on any device.
Step 3: Adding Functionality with JavaScript
Implement the functionality of the countdown timer using JavaScript. This involves capturing user input, calculating the remaining time, and updating the display dynamically as the countdown progresses.
Step 4: Testing and Refinement
Test the countdown timer thoroughly to ensure that it functions as expected. Make any necessary adjustments or refinements to improve the user experience and address any issues that arise.
By following this step-by-step guide, you've learned how to create a sleek countdown timer using HTML, CSS, and JavaScript. Whether you're building a personal project or adding a countdown feature to your website, this tutorial provides a solid foundation for creating an attractive and functional timer. Experiment with different styles and features to customize the timer to suit your needs, and have fun incorporating it into your projects!
You can use the below code to do so just copy and paste it ..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown Timer</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
background-color: black;
color: white;
overflow: hidden;
}
.timer-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.timer {
font-size: 12vw; /* Adjusted font size */
text-align: center;
background-color: #222;
border-radius: 10px;
padding: 10px; /* Adjusted padding */
box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); /* Adjusted shadow size */
width: 90%;
max-width: 800px;
}
.input-group {
width: 100%;
max-width: 800px;
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.input-group.hidden {
display: none;
}
.input-group input {
width: 80px;
padding: 15px;
text-align: center;
margin: 0 10px;
font-size: 1.5em;
}
.input-group button {
padding: 15px 30px;
cursor: pointer;
background-color: #4CAF50;
border: none;
color: white;
border-radius: 5px;
text-transform: uppercase;
font-size: 1.2em;
}
.input-group button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="timer-container">
<h1>Countdown Timer</h1>
<div class="timer" id="time">00:00:00</div>
<div class="input-group" id="input-group">
<input type="number" id="hours" placeholder="Hrs">
<input type="number" id="minutes" placeholder="Mins">
<input type="number" id="seconds" placeholder="Secs">
<button onclick="startTimer()">Start</button>
</div>
</div>
<script>
let countdown;
let timerStarted = false;
function startTimer() {
if (timerStarted) return;
const hours = parseInt(document.getElementById('hours').value) || 0;
const minutes = parseInt(document.getElementById('minutes').value) || 0;
const seconds = parseInt(document.getElementById('seconds').value) || 0;
// Add 2 seconds to the total time
const totalTime = ((hours * 3600) + (minutes * 60) + seconds + 2) * 1000; // Convert to milliseconds
if (totalTime <= 0) {
alert("Please enter a valid time.");
return;
}
const endTime = new Date().getTime() + totalTime;
countdown = setInterval(() => {
const now = new Date().getTime();
const timeLeft = endTime - now;
if (timeLeft < 0) {
clearInterval(countdown);
document.getElementById('time').textContent = '00:00:00';
alert('Time\'s up!');
document.getElementById('input-group').classList.remove('hidden');
timerStarted = false;
return;
}
const hoursLeft = Math.floor(timeLeft / (1000 * 60 * 60));
const minutesLeft = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
const secondsLeft = Math.floor((timeLeft % (1000 * 60)) / 1000);
const timeString = `${hoursLeft.toString().padStart(2, '0')}:${minutesLeft.toString().padStart(2, '0')}:${secondsLeft.toString().padStart(2, '0')}`;
document.getElementById('time').textContent = timeString;
}, 1000);
document.getElementById('input-group').classList.add('hidden');
timerStarted = true;
}
</script>
</body>
</html>
If you have any doubt feel free to ask .
Thanks.
Comments
Post a Comment
Feel free to share your love or query