Calculate the sum of hours worked in a day using pure JavaScript, no external libraries required

Question

Calculate the sum of hours worked in a day using pure JavaScript, no external libraries required

Hello, I'm new to this website and please excuse me if my English is not perfect, I am trying my best to communicate :)
I have been working on a page that calculates the total hours worked in a day and this is what I have achieved so far until 15/06/17. You can view it on this page.
note: The language used on my page is Italian, I apologize for any inconvenience.

giorno = day

The issue I am facing is with solving the function of the button named "Calcola". Here is the code snippet: (since I am unable to write code here, please refer to the code on "my page" using Google tools)

The problem is specifically within this section:

function differenza()  
{       
       issue...   
}

I hope this explanation has been clear, once again I apologize for my English as I am still learning.

javascript css html

Answer 1

Answer №1

@masterNixe has done it! Check out this amazing result and please Give it a try

It's a slightly different approach compared to your example, @masterNixe, but thank you :D
Here is the link to my page if you want to test it out
If anyone finds a bug, feel free to let me know

<script>
    function calculateTotalDifference() {
        var i;
        for (i = 1; i < document.getElementById("tabella").rows.length; i++) {
            differenzaRiga(i);
        }
    }

    function differenzaRiga(i) {

        var result = firstCheck(i);
        if (result == false){
            return false;
        }

        /* calculation */
        var exitMinutes = result.exitMinutes;
        var entryMinutes = result.entryMinutes;
        var breakMinutes = result.breakMinutes;

        var totalDifferenceInMin = exitMinutes - entryMinutes - breakMinutes;
        var hoursDone = Math.floor(totalDifferenceInMin / 60);
        var minutesDone = totalDifferenceInMin % 60;

        document.getElementById("Giorno" + i + "Totale").value = (pad(hoursDone) + ":" + pad(minutesDone));
    }

    function pad(n) { 
        return (n < 10) ? ("0" + n) : n;
    }
    document.getElementById('body').onkeypress = function (e) {
        if (!e) e = window.event;
        var keyCode = e.keyCode || e.which;

        if (keyCode == '13') {
            calculateTotalDifference();
        }
    }

    function firstCheck(i) {
        // logic for checking values before calculations
    }

</script>

Answer 2

@masterNixe has done it! Check out this amazing result and please Give it a try

It's a slightly different approach compared to your example, @masterNixe, but thank you :D
Here is the link to my page if you want to test it out
If anyone finds a bug, feel free to let me know

<script>
    function calculateTotalDifference() {
        var i;
        for (i = 1; i < document.getElementById("tabella").rows.length; i++) {
            differenzaRiga(i);
        }
    }

    function differenzaRiga(i) {

        var result = firstCheck(i);
        if (result == false){
            return false;
        }

        /* calculation */
        var exitMinutes = result.exitMinutes;
        var entryMinutes = result.entryMinutes;
        var breakMinutes = result.breakMinutes;

        var totalDifferenceInMin = exitMinutes - entryMinutes - breakMinutes;
        var hoursDone = Math.floor(totalDifferenceInMin / 60);
        var minutesDone = totalDifferenceInMin % 60;

        document.getElementById("Giorno" + i + "Totale").value = (pad(hoursDone) + ":" + pad(minutesDone));
    }

    function pad(n) { 
        return (n < 10) ? ("0" + n) : n;
    }
    document.getElementById('body').onkeypress = function (e) {
        if (!e) e = window.event;
        var keyCode = e.keyCode || e.which;

        if (keyCode == '13') {
            calculateTotalDifference();
        }
    }

    function firstCheck(i) {
        // logic for checking values before calculations
    }

</script>

Calculate the sum of hours worked in a day using pure JavaScript, no external libraries required

Answer №1

Similar questions

Is it possible for (variable or {}) to function seamlessly across all web browsers when using Javascript

The functionality of @Output and custom events appears to be malfunctioning

Can we establish communication between the backend and frontend in React JS by utilizing localstorage?

Vue component failing to display data passed as props

Resetting the check status in html can be accomplished by using the checked

Generating a dynamic method for uploading multiple files

Display the printed outcome in a fresh window

Instructions for integrating AJAX into a PHP script

Tips for arranging divs in a row to switch to stacking when the screen size decreases

Is window.open exclusive to Firefox?

Adjust the color of an SVG icon depending on its 'liked' status

What is the process for implementing text box validation on a button click within a gridview in asp.net utilizing javascript?

What is the most effective way to incorporate the DOMContentloaded event listener into the document using nextJS?

Errors encountered in the ajax request, specifically 404 and 401 errors

Firestore information does not appear visible

Connect the Vue component to the Vue instance

Backgrounds filled by nested <li> elements inside another <li> element

Displaying HTML content from a Vuejs response within a Dialog box

use ajax to dynamically append a dropdown menu

How do I create a new JSON Object with only two properties by selecting from an existing JSON Object with four properties?