create a timer tool wordpress website

To create a timer tool on your WordPress website that allows you to set a timer and receive a notification when the time is up, you can follow these steps:

Create a new WordPretemplatess page : Create a new PHP file in your WordPress theme folder and name it something like timer-template.php. Add the following code to create the template:

phpCopy code

<?php

/*

Template Name: Timer Template

*/

get_header();

?>

<div id=“primary” class=”content–area“>
<main id=”main” class=”site–main” role=”main“>
<div id=”timer–container“>
<input type=”number” id=”timer–input” placeholder=”Enter time in minutes“>
<button id=”start–timer“>Start Timer</button>
<div id=”timer–notification“></div>
</div>
</main>
</div><script>
document.getElementById(‘start–timer‘).addEventListener(‘click‘, function () {
var input = document.getElementById(‘timer-input’);
var time = parseInt(input.value);

if (isNaN(time) || time <= 0) {
alert(‘Please enter a valid time in minutes.’);
return;
}

var timerInMilliseconds = time * 60000; // Convert minutes to milliseconds
var endTime = Date.now() + timerInMilliseconds;

var timer = setInterval(function () {
var remainingTime = endTime – Date.now();

if (remainingTime <= 0) {
clearInterval(timer);
document.getElementById(‘timer-notification’).innerHTML = ‘Time is up!’;
// Trigger notification sound or alert here
return;
}

var minutes = Math.floor(remainingTime / 60000);
var seconds = Math.floor((remainingTime % 60000) / 1000);

document.getElementById(‘timer-notification’).innerHTML = ‘Time Remaining: ‘ + minutes + ‘ minutes ‘ + seconds + ‘ seconds’;
}, 1000);
});
</script>

<?php
get_footer();
?>

Create a WordPress page using the Timer Template: In your WordPress admin dashboard, create a new page and select the “Timer Template” as the template for this page.
Customize the notification sound or alert: In the JavaScript code, where it says “// Trigger notification sound or alert here,” you can customize this part to play a sound or display an alert when the timer reaches zero. You can use HTML5 audio tags to play a sound or use JavaScript’s alert() function to display an alert.
Save the changes and test the timer: Save the changes to the template file and view the newly created page on your WordPress website. Enter the desired time in minutes and click the “Start Timer” button. The timer will start counting down, and when it reaches zero, it will display the “Time is up!” message and trigger the notification sound or alert you have defined.

Remember to customize the styling of the timer and notification elements using CSS to match your website’s design.

Leave a Comment Cancel reply