Html Time Tracking Template with Bootstrap Css3 and jQuery
Hello creative designers in this tutorial i will share HTML time tracking template. We will design a single page html time tracking system without any plugin. We will use HTML CSS3 Bootstrap and jQuery for creating time tracking html template. For designing HTML tracking template we nedd to follow the bellow steps. Let's see the HTML tracking template output first:
Output:
Step 1: HTML Markup:
Bellow is the html code. We also use bootstrap and jquery cdn link for better design.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Tracking Html Template with Bootstrap Css3 and jQuery - WebJourney</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="timeTracker-area pat-100 pab-100 section-bg-2">
<div class="container">
<div class="timeTracker-wrapper">
<div class="timeTracker-item">
<div class="timeTracker-box">
<h2 id="time" class="timeTracker-box-title text-center" title="DD:HH:MM:SS">00:00:00</h2>
<div class="timeTracker-box-flex mt-4">
<div class="timeTracker-box-single">
<span id="start" class="timeTracker-box-play"></span>
<span id="pause" class="timeTracker-box-pause"></span>
</div>
</div>
</div>
<div class="timeTracker-item-contents text-center">
<h4 class="timeTracker-item-contents-title">Amazing UX/UI/Product Designer</h4>
<div class="timeTracker-item-contents-flex mt-3">
<span class="timeTracker-item-contents-para">This week: <strong>23 hrs / 40hrs</strong></span>
<span class="timeTracker-item-contents-para">Client: <strong>Cameron Williamson</strong></span>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</body>
</html>
Step 2: CSS Markup:
Bellow is the css code. Just link the css code to html code.
/* Time Tracker Css */
.section-bg-2 {
background-color: #f5f5f5;
}
.pat-100 {
padding-top: 100px;
}
.pab {
padding-bottom: 100px;
}
.timeTracker-wrapper {
max-width: 630px;
margin-inline: auto;
border: 1px solid #ddd;
border-radius: 10px;
overflow: hidden;
}
.timeTracker-item-contents {
padding: 30px 20px;
}
.timeTracker-item-contents-para strong {
font-weight: 600;
color: var(--heading-color);
}
.timeTracker-box {
background-color: #6176f6;
padding: 30px 20px;
}
.timeTracker-box-title {
font-size: 48px;
font-weight: 600;
color: #fff;
display: block;
font-family: var(--heading-font);
}
.timeTracker-box-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 15px 20px;
}
.timeTracker-box-single {
position: relative;
}
.timeTracker-box-stop::before {
content: "";
position: absolute;
height: 40px;
width: 40px;
left: 25px;
top: 25px;
background-color: #fff;
border-radius: 10px;
}
.timeTracker-box-stop {
display: none;
}
.timeTracker-box-stop.active {
display: block;
}
.timeTracker-box-pause {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 90px;
width: 90px;
background-color: #fff;
border-radius: 50%;
position: relative;
cursor: pointer;
}
.timeTracker-box-pause::before, .timeTracker-box-pause::after {
content: "";
position: absolute;
left: 35%;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
height: 42px;
width: 7px;
background-color: #6176f6;
border-radius: 10px;
}
.timeTracker-box-pause:after {
left: auto;
right: 35%;
}
.timeTracker-box-pause, .timeTracker-box-play {
position: absolute;
left: 0%;
top: 0;
}
.timeTracker-box-play {
position: relative;
z-index: 9;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 90px;
width: 90px;
background-color: #fff;
border-radius: 50%;
position: relative;
cursor: pointer;
}
.timeTracker-box-play::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-40%, -50%);
transform: translate(-40%, -50%);
width: 0;
height: 0;
border-top: 20px solid transparent;
border-left: 40px solid #6176f6;
border-bottom: 20px solid transparent;
border-radius: 5px;
background-color: unset;
}
Step 3: JS Markup:
Here is the required jQuery code for html time tracking template. You must add this code in the html code.
<script>
(function($) {
"use strict";
let elTime = document.querySelector("#time"),
elStart = document.querySelector("#start"),
elPause = document.querySelector("#pause"),
elStop = document.querySelector("#stop");
// VALUES
let timeArr = [0, 0, 0],
timeStr = '00:00:00',
timer;
// STATE
let STATE = 'new';
if (elStart != null) {
elStart.addEventListener('click', function() {
if (STATE === 'play') {
return false;
}
STATE = 'play';
timer = setInterval(function() {
timeArr = getTime();
incrSeconds();
setTime();
}, 1000);
glowButton();
document.querySelector('#stop').classList.add('active');
});
}
if (elPause != null) {
elPause.addEventListener('click', function() {
STATE = 'pause';
clearInterval(timer);
glowButton();
});
}
if (elStop != null) {
elStop.addEventListener('click', function() {
STATE = 'stop';
clearInterval(timer);
elTime.textContent = timeStr;
glowButton();
});
}
function getTime() {
let str = elTime.textContent,
frmtRgx = /(?:\d{2}:)?\d{2}:\d{2}:\d{2}/;
str = frmtRgx.test(str) ? str : timeStr;
let arr = str.split(':'),
len = arr.length;
for (let i = 0; i < len; i++) {
arr[i] = parseInt(arr[i]);
}
return arr;
}
function setTime() {
let tmpArr = pad(timeArr.slice(0));
elTime.textContent = tmpArr.join(':');
function pad(tmpArr) {
for (let i = 0; i < tmpArr.length; i++) {
tmpArr[i] = String(tmpArr[i]);
if (tmpArr[i].length < 2) {
tmpArr[i] = '0' + tmpArr[i];
}
}
return tmpArr;
}
}
function incrSeconds() {
let secIndex = timeArr.length - 1;
timeArr[secIndex]++;
if (timeArr[secIndex] >= 60) {
timeArr[secIndex] = 0;
incrMinutes();
}
}
function incrMinutes() {
let minIndex = timeArr.length - 2;
timeArr[minIndex]++;
if (timeArr[minIndex] >= 60) {
timeArr[minIndex] = 0;
incrHours();
}
}
function incrHours() {
let hrIndex = timeArr.length - 3;
timeArr[hrIndex]++;
if (timeArr[hrIndex] >= 24) {
timeArr[hrIndex] = 0;
incrDay();
}
}
function incrDay() {
if (timeArr.length < 4) {
timeArr.unshift(0);
}
timeArr[0]++;
}
function glowButton() {
elStart.classList.remove('active');
elPause.classList.remove('active');
if (STATE === 'play') {
elStart.classList.add('active');
} else {
if (STATE === 'pause') {
elPause.classList.add('active');
}
}
}
})(jQuery);
</script>
Hope this will help you. Using this template you can make a tracking system in yourapplication. Thanks,
If you like what you are reading, please think about buying us a coffee as a token of appreciation.
We appreciate your support and are committed to providing you useful and informative content.
We are thankful for your ongoing support
You May Also Like:
How to setup jQuery with Laravel 10 and vite - WebJourney
Realtime Check Password and Confirm Password is Match or not in jQuery Javascript
jQuery Javascript Dynamic Slug Generate - WebJourney
Dynamic Dependent Dropdown Laravel 10 jQuery Ajax(Category SubCategory)