Simple Calculator Using LWC.

Simple Calculator Using LWC.

Did you know? The Aura programming model and the Lightning web component coexist while providing unmatched performance. It is very helpful for: Increasing output: use contemporary web language features including decorators, templates, shadow DOM, and custom elements. Enhanced Performance: The code is executed by the web browser for a lightning-fast experience. 

In this article we will discuss about constructing a simple calculator using LWC. But before we do so, Let’s start by discussing LWC (Lightning  Web Component). 

What is LWC (Lightning Web Component)?

Before LWC, We used this Aura which had many drawbacks and limitations and used to be comparatively not too effective compared to the market Web standard, and that’s why Salesforce had to bring LWC. So LWC is a modern framework and is built up with lightning, it’s lightweight, and it’s speedy execution and implementation. LWC  is very easy for the customer and the client. Taking the great benefit of javascript, using the HTML language makes Salesforce more approachable for non-Salesforce people. This also saves developers time, and we can build some significant projects in a very short time and produce some of the essential tasks.

Let me explain to you how we create a Simple Calculator using LWC.

       1. First, we open Visual Studio code and create a new project with a manifest. 

       2. Second, we open the Command palette, and you can click ctrl+shift+p to open the command palette or go to the view tab and then click the command palette.

 

      3. Then select SFDX: Create a project with manifest.

      4. Then select the Standard project template.

      5. Then enter the Project name.

 

       6. Create a new folder and click on Create project.

       7. Click>force-app arrow, and on the right, click on lwc.

 

          8. Select Create Lightning Web Component, or we can go the other way. Press the keys ctrl+shift+p, go to the command palette, then enter the desired file name.

         9. Then accept default force-app/main/default/lwc.

       10. You can see on the left side our file name, calsisimple. And there created a calsisimple.html file, calsisimple.js(javascript ) file, and calsisimple.js.meta.xml file.

        11. Then select the calsisimple.html file. In the HTML file, we can design our Calculator.HTML provides the structure for your component. 

       12. The template tag is a fundamental building block of a component’s HTML.


        13. Then we take the  <div> tag. (div tag defines a section in  an HTML document)

        14. Then we will create an input component. To generate the input component, we will go to the component library. So we will search on google  Salesforce Component library.

 

 

       15. And then, select the first one, the Salesforce Lightning component Library.

      16. You can search here in the quick-find box for different types of components. For example, we can search input components for input number data Search in a quick find box and select input. 


        17. Then, there are different types of examples. For example, what input do you want to write, whether you want a full text or a number, so we wish to number-type input?

       18. Then, different examples will be shown if we scroll down. 

 

 

        19. Like this, we can write our code as well. 

       20. So, let’s write our code in vs. studio code.

       21. Inside the template, we will use the first lightning card, and the title will be a simple calculator and close this lightning tag.

 

        22. We use a lightning layout item inside this lightning card, and we will see multiple rows.    And inside a lightning layout, we will create a lightning layout item, size 12, and padding  “around the medium.”


       23. Then we will create a lightning input tag, the type will be number, and the name will take num1, and we will take a labelEnter first Number,” then we add an onchange handler here and will call it as {handleNum1} if you want to take a placeholder as “ type here” then we close the lightning input tag.

       24. And the same steps 22 and 23 will follow for num2. 

      25. Then we will use the break tag <br/>. <br> tag will be used for the line break element.

      26. After this, we will create buttons. So we go ahead and use button  lightning -button, and a variant of the button will be “brand,” and the label of the button will be Addition. Same as Subtraction, Multiplication, and Division buttons. The title is not necessary. And onclick when we click on this button, there is going to be a handler or method we are going to say called, call a sub, call multi, called. Now we close this lightning button.

        27. We will also search the salesforce component library. Search on the quick find box, type their button, and we will see different types of control.

 

 

        28. And here are shown different types of buttons. We will choose a brand variant button.

        29. From here, we can copy the code as well.

        30. Now we also need to add Output or display output.

        31. We will write the result in the <div> tag. Whatever result will come, it will be shown here. We will write inside a bold tag <b>.

         32. Now, we need to provide all these handlers’ definitions so that we will open the calsisimple.js file.

         33. Inside the js file, first, we define the Result and two properties, N1 and N2.

        34. Then we will create handleNum1 and whatever the event is fired. We want to get their value, whatever the user enters in the input box, and we will store that value into this.N1. But the thing is, the value that comes is going to be a string so we will convert it into an integer value.

        35. Similarly rest of the  N2 (number 2).

        36. And now, we have to calculate Addition, Subtraction, Multiplication, and Division. So as we know, when we click on the button, this is called calladd, callsub, callmulti,calldiv (method or handler). So let’s go ahead and define the handler here.

        37. Inside the calladd method, we will calculate  

               this.Result = parseInt(this. N1)+parseInt(this.N2);

        38. Same as for the Multiplication, Subtraction, and Division method.


        39. The output would be displayed in this place.

        40. We need the next meta.xml file to update <isExposed> to true, and we will set the targets now.

(<targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

   </targets>)

        41. We are using this layout for the look and feel, and we have two input boxes: the first one is capture Number1, and the second one is capture Number2. So now go ahead first. Authorize an org.

       42. Press the Ctrl+shift+P to open the command palette and click  Authorize an org.

       43. Then select project default and then enter an org default. And then login to our org.

       44. Then again, we go back to the vs. studio code and will do SFDX: deploy Source to org. Right-click on calsisimple and select SFDX: deploy source to org.


       45. And then, finally, our deployment successfully ran.

       46. Then go back to the org. And search Lightning App Builder in the Quick Find box. Finally, use the UI  to create an app and your component.

       47. And select Lightning App builder.

       48. Click New. Select the APP page and click Next.

       49. Give it the label like  LWCTest and click Next. 

       50. Then select Three Regions and click Finish.

       51. Then click App Launcher and search for the LWCTest CMP app.

       52. And click the Gear icon and select the Edit page.

       53. Drag your Calculator component to the top of the page layout.

       54. Click save and click Activate.

       55. Keep Activated for all users selected.

       56. Click finish.

       57. Click Back in the upper left corner.


       58. And we will see our Simple calculator on the page.

        59. Then, test our calculator. Finally, let’s calculate the number.


        60. We can see our simple calculator successfully worked.

 

Spread the updates
October 18, 2022

Leave a reply