JS Chronometer

Looking to make some changes or additions to this code snippet,

    function countdown( elementName, minutes, seconds )
    {
        var element, endTime, hours, mins, msLeft, time;

        function twoDigits( n )
        {
            return (n <= 9 ? "0" + n : n);
        }

        function updateTimer()
        {
            msLeft = endTime - (+new Date);
            if ( msLeft < 1000 ) {
                element.innerHTML = "Time's up!";
            } else {
                time = new Date( msLeft );
                hours = time.getUTCHours();
                mins = time.getUTCMinutes();
                element.innerHTML = (hours ? hours + ':' + twoDigits( mins ) : mins) + ':' + twoDigits( time.getUTCSeconds() );
                setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
            }
        }

        element = document.getElementById( elementName );
        endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500;
        updateTimer();
    }

    countdown( "countdown", 1, 5 );
  1. When the timer is running, prevent it from restarting if the page is refreshed.

  2. Prefer a pop-up message rather than displaying it in the HTML.

  3. After 5 seconds of the timer ending, redirect to a different page.

Not very knowledgeable about JavaScript so apologies for the tedious questions.

Answer №1

  1. store timer data in localstorage to prevent reset on page refresh
  2. display a popup message: window.alert("Hello, world!");
  3. redirect user to a different webpage: window.location.replace("http://example.com")

Answer №2

  1. you could potentially find it in an HTML format, such as: here
  2. document.location.href = "http://samplewebsite.com";

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Method to categorize content within a contentEditable div

I am currently working on creating a user input feature (contentEditable div) for a chat, allowing users to write messages and tag someone using the format hello @user32. I want the tagged username to be converted into a clickable link that is properly for ...

Is there a way to execute a function only once when the submit button is clicked in a jQuery AJAX form?

I am using Django to create a website where users can create groups. To allow users to fill in group information and upload an image as the group logo, I have implemented an HTML form. In order to preview the logo before submission, I have used AJAX to upl ...

dispatch a WebSocket message within a route using Express.js

The Objective: Imagine a bustling marketplace with multiple shops. I'm working on a dedicated page localhost:3000/livePurchases/:storeId for shop owners to receive real-time notifications whenever they make a new sale. https://i.stack.imgur.com/VdNz ...

Route all Express JS paths to a static maintenance page

Need help with setting up a static Under construction page for an Angular Web App with Express Node JS Backend. I have a function called initStaticPages that initializes all routes and have added a new Page served via /maintenance. However, when trying to ...

Discovering the presence of two values within a single object array with the power of JavaScript

My challenge involves handling an array containing flight details such as origin, destination, and ticket cost. I am attempting to display the specific flight details for a given origin-destination pair. For instance: if the user chooses Bangalore as the o ...

I'm struggling with creating animations for the bootstrap cards as a newbie. It seems quite complex for me. Can anyone provide guidance on how to achieve this

Explore this template for bootstrap cards here The provided link features a template for bootstrap cards with horizontal sliding animations. I attempted to incorporate only the card properties into my code but encountered issues where the cards overshadow ...

Generating a collection of model objects using Javascript

I want to generate a JavaScript list of my model. I am currently working on an ASP.NET MVC app The model 'testModel' looks like this: public string prop1{ get; set; } public string prop2{ get; set; } public string prop3{ get; set; } ...

Using a Firebase token repeatedly: simple steps to follow

I have integrated Firebase Web Notification using Firebase SDK. The implementation process involves two files: a) generate-token.js and b) firebase-messaging.sw.js To get access token, permission is requested by calling requestPermission function. Upon ...

Ways to display various components when a button is clicked

I need to dynamically load different components based on button clicks in my UI using React, but I am unsure of the best approach. In the past, I used a ternary operator for two components, but now I have more than two and that method no longer works for ...

Nesting / Mulled / JS - Uploading Files - Form's end is unexpectedly reached

I have successfully implemented the upload file functionality in my Nest.js server application, but I am facing an issue when trying to use it with JavaScript/React. @Post('upload') @UseInterceptors(FileInterceptor('file')) upl ...

Jquery is incapable of eliminating a div

I have a form where I am dynamically adding actions. Within a table, there are rows of positions that applicants have applied for. When users click on the offer position button, I want to insert offer fields for submission and updating. While I can success ...

Add a div dynamically to group and close it after 3 cards

Using bootstrap 4 and receiving data like the examples below from the backend. Is there a way to dynamically group every three items with <div class="row">...</div> for large screens (>992), and every two items for smaller screens. Data Rec ...

Can you help me troubleshoot an issue I am facing with the expand table in Angular 9 and JS? I am getting an

Here you can find the code demonstration and behavior: No extensive explanation is necessary. Check out the StackBlitz demo by clicking on the first row to view its details. Then, click on the second row to see how the details from the first row are repl ...

What's the best way to ensure a div's height and width are equal when implementing responsive design?

I am currently working on a responsive design and facing challenges in making div's height and width equal. Initially, I set the div's width as a percentage and height as auto, but this caused the divs to not display properly. To resolve this iss ...

What is the best approach to handle Flow types for component props and getDerivedStateFromProps when the props are not the same

Having a Component with its props, an additional prop is added for getDerivedStateFromProps. The issue arises when setting the props with the additional one, throwing an error that the prop is not being used. Conversely, setting it without the extra prop c ...

Creating PNG and JPEG image exports in Fabric.js with the help of Node.js

Exploring the wonders of Fabric.JS specifically designed for Node.JS, not intended for web applications, I've successfully created a Static Canvas and added a rectangle to it. Now, it's time to export the image. Take a look at my code snippet bel ...

Is it necessary to have two servers in order to operate an ext JS application using Node.js on the server side?

I recently began working with Node.js and have started using a sample application where the server-side was written in Node. I am currently developing and running my Ext JS application using Sencha Cmd on localhost:1841. At the same time, I have a server.j ...

Tips for resetting the lightgallery following an ajax request

I have integrated the lightgallery plugin into my website to showcase images when clicked. The initialization of the light gallery is done like this: $(document).ready(function(){ $('#lightgallery').lightGallery({ selector: '.it ...

What steps should I take to resolve the "undefined property match cannot be read" error that's showing up in this code?

Currently, I am facing an issue while attempting to integrate the nativescript-imagepicker plugin into my Nativescript App. I keep receiving an error message stating **cannot read **property match of undefined**. Below is a summary of the steps I have take ...

Connecting two sets of data from a mongoDB database using vue.js

Hey there, I'm a newcomer to vue and mongodb. I've set up two collections - one for storing user details and the other for business details. When a business registers through a form, their information is saved in mongodb. Now, I've created a ...