LWC Practice Exercises for Beginners

Programming has always been in my blood – I do enjoy trying snippets in AMPscript / SSJS in Marketing Cloud. Recently, I came across few blogs and videos on the new Salesforce Javascript Developer certification exam – and got me excited to go back and refresh some of my programming skills. Of course, JS has come a long way since I last worked on it – so it’ll definitely take some time to gain some proficiency on the latest ES versions. Meanwhile, I did start with few tutorial videos on LWC – especially the one by Amit Singh.

I loved the new Local Deployment Server option and how we can quickly view the changes locally. As I started going through each module, I figured it’d be good to try out few practical exercises for each section that encompasses some of the features I learnt. I’ll be listing them here so you can try them out if you are interested.

Exercise 1: Build a simple numeric Calculator

Features you get to cover if you do this exercise:

• Data binding
• Reactive properties
• Use of “this” in js

Requirements:

• Build a working numeric calculator (integers only) with basic mathematical operations – add, subtract, multiply and divide.
• Keep it simple – no need to apply BODMAS rule – user should be able to enter multiple operands and operators in one go – the result can keep getting updated as the operations progress – the idea is not to build the perfect calculator but for you to learn data binding, the “this” keyword, and usage of basic javascript functions

Do try and build an LWC solution for the above requirement. Below is the link to the sample code that I have tried:

LWC Ex1 – Full Calculator

Exercise 2: Build a hierarchy system for Event Propagation

Features you get to cover if you do this exercise:

• LWC Event propagation
• Child to parent communication
• Bubbling in event and multi-level event propagation
• Public properties and methods (@api)
• Parent to child communication using querySelector

Requirements:

• Build a 3-tier hierarchical structure with one Grandparent, one Parent and 3 Child components as shown in image below
• User should be able to toggle the Select button on any of the Child components – accordingly, the Selected / Deselected status should reflect on the Parent component and in parallel, the total count of Selected children should reflect on the Grandparent component. This use case would help you learn about event propagation from child components to parent / components higher up in the hierarchy through “bubbles” and “composed” properties.
• The second use case would be to reset the status of all the Children to “Select” – as it was in the initial state – when a button “Reset All” is clicked on the Grandparent component. This should reset the selected children counter to 0 and all the child statuses in the Parent component to “Deselected”. This use case will help you learn how to communicate from a parent component to a child component through @api methods and the querySelector function.

Do try and build an LWC solution for the above requirement. Below is the link to the sample code that I have tried:

LWC Ex2 – Event Propagation with Component Hierarchy