Create Your First Lightning Web Component – Stopwatch App

Reading Time: 2 minutes

Create Your First Lightning Web Component – Stopwatch App.jpg

Create a basic Lightning Web Component
Deploy to Scratch Org

In this Unit, we will be creating a simple stopwatch app and will be deploying it to scratch org.

Screenshot 2018-12-28 at 4.23.50 AM

Note: This app will give you the idea about Lightning Web Components. This unit will not cover the detailed explanation of the Lightning Web Components. We will cover those parts in the next units.

App Description:
Stopwatch app will have two buttons to make the app.
Start/Stop: These buttons will start the timer and stop the timer.
Reset: This button will reset the timer value.

Create Lightning Web Component Bundle:
1. Open Visual Studio Code.
2. Press Command+Shift+P (Mac), Ctrl+Shift+P( Windows)
3. Here type SFDX: Create Lightning Web Component
4. It will ask for the desired directory, Just press enter
5. Give the name to your Lightning Web Component as Stopwatch and press enter.
6. This will create a folder structure for the stopwatch.

Screenshot 2018-12-28 at 3.09.33 AM.png

Copy the below code and put in the respected files.

Deploy the Code to Scratch Org:
Open Visual Studio Code’s Integrated Terminal.
Type below command and hit the enter.
sfdx force:source:push

You will see the result like this:

Screenshot 2018-12-28 at 4.27.58 AM

Add Lightning Web Component to Lightning Home Layout:
1. Open any app in lightning and go to the home tab.
2. Click on Gear Icon (Top-Right) and then click on Edit Page.
3. Here in the left side, Scroll down to Custom section.
4. Drag Stopwatch component to the home layout.
5. Click on Save and Activate.
6. After successful activation. Go back to the Home tab.

Screenshot 2018-12-28 at 4.29.21 AM

Nice, You have just created a stopwatch in lightning Web component.

In next units, We will learn about lightning Web component in a little bit deep.

Read more blogs on Lightning Web Components here

One thought on “Create Your First Lightning Web Component – Stopwatch App

  • June 10, 2021 at 8:41 am

    I used this code to create a stop watch, the watching is working very well but if i leave the tab then the stopwatch does not seem to run continuously, how can i solve this problem


Leave a Reply