What is the process of converting the timing from my stopwatch to a standard time format?

I am currently working on a stopwatch project where I log the time into an array. However, when I try to use Math.min(array) or Math.max(array), it returns NaN (not a number). The time format for the stopwatch is like 00:00:15.91 which is not recognized as a valid number. Is there a way to work around this issue?

To simplify, I store times like "00:00:15.91" in an array and need to retrieve the largest and smallest numbers. Is there a solution for this in JavaScript without using any libraries?

Note: While I don't think sharing my code is necessary for this question, please let me know if you would like to see it.

else{
        let displayTime = displayHours + ":" + displayMinutes + ":" + displaySeconds + "." + displayMilliseconds;
        let intTime = displayHours + displayMinutes + displaySeconds + displayMilliseconds;
        let times = document.getElementById("times");
        window.clearInterval(interval);
        status = "stopped";

        if (status == "stopped") {
            times.innerHTML += displayTime + "<img src='https://img.icons8.com/windows/32/000000/xbox-x.png'/><br/>";
            allTimes.push(Number(intTime));

            if (allTimes.length == 0) {
                document.getElementById("bestTime").innerHTML = "none";
                document.getElementById("worstTime").innerHTML = "none";
                document.getElementById("average").innerHTML = "none";
                document.getElementById("stats").innerHTML = "none";

            }

            if (allTimes.length != 0) {
                document.getElementById("bestTime").innerHTML = Math.min(...allTimes);
            }

        }

    }

Edit: Added my code snippet

javascript

Answer №1

To identify the minimum and maximum values, one can compare string values in this scenario. Would it be essential to perform type conversion?

const list = ['00:00:23.90', '01:00:00.00', '00:00:23.89', '00:01:00.00']
list.sort()

const min = list(0)              // -> "00:00:23.89"
const max = list(list.length-1)  // -> "01:00:00.00"

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

The issue of jQuery not functioning properly within a Rails environment

Despite my efforts, I am still struggling to make jquery work in rails. I have installed the 'jquery-rails' gem and added the require statements in the application.js file. Below is a sample test page that I have been testing: <!DOCTYPE htm ...

javascriptjqueryruby-on-rails

A React component enclosed within a useCallback function

According to the React docs, to prevent a Child component from re-rendering in certain cases, you need to wrap it in useMemo and pass down functions in useCallback within the Parent component. However, I'm confused about the purpose of this implementa ...

javascriptreactjsreact-hooks

What is the best way to create a point within a mesh?

I have several meshes and I'd like to insert a point randomly within the confines of hexagon[0]. How can this be achieved? var Hexagon=new Array(); Hexagon[0] = new THREE.Mesh( HexagonExtrude[0],material[0] ); Hexagon[1] = new THREE.Mesh( HexagonExtr ...

javascriptthree.js

Having difficulty positioning the Divider correctly among Grid items

I am trying to add a Divider between each item in my Grid. The desired output should resemble this:- Col 1 | Col 2 | Col 3 However, I am facing difficulties as the Divider is not visible and the items are displayed vertically. import "./style ...

javascriptreactjsmaterial-ui

What is the best method for dynamically binding Tailwind classes in VueJS3/NuxtJS3?

Is there anyone who knows how to correctly bind the content Tailwind class dynamically in Vue.js 3/Nuxt.js 3? Let's say we have const isExpanded = true <h1 :class="{'after:content-[`:`]' : isExpanded}">Hello</h1> I att ...

javascriptvue.jsvuejs3tailwind-cssnuxt3.js

Tips for setting a default value in an input type file using JavaScript

While trying to upload a file from my local system to the server, I encountered an issue where the local path was not being set in the input type file field. As a result, I am unable to successfully upload the file. I would greatly appreciate any assistan ...

javajavascriptjspjquery

PHP Calculator - Displaying results in both the webpage and an Ajax popup for enhanced user experience

UPDATE - the issue was resolved by incorporating $('.popup-with-form').magnificPopup('open'); into the StateChanged function in the JavaScript. Many thanks to @Bollis for the assistance. The Initial Query: I have a basic calculator lo ...

javascriptajaxpopupmagnific-popup

IE 11 encountering issues with Date.parse returning NaN

Whenever I attempt to parse a date in Internet Explorer 11, it throws NaN at me. However, in Chrome and Firefox, I get the timestamp 1494559800000. Date.parse("5/12/2017 09:00 AM") The condition below is where things go wrong for me in IE 11. Is there an ...

javascriptinternet-explorer-11

Switch out the ajax data in the input field

Is there a way to update the value in a text box using Ajax? Below is my code snippet: <input type="text" id="category_name" name="category_name" value="<?php if(isset($compName)) { echo ucfirst($compName); ...

javascriptphpjqueryajax

What is the option for receiving automatic suggestions while formatting components in a react.js file?

When styling elements in our app using app.css or styles.css, VS Code provides auto-suggestions. For example, if we type just "back" for background color, it will suggest completions. However, this feature does not work in react.js or index.js. Why is that ...

javascripthtmlcssreactjs

Is there a way to retrieve the request URL within the validate function of the http strategy?

Is it possible to access the context object present in guards within the validate method of my bearer strategy, by passing it as an argument along with the token? bearer-auth.guard.ts: @Injectable() export class BearerAuthGuard extends AuthGuard('be ...

javascriptnode.jstypescriptpassport.jsnestjs

The POST function is executed twice, with the first attempt resulting in a failed API call, but the second attempt is

I am experiencing issues with my subscribe dialog, as it seems to be running the API call twice. The first time it fails, but on the second attempt, it succeeds and inserts the email into the database. This double run is causing errors in my AJAX function, ...

javascriptajaxnode.jsmailchimp

Guidelines for executing a Vue directive when the page is initially loaded

I am iterating through an array of objects containing map svg paths and locales, and I want to execute a function on load. The function needs to take the locale keys from the paths array as a parameter and perform some operation: <p v-for="(country ...

javascriptvue.jsvuejs3

Unused function in Vue error compilation

I am facing an issue with the compiler indicating that the function 'show' is defined but never used. The function show is being used in HTML like this: <b-card> <div id="draw-image-test"> <canvas id="can ...

javascriptvue.js

Using Node.js, Express.js, and Redis.io for efficient order processing

Currently, I am working on a project that involves Node.js with express.js and redis.io as the database. I have implemented a get resource with query parameters to retrieve the IDs of libraries containing a specific book. However, I am struggling to unders ...

javascriptnode.jsexpressredis

Is it possible to retrieve values from my model when working with Django Templates and incorporating them in the JavaScript header?

With Django, I have managed to successfully retrieve and display data from my model in the content section of the template. However, I am facing issues retrieving data from the model in the header section of the template. Below is the code --> view.py ...

javascriptpythonhtmldjango

Developing pagination functionality in ReactJS

I came across this piece of code in a forum (how to implement Pagination in reactJs): constructor() { super(); this.state = { todos: ['a','b','c','d','e','f','g','h ...

javascriptreactjspagination

Sort through the data that is already populated and proceed to paginate within Mongodb

Hey there, I'm currently working on populating some data and then implementing pagination for that data. Take a look at this example: Schema A (Users) { name: 'Demo', postId: 'someObjectId', } Schema B (Posts) { id: 's ...

javascriptmongodbmongoose

"Bringing in" ES6 for Node

I am interested in utilizing import from ES6 instead of require from common.js in Node. Surprisingly, I initially assumed that import would function automatically in Node. However, it appears that it does not. Is there a specific npm package that needs t ...

javascriptnode.jsecmascript-6

Updating data in a VueJS Single File Component

I'm finding myself in a bit of a maze when it comes to understanding how data functions within single file components for VueJS. For instance, in a file named test.vue, my understanding is that you would script something like this: export default { ...

javascriptvue.jsvuejs2vue-component