Tracking your daily nutrition using cronometer with the powerful combination of JavaScript

I'm currently developing a JavaScript cronometer in vueJS. I want the timer to start at 5 minutes (300 seconds) and then continue counting minutes and seconds.

Although my cronometer is functioning, I am struggling to get it to start counting minutes after reaching 300 seconds.

// Declaring variables for tracking time after the initial 5 minutes.
        let sec= 0, min = 0, hour = 0;

// Counting up to 5 minutes
    let startMin = 5*60, cronometro = 0;
cronometro = setInterval(function (){
                        if(cronometro >= startMin){
                            sec++;
                            if(sec == 60){
                                min++;
                                sec = 0;
                                if(min == 60){
                                    hour++;
                                    min = 0;
                                }
                            }
                        }
                        minutos.innerHTML = min
                    }, 1000);

Answer №1

Consider renaming the variable where you store seconds as it currently refers to minutes.

To achieve the desired trigger, implement a check within the minute-increment scenario by dividing the starting minutes by 60.

if(sec == 60){
  min++;
  if (minute == startMin/60) {
    // Add your desired actions here for when the time has passed
  }
  sec = 0;
  ...
}

Answer №2

Here is how I tackled this challenge:

timer = setInterval(function (){

                    secondsCounter = sec++;

                    if(secondsCounter == 300){
                        sec = 0;
                        minutes.innerHTML = 5;

                        if(sec == 60){
                            min++;
                            minutes.innerHTML = min;
                        }
                    }

                    

                    console.log(secondsCounter);

                }, 1000);

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

What could be causing this code to continuously loop without end?

I've been scratching my head trying to understand why this code isn't working. var refP = []; var calculateDistance = function (p1, p2) { return dist(p1.x, p1.y, p2.x, p2.y); } while (refP.length < 24) { var point = { x: -1, ...

Why is my model not being updated when selecting an option in Angular UI Select-UI?

I want to streamline the use of select-ui by creating a wrapper in a directive. This way, I can easily update the control in one place and avoid the hassle of scattering it all over my site. Despite building a wrapper, I'm facing an issue where the v ...

Can you please provide a detailed list of all the events that are compatible with the updateOn feature in Angular's ngModelOptions?

The reference documentation notes the following: updateOn: a string that specifies which event should be bound to the input. Multiple events can be set using a space delimited list. There is also a special 'default' event that aligns with the ...

Reach out to individuals who have responded to a message on Discord using JavaScript

I am looking to develop a script that will enable me to send direct messages to users who have reacted (all reactions) to a specific message by its ID. I want to exclude bots and ensure that each user only receives one message even if they react multiple ...

Utilizing a combination of HTML, AJAX, and PHP, transfer an HTML input array via AJAX to a PHP webpage

Despite trying numerous similar solutions, none of them have proven effective for my issue. Within a form, users can input an unspecified amount of select options that can be added as needed using AJAX. My goal is to post this array to a PHP page via AJAX ...

Substitute an item with another -JavaScript

While I understand this is a rather common question, my search through various sources has yielded answers that involve libraries, ES6, or methods not supported by native JavaScript. My goal is to simply replace one object with another based on a condition ...

What is the best way to automatically remove a Firebase database entry when a user has been inactive for a period of time, without logging out but simply not accessing the page for an extended duration?

Currently, when a user clicks 'logout', their session is terminated, and a database entry is removed. All other users can see that database entry, so the objective is for users to view each other's data only while they are logged in. For in ...

Is there a way to optimize Typescript compiler to avoid checking full classes and improve performance?

After experiencing slow Typescript compilation times, I decided to utilize generateTrace from https://github.com/microsoft/TypeScript/pull/40063 The trace revealed that a significant amount of time was spent comparing intricate classes with their subclass ...

Guide to showing an uploaded image in a child component using Vue.js

Using the v-file-input component from Vuetify, I am able to upload images with the following code: <v-file-input label="Image" filled accept="image/png, image/jpeg, image/bmp" prepend-icon="mdi-camera" v-mod ...

Acquire information from a VueJS component

Imagine having a template with another Vue component nested within: <template> <div> <custom-vue></custom-vue> </div> </template> Within my CustomVue script, the following is present: <script> ex ...

PHP - Extract Information from Table Upon Form Submission without User Input

I'm facing a challenge with my web form that includes a table allowing users to delete rows before submitting. Although there are no input fields in the table, I need to capture the data from these rows when the form is submitted. The issue is that th ...

What is the best way to display the panel during a postback?

I have a group with two radio buttons labeled purchase and expenses. When the purchase radio button is clicked, the panelpurchase will be displayed, and similarly, the panelexpense will show for the expenses radio button. Check out the image of the output ...

The fitBounds() method in Google Maps API V3 is extremely helpful for adjusting

I am trying to display a map on my website using this code: function initialize() { var myOptions = { center: new google.maps.LatLng(45.4555729, 9.169236), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP, panControl: true, mapTyp ...

When attempting to retrieve the innerHTML of a <div> element within a <Script> tag, the value returned is undefined

Utilizing a masterpage to create a consistent header across all content pages, I encountered an issue on one page. I needed to retrieve the innerHTML of a div element and pass it to an input control on the same page in order to access the updated innerHTML ...

Managing Emails with Vue and Firestore

I am facing an issue with updating the 'email' field. Whenever I try to change the email address, it gets updated correctly. However, when I attempt to log in again, the new email address does not work; only the old one seems to be functional. Ho ...

Material UI Card shadow effect getting cropped

Currently experiencing an uncommon issue while using Material UI's Card component - the box-shadow is cut off on the top and bottom sides. Any suggestions on how to resolve this problem? Check out my code below: import React, { Component } from & ...

Tips on incorporating personalized javascript functions into Durandal

I am currently working on my first project using the Durandal framework to create a basic website. I have encountered an issue while trying to incorporate a simple JavaScript function. My goal is to execute the function after the DOM has loaded, but I am u ...

Innovative idea for a time management system based on timelines and scheduling

My latest project involves creating a scrollable scheduler, inspired by vis-timeline and built using Vue.js. One of the main challenges I'm facing is achieving smooth infinite scrolling in all directions (past and future). I must confess that I&apo ...

Is it possible to impose a different style on an element from another culture?

I am currently developing a themes library along with a demo page. The challenge I'm facing is that the demo page needs to showcase styles from the library without using all of the elements. For instance, consider the following style in an external s ...

What is the best way to dynamically retrieve a URL and utilize it as a hyperlink using jQuery?

Is there a way to retrieve the current URL and use it as a link in jQuery? For example, if my browser is currently on page mysite.com/index.php?page=post&see=11, I would like to use this URL in my link and append /new/ after the domain name, like so: ...