{"id":9160,"date":"2024-01-19T17:59:00","date_gmt":"2024-01-19T17:59:00","guid":{"rendered":"https:\/\/codehim.com\/?p=9160"},"modified":"2024-01-22T15:59:41","modified_gmt":"2024-01-22T10:59:41","slug":"javascript-timesheet-calculator","status":"publish","type":"post","link":"https:\/\/codehim.com\/others\/javascript-timesheet-calculator\/","title":{"rendered":"JavaScript Timesheet Calculator"},"content":{"rendered":"

This JavaScript Timesheet Calculator is a handy tool for tracking and calculating work hours. This code utilizes jQuery UI datepicker to allow you to select a specific date. It populates a table with columns for each day of the week, where you can input start and finish times, as well as break duration.<\/p>\n

The code calculates the hours worked for each day and updates a total hours worked for the week. This code is helpful for managing and calculating work hours efficiently.<\/p>\n

You can use this code on your website to easily track and calculate work hours for various tasks or projects. It simplifies time management by providing a user-friendly interface to input and calculate daily work hours<\/p>\n

How to Create a Timesheet Calculator Using JavaScript<\/h2>\n

1. First of all, load the Bootstrap CSS<\/a>, jQuery UI CSS, and jQuery timepicker CSS by adding the following CDN links into the head tag of your HTML document.<\/p>\n

<link rel='stylesheet' href='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.0.0-beta.2\/css\/bootstrap.css'>\r\n<link rel='stylesheet' href='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery-timepicker\/1.10.0\/jquery.timepicker.css'>\r\n<link rel='stylesheet' href='https:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.12.1\/themes\/smoothness\/jquery-ui.css'><\/pre>\n
2. Create an HTML structure that includes a date picker input and a table to display your timesheet.<\/p>\n
<div class=\"container text-center\">\r\n    <header>\r\n<!--       <h1>NTB<\/h1> -->\r\n      <h3>Timesheet entry<\/h3>\r\n    <\/header>\r\n    <main>\r\n      <form>\r\n        <div class=\"form-group row\">\r\n          <div class=\"col-2\"><\/div>\r\n        <label class=\"sr-only\" for=\"name\">Name<\/label>\r\n        <input type=\"text\" class=\"form-control mb-2 mr-sm-2 col-4\" id=\"name\" placeholder=\"name\">\r\n\r\n        <label class=\"sr-only\" for=\"datePicker\">Date<\/label>\r\n        <input type=\"text\" class=\"form-control mb-2 mr-sm-2 col-4\" id=\"datePicker\" placeholder=\"week commencing\">\r\n        <div class=\"col-2\"><\/div>        \r\n        <\/div>\r\n      <\/form>\r\n      <table class=\"table table-dark table-striped table-hover\">\r\n        <thead>\r\n          <tr>\r\n            <th>Day<\/th>\r\n            <th>Date<\/th>\r\n            <th>Start Time<\/th>\r\n            <th>Finish Time<\/th>\r\n            <th>Break<\/th>\r\n            <th>Hours Worked<\/th>\r\n          <\/tr>\r\n        <\/thead>\r\n        <tbody id=\"tBody\">\r\n        <\/tbody>\r\n      <\/table>\r\n      <div class=\"row bottom d-none\">\r\n        <div class=\"col\">\r\n          <button type=\"button\" id=\"submit\" class=\"btn btn-success\">Submit<\/button>\r\n        <\/div>\r\n        <div class=\"col\">\r\n          <h2 id=\"hoursWorkedText\" class=\"text-right\">Total Hours Worked: <span id=\"totalHours\">0<\/span><\/h2>\r\n        <\/div>\r\n      <\/div>\r\n    <\/main>\r\n    <footer>\r\n      <h6>Created with <span style=\"color:red\">&#10084;<\/span> by <a href=\"http:\/\/jncwebdev.co.uk\/\" target=\"_blank\">JNC<\/a><\/h6>\r\n    <\/footer>\r\n  <\/div>\r\n<\/pre>\n
3. Use the following CSS code to style the timesheet. You can modify the CSS rules to customize the timesheet interface according to your needs.<\/p>\n
html, body {\r\n  height: 100%;\r\n  background-color: #333;\r\n  color: #eee;\r\n}\r\n\r\n.time {\r\n  width: 80px;\r\n}\r\n\r\nfooter {\r\n  margin-top: 20px;\r\n}\r\nfooter a {\r\n  text-decoration: none;\r\n  color: #c0c0c0;\r\n}<\/pre>\n
3. Now, load the jQuery<\/a>, jQuery UI<\/a>, Bootstrap JS, and jQuery timepicker plugin JS<\/a> by including the following CDN links just before closing the body element.<\/p>\n
<script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js'><\/script>\r\n<script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jqueryui\/1.12.1\/jquery-ui.min.js'><\/script>\r\n<script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.0.0-beta\/js\/bootstrap.min.js'><\/script>\r\n<script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery-timepicker\/1.10.0\/jquery.timepicker.js'><\/script>\r\n<\/pre>\n
4. Finally, add the following JavaScript code between the <script><\/code> tag (or external js file) after the above CDN links. It handles the date picker and timesheet calculation functionalities.<\/p>\n
$(document).ready(function(){\r\n\r\n      const weekDays = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];\r\n\r\n      $('#datePicker').datepicker({ \/\/initiate JQueryUI datepicker\r\n        showAnim: 'fadeIn',\r\n        dateFormat: \"dd\/mm\/yy\",\r\n        firstDay: 1, \/\/first day is Monday\r\n        beforeShowDay: function(date) {\r\n          \/\/only allow Mondays to be selected\r\n          return [date.getDay() == 1,\"\"];\r\n        },\r\n        onSelect: populateDates\r\n      });\r\n\r\n      function populateDates() {\r\n        \r\n        $('#tBody').empty(); \/\/clear table\r\n        $('.bottom').removeClass('d-none'); \/\/display total hours worked\r\n        let chosenDate = $('#datePicker').datepicker('getDate'); \/\/get chosen date from datepicker\r\n        let newDate;\r\n        const monStartWeekDays = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'];\r\n        for(let i = 0; i < weekDays.length; i++) { \/\/iterate through each weekday\r\n          newDate = new Date(chosenDate); \/\/create date object\r\n          newDate.setDate(chosenDate.getDate() + i); \/\/increment set date\r\n          \/\/append results to table\r\n          $('#tBody').append( `\r\n          <tr>\r\n            <td class=\"day\">${weekDays[newDate.getDay()].slice(0,3)}<\/td>\r\n            <td class=\"date\">${newDate.getDate()} \/ ${newDate.getMonth() + 1} \/ ${newDate.getFullYear()}<\/td>\r\n            <td class=\"start-time\"><input id=\"startTime${monStartWeekDays[i]}\" class=\"time ui-timepicker-input\" type=\"text\" \/><\/td>\r\n            <td class=\"finish-time\"><input id=\"finishTime${monStartWeekDays[i]}\" class=\"time ui-timepicker-input\" type=\"text\" \/><\/td><\/td>\r\n            <td class=\"break\">\r\n              <select id=\"break${monStartWeekDays[i]}\">\r\n                <option value=\"0\">0<\/option>\r\n                <option value=\"0.5\">0.5<\/option>\r\n                <option value=\"1\">1<\/option>\r\n              <\/select>\r\n            <\/td>\r\n            <td class=\"hours-worked\" id=\"hoursWorked${monStartWeekDays[i]}\">\r\n              0\r\n            <\/td>\r\n          <\/tr>\r\n          ` );\r\n\r\n          \/\/function to calculate hours worked\r\n          let calculateHours = () => {\r\n            let startVal = $(`#startTime${monStartWeekDays[i]}`).val();\r\n            let finishVal = $(`#finishTime${monStartWeekDays[i]}`).val();\r\n            let startTime = new Date( `01\/01\/2007 ${startVal}` );\r\n            let finishTime = new Date( `01\/01\/2007 ${finishVal}` );\r\n            let breakTime = $(`#break${monStartWeekDays[i]}`).val();\r\n            let hoursWorked = (finishTime.getTime() - startTime.getTime()) \/ 1000;\r\n            hoursWorked \/= (60 * 60);\r\n            hoursWorked -= breakTime;\r\n\r\n            if (startVal && finishVal) { \/\/providing both start and finish times are set\r\n              if (hoursWorked >= 0) { \/\/if normal day shift\r\n                $(`#hoursWorked${monStartWeekDays[i]}`).html(hoursWorked);\r\n              } else { \/\/if night shift\r\n                $(`#hoursWorked${monStartWeekDays[i]}`).html(24 + hoursWorked);\r\n              }\r\n            }\r\n\r\n            updateTotal();\r\n          }\r\n          \/\/initiate function whenever an input value is changed\r\n          $(`#startTime${monStartWeekDays[i]}, #finishTime${monStartWeekDays[i]}, #break${monStartWeekDays[i]}`).on('change', calculateHours);\r\n\r\n        }\r\n        $('.start-time input').timepicker({ 'timeFormat': 'H:i', 'step': 15, 'scrollDefault': '09:00' });\r\n        $('.finish-time input').timepicker({ 'timeFormat': 'H:i', 'step': 15, 'scrollDefault': '17:00' });\r\n\r\n        function updateTotal() { \/\/function to update the total hours worked\r\n          let totalHoursWorked = 0;\r\n          let hrs = document.querySelectorAll('.hours-worked');\r\n          hrs.forEach(function(val) {\r\n            totalHoursWorked += Number(val.innerHTML);\r\n          });\r\n          document.querySelector('#totalHours').innerHTML = totalHoursWorked;\r\n        }\r\n        \r\n\r\n      }\r\n      \r\n\r\n    });<\/pre>\n
That’s all! hopefully, you have successfully created a Timesheet Calculator using HTML, CSS, and JavaScript. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This JavaScript Timesheet Calculator is a handy tool for tracking and calculating work hours. This code utilizes jQuery UI datepicker…<\/p>\n","protected":false},"author":1,"featured_media":9173,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[56],"tags":[216],"class_list":["post-9160","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-others","tag-calculator"],"acf":[],"yoast_head":"\nJavaScript Timesheet Calculator — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a JavaScript Timesheet Calculator. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/others\/javascript-timesheet-calculator\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Timesheet Calculator — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a JavaScript Timesheet Calculator. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/others\/javascript-timesheet-calculator\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-19T17:59:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T10:59:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Timesheet-Calculator.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/others\/javascript-timesheet-calculator\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/others\/javascript-timesheet-calculator\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"JavaScript Timesheet Calculator\",\"datePublished\":\"2024-01-19T17:59:00+00:00\",\"dateModified\":\"2024-01-22T10:59:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/others\/javascript-timesheet-calculator\/\"},\"wordCount\":278,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/others\/javascript-timesheet-calculator\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Timesheet-Calculator.png\",\"keywords\":[\"Calculator\"],\"articleSection\":[\"Others\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/others\/javascript-timesheet-calculator\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/others\/javascript-timesheet-calculator\/\",\"url\":\"https:\/\/codehim.com\/others\/javascript-timesheet-calculator\/\",\"name\":\"JavaScript Timesheet Calculator — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/others\/javascript-timesheet-calculator\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/others\/javascript-timesheet-calculator\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Timesheet-Calculator.png\",\"datePublished\":\"2024-01-19T17:59:00+00:00\",\"dateModified\":\"2024-01-22T10:59:41+00:00\",\"description\":\"Here is a free code snippet to create a JavaScript Timesheet Calculator. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/others\/javascript-timesheet-calculator\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/others\/javascript-timesheet-calculator\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/others\/javascript-timesheet-calculator\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Timesheet-Calculator.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Timesheet-Calculator.png\",\"width\":1280,\"height\":960,\"caption\":\"JavaScript Timesheet Calculator\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/others\/javascript-timesheet-calculator\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Others\",\"item\":\"https:\/\/codehim.com\/category\/others\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript Timesheet Calculator\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Timesheet Calculator — CodeHim","description":"Here is a free code snippet to create a JavaScript Timesheet Calculator. You can view demo and download the source code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/others\/javascript-timesheet-calculator\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Timesheet Calculator — CodeHim","og_description":"Here is a free code snippet to create a JavaScript Timesheet Calculator. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/others\/javascript-timesheet-calculator\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-19T17:59:00+00:00","article_modified_time":"2024-01-22T10:59:41+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Timesheet-Calculator.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/others\/javascript-timesheet-calculator\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/others\/javascript-timesheet-calculator\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"JavaScript Timesheet Calculator","datePublished":"2024-01-19T17:59:00+00:00","dateModified":"2024-01-22T10:59:41+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/others\/javascript-timesheet-calculator\/"},"wordCount":278,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/others\/javascript-timesheet-calculator\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Timesheet-Calculator.png","keywords":["Calculator"],"articleSection":["Others"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/others\/javascript-timesheet-calculator\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/others\/javascript-timesheet-calculator\/","url":"https:\/\/codehim.com\/others\/javascript-timesheet-calculator\/","name":"JavaScript Timesheet Calculator — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/others\/javascript-timesheet-calculator\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/others\/javascript-timesheet-calculator\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Timesheet-Calculator.png","datePublished":"2024-01-19T17:59:00+00:00","dateModified":"2024-01-22T10:59:41+00:00","description":"Here is a free code snippet to create a JavaScript Timesheet Calculator. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/others\/javascript-timesheet-calculator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/others\/javascript-timesheet-calculator\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/others\/javascript-timesheet-calculator\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Timesheet-Calculator.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Timesheet-Calculator.png","width":1280,"height":960,"caption":"JavaScript Timesheet Calculator"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/others\/javascript-timesheet-calculator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Others","item":"https:\/\/codehim.com\/category\/others\/"},{"@type":"ListItem","position":3,"name":"JavaScript Timesheet Calculator"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":1989,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9160","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=9160"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9160\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/9173"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=9160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=9160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=9160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}