stopWatch
and add the following code to the respective files.<template>
<div class="slds-card slds-p-around_medium">
<h2 class="slds-m-bottom_medium heading">Stop watch</h2>
<div class="timer">{timer}</div>
<div class="slds-p-around_medium">
<lightning-button-group>
<lightning-button variant="success" label="Start" onclick={actionHandler}></lightning-button>
<lightning-button variant="destructive" label="Stop" onclick={actionHandler}></lightning-button>
<lightning-button variant="brand" label="Reset" onclick={actionHandler}></lightning-button>
</lightning-button-group>
</div>
</div>
</template>
stopWatch.html
we are creating the card component and within the card with have heading, timer and button groupsimport { LightningElement } from 'lwc';
export default class StopWatch extends LightningElement {
timer = '0'
timerRef
actionHandler(event){
const {label} = event.target
if(label === 'Start'){
this.setTimer()
}
if(label === 'Stop'){
window.clearInterval(this.timerRef)
window.localStorage.removeItem('startTimer')
}
if(label === 'Reset'){
this.timer='0'
window.clearInterval(this.timerRef)
window.localStorage.removeItem('startTimer')
}
}
StartTimerHandler(){
const startTime = new Date()
window.localStorage.setItem('startTimer', startTime)
return startTime
}
setTimer(){
const startTime = new Date( window.localStorage.getItem("startTimer") || this.StartTimerHandler())
this.timerRef = window.setInterval(()=>{
const secsDiff = new Date().getTime() - startTime.getTime()
this.timer = this.secondToHms(Math.floor(secsDiff/1000))
}, 1000)
}
secondToHms(d){
d = Number(d)
const h = Math.floor(d / 3600);
const m = Math.floor(d % 3600 / 60);
const s = Math.floor(d % 3600 % 60);
const hDisplay = h > 0 ? h + (h == 1 ? " hour, " : " hours, ") : "";
const mDisplay = m > 0 ? m + (m == 1 ? " minute, " : " minutes, ") : "";
const sDisplay = s > 0 ? s + (s == 1 ? " second" : " seconds") : "";
return hDisplay + mDisplay + sDisplay;
}
connectedCallback(){
if(window.localStorage.getItem("startTimer")){
this.setTimer()
}
}
}
stopWatch.js
, we are using StartTimerHandler
method to generate the latest Date time and storing that timestamp to localstorage with key startTimer
setTimer
method gets called on click of the start button which will check if any time is already available in localstorage or not and run the timer which will called every second.secondToHms
convert second to hours and minutes and return the string in the proper readable format.connectedCallback
is used to make sure on tab change and coming back to component checking timer is running or not if yes trigger the setTimer
method<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
</targets>
</LightningComponentBundle>
stopWatch.css
file in the component folder and Add the following style to stopWatch.css file to styling..heading{
font-size: 30px;
color: #295646;
font-weight: 700;
}
.timer{
font-size: 30px;
padding:0 1rem;
}
Now place your component to the record page. You will see the following output