I developed a Stopwatch feature and now I am looking to showcase the lap times on my HTML page in a layout with 4 columns and 4 rows when the lap

Looking for a way to showcase the laps from your stopwatch in your HTML page? You're in luck! I have a solution that will display the laps in 4 columns.

To see the complete code, check out this link: https://jsfiddle.net/waqasumer/agru2bdL/

Index.html

        <div class="row" id="laps">
        </div>

Js

var min = 0;
var sec = 0;
var msec = 0;

var getMin = document.getElementById("min");
var getSec = document.getElementById("sec");
var getmsec = document.getElementById("msec");
var interval;

function timer() {
    msec++
    getmsec.innerHTML = msec;

    if (msec >= 100) {
        sec++;
        if (sec <= 9) {
            getSec.innerHTML = "0" + sec;
        } else {
            getSec.innerHTML = sec;
        }
        msec = 0;

    } else if (sec >= 60) {
        min++;

        if (min <= 9) {
            getMin.innerHTML = "0" + min;
        } else {
            getMin.innerHTML = min;
        }
        sec = 0;
    }
}

function lapTimer() {
    var Laps = document.getElementById('laps');
    Laps.innerHTML += "<div>" + " " + getMin.innerHTML + ":" + getSec.innerHTML + ":" + getmsec.innerHTML + "</div>";
}

´´´


Answer №1

In my opinion, the following code provides a common solution:

#laps > div {
  width: 25%;
  float: left;
}

By using this code, the laps will be arranged in 4 columns before moving on to a new line once all 4 columns are filled.

This solution should meet the specified criteria if I have interpreted it correctly.

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

Issue with opening image modal when clicking on images, JavaScript seems to be malfunctioning

I created a gallery of modal images that I want to open when clicked, but for some reason it's not working as expected. What I'm trying to achieve is passing the image ID of each image to JavaScript when they are clicked so that the script can th ...

Are there CSS styles that target specific elements?

My goal is to design a unique and custom theme for blender.stackexchange. However, I am facing an issue where the rules I implement only affect certain tags when viewed in FF 29.0.1 Despite all tag elements having the same classes, parent elements, etc., ...

Deciphering the Cause of mapStateToPropsCall in Redux and React

When handling an unsuccessful http call resulting in an error message being displayed, I encounter subsequent state changes triggering multiple render calls. Is there a technique to identify the cause of these state changes and mapStateToProps calls? Alter ...

What could be causing my POST route to be missing in my MERN stack application?

I'm encountering two issues with a MERN stack application: i) Despite the POST route working, Axios fails to send form body data to the server. MongoDB only displays default field values after each submission. ii) The POST route was operational init ...

Content obscured by a div element

I've created a cloud using HTML/CSS and I'm struggling to position some text in the center of it. Unfortunately, I can't get it to overlap the cloud divs properly. #cloud { height: 230px; margin: 40px; position: relative; ...

Revising the input value by updating the properties

After clicking on the Reset link, I encounter an issue where the input value fails to update properly. class DiscountEditor extends Component { render() { <div className="inline field"> <a className="ui reset" onClick={thi ...

Avoiding the backslash in JavaScript

<script type="text/javascript"> console.log(#Fileurl#); jQuery.ajax({ url: "http://xyz:8800/aaa/bbb/ccc", type:'POST', dataType: 'JSON', data:{"file":"#Fileurl#"}, success: function ...

Is it possible to dynamically alter a CSS property using styled components when an onClick event occurs?

Hey there, I'm pretty new to React and currently exploring styled components for the CSS styling of my components. One of the components I've created is a button called SummonButton: const SummonButton = styled.button` height: 50px; borde ...

Error: An undefined property 'spirit' is being accessed causing a TypeError. To fix this issue, simply refresh the page to successfully read the property

const QueueItem = (props) => { let spirit = props.drink.spirit ? ( <div> {props.drink.spiritquantity} | {props.drink.spirit} </div> ) : ( <div> No Spirit </div> ); let liqueur = props.drink.liqueur ? ( ...

Can WikiData be accessed by providing a random pageId?

My current project involves creating a Wikipedia Search App with a 'Feel Lucky' button. I have been trying to figure out if it's possible to send a request for Wikidata using a specific pageid, similar to the code below: async function lucky ...

Using Ajax to submit two forms by clicking a submit button

Explanation : In this particular scenario, I am facing a challenge where I need to trigger another Ajax function upon successful data retrieval, but unfortunately, I am encountering some unknown obstacles. Code: ---HTML Form : <form accept-charset=" ...

Using async/await in React to retrieve data after a form submission

I am currently facing an issue with displaying data fetched from an API on the screen. My goal is to retrieve data when a user types something in a form and clicks the submit button. The error message I am encountering is: TypeError: Cannot read propert ...

Modify the appearance of every instance of a specific phrase

Looking to give my site title a unique font separate from the rest of the content every time it appears in a heading. This is all for branding purposes. Let's say my custom font is Courier and my company goes by the name SparklePony. For example, if t ...

I've experimented with binary tree examples and received the output in object form. Now, I'm wondering how I can extract the values from this object and convert them into

Issue Description A tree with N nodes rooted at 1 is given to you. Each node in the tree has a special number Se associated with it. Additionally, each node has a certain Power. The power of each node in the tree is defined as the count of heavy nodes in t ...

Is there a way to trigger a Python script from a webpage using a function?

As someone who is new to html and webpages, particularly coming from an embedded engineering background, I have been tasked with automating certain processes that require a python script to run on a Raspberry Pi upon clicking a button on the webpage. I ha ...

scrolling malfunction

I encountered a problem with the scroll feature in this image: The problem is that I only want the vertical scroll to show up, not the horizontal scroll. I tried using the overflow:scroll attribute in my code. Will it display the same in Firefox and IE, o ...

Inheriting static functions

In my Node.js project, I have created a few classes as Controllers for handling routes. I would like these classes to work on a singleton basis, although it's not mandatory. Main Controller class class RouteController { static getInstance() { ...

Fetching server-side data for isomorphic React app: A guide to accessing cookies

Currently, I am in the process of developing an isomorphic/universal React + Redux + Express application. The method I use for server-side data fetching is quite standard: I identify the routes that match the URL, call the appropriate data-fetching functio ...

What could be the reason behind the success of my API call in Chrome while encountering failure when implemented in my

I'm attempting to access the Binance API in order to obtain the current price of Litecoin (LTC) in Bitcoin (BTC). For this purpose, I have tested the following URL on my web browser: "https://api.binance.com/api/v1/ticker/price?symbol=LTCBTC". Now, I ...

Gather a linear array of deeply nested information

Below is a dictionary: var objectSchemasList = { 1: [ { name: 'list_field1_1', uuid: 'uuid1', fieldObjectSchemaId: 2 }, { name: 'list_field1_2', uuid: 'uuid2', f ...