This example is to explain some of the essentials of Javascript in the LWC. Once you run it, you will get a more clear understanding of it. Primarily I thought of explaining Service components(helper in aura), Arrow functions , map, reduce, find, filter, promises with a basic calculator app.
Step 1: Create a Folder with the name calci and followed by calci.html,calci.js,calci.css.
Step 2: Create a file with math.js under the same folder.
The Below code is self-explanatory: converted the traditional Javascript to arrow functions.
/*
equivalent traditonal javascript code
export let add=function(x,y) {return x+y;}
export let sub=function(x,y) {return x-y;}
export let div=function(x,y) {return x%y;}
export let mul=function(x,y) {return x*y;} */
/*Converted to Arrow functions */
export let add=(x,y) => x+y;
export let sub=(x,y) => x-y;
export let div=(x,y) => x%y;
export let mul=(x,y) => x*y;
Step 3: copy below code in calci.html markup
<template>
First Number : <input onchange={handler} name="fn" /> <br/>
Second Number : <input onchange={handler} name="sn" /> <br/>
{finalnumber} <br/>
<div class="btn-group">
<button onclick={add}>Add</button>
<button onclick={sub}>Sub</button>
<button onclick={mul}>Mul</button>
<button onclick={div}>Div</button>
</div>
<br/>
<div class="btn-group">
<button onclick={find}>Find</button>
<button onclick={filter}>Filter</button>
<button onclick={map}>Map</button>
<button onclick={reduce}>Reduce</button>
<button onclick={promise}>Promise</button>
</div>
</template>
Step 4: copy below code in calci.js
import { LightningElement } from 'lwc';
import { add,sub,mul,div } from './math';
export default class Calci extends LightningElement {
fn;
sn;
finalnumber;
arry=[];
handler(event){
let nam=event.target.name;
if(nam==="fn"){
this.fn=event.target.value;
}
else if(nam==="sn"){
this.sn=event.target.value;
}
}
add(){
let x=`Additon of two numbers (${this.fn} nd ${this.sn}) is :`;
this.finalnumber='';
this.finalnumber=add(parseInt(this.fn),parseInt(this.sn));
this.arry.push(this.finalnumber);
this.finalnumber=x+this.finalnumber;
console.log("####this.arry######"+this.arry);
}
sub(){
let x=`Sub of two numbers (${this.fn} nd ${this.sn}) is :`;
this.finalnumber='';
this.finalnumber=sub(parseInt(this.fn),parseInt(this.sn));
this.arry.push(this.finalnumber);
this.finalnumber=x+this.finalnumber;
console.log("####this.arry######"+this.arry);
}
mul(){
let x=`Mul of two numbers (${this.fn} nd ${this.sn}) is :`;
this.finalnumber='';
this.finalnumber=mul(parseInt(this.fn),parseInt(this.sn));
this.arry.push(this.finalnumber);
this.finalnumber=x+this.finalnumber;
console.log("####this.arry######"+this.arry);
}
div(){
let x=`Div of two numbers (${this.fn} nd ${this.sn}) is :`;
this.finalnumber='';
this.finalnumber=div(parseInt(this.fn),parseInt(this.sn));
this.arry.push(this.finalnumber);
this.finalnumber=x+this.finalnumber;
console.log("####this.arry######"+this.arry);
}
find(){
console.log("####this.arry######"+this.arry);
if(this.arry){let elment=this.arry.find(result=>result>200);
console.log("####elment from find function######"+elment);
console.log("####elment typeof######"+typeof elment);
}
filter(){
if(this.arry){let elment=this.arry.filter(result=>result>200);console.log("####elment from filter function######"+elment);
console.log("####elment typeof######"+typeof elment);}
}
map(){
if(this.arry){let elment=this.arry.map(result=>result*10);
console.log("####elment from Map function######"+elment);
console.log("####elment typeof######"+typeof elment);
}}
reduce(){
if(this.arry){ let elment=this.arry.reduce((total,result)=>total+result);
console.log("####elment from Reduce function######"+elment);
console.log("####elment typeof######"+typeof elment);
}
promise(){
const URL = 'https://th-apex-http-callout.herokuapp.com/animals';
const getSessions = () => fetch(URL,{
mode: 'no-cors' // 'cors' by default
})
.then(response => {
if (!response.ok) {
throw new Error('No response from server');
}
return response.json();
})
.then(result => {
let sessions = result.data;
return sessions;
}).catch(err=>err
);
console.log("Promise explained: Data from server #########: "+JSON.stringify(getSessions()));
}
}
Step 5:copy below code in calci.css
.btn-group button {
background-color: #4CAF50; /* Green background */
border: 1px solid green; /* Green border */
color: white; /* White text */
padding: 10px 24px; /* Some padding */
cursor: pointer; /* Pointer/hand icon */
float: left; /* Float the buttons side by side */
}
.btn-group button:not(:last-child) {
border-right: none; /* Prevent double borders */
}
/* Clear floats (clearfix hack) */
.btn-group:after {
content: "";
clear: both;
display: table;
}
/* Add a background color on hover */
.btn-group button:hover {
background-color: #3e8e41;
}
And finally, place calci component in any of the container like aura application or in localhost. The output of the code looks as below.
Click on Add, sub, Mul and Div for basic arithmetic operations. Results of these operations stored in the array(arry) and on these array elements we performed map,find, filter and reduce functions(check in the browser console for the results) to explain how these important functions works.
Thanks
No comments:
Post a Comment