Lightning strikes Trailhead – Fun way to learn Lightning

This module documented the concept of component bundle by the the following table –

In this module, you will also get to know how to refer elements in CSS to add styles. I have prepared the below document for my reference which I am sharing here –

Below is the CSS to add styles –

Now here is the resulting page –

After completing the challenge, you can earn 500 points.
Sub Module 3: Defining Component Attributes –
This is the module where you can make yourself familiar with passing attributes to components, creating multiple instances of the same component and setting attribute values on a component reference. I really enjoyed going through this module and after completing this module, I have prepared a small demo –
StudentComponent.cmp –

<aura:component >
    <aura:attribute name="studentName" type="String"/>
    <aura:attribute name="score" type="Integer" />
    <aura:attribute name="passedOrNot" type="String"/>
    
    <div class="studentDetails">
        <div class="name">Student Name: {!v.studentName}</div>
        <div class="score">Student Score: {!v.score}</div>
        <div class="passed">Passed: {!v.passedOrNot}</div>
    </div>
    <div>
        <ui:button label="Check whether passed or not" press="{!c.check}"/>
    </div>
</aura:component>

StudentComponent.css –

.THIS {
}
.THIS.studentDetails{
    background-color: yellow;
    padding: 30px;
} 
.THIS .name{
    color: red;
}
.THIS .score{
    color: green;
}
.THIS .passed{
    color: black;
}

StudentComponentController.js –

({
    check : function(component) {
        if(component.get("v.score")>80){
            component.set("v.passedOrNot","YES");
        }else{
            component.set("v.passedOrNot","NO");
        }
    }
})

Now it’s time for StudentApp.app –

<aura:application >
    <h1>STUDENT 1</h1>
    <c:StudentComponent studentName="Peter" score="98"/>
    <h1>STUDENT 2</h1>
    <c:StudentComponent studentName="John" score="75"/>
</aura:application>

Below is the screenshot –

Sub Module 4: Using Expressions –
This is the section where you can understand how to use expressions to make your components dynamic, how to pass conditional expressions. If you are comfortable with VisualForce, then for your this sub module will be very easy. But the important section of this sub module comes where you can learn how to refer/get browser and locale information both from component and controller.

After completing the challenge, you can earn 500 points.
Sub Module 5: Using Standard and Force.com components –
In this section, you will get to understand how you can make your GUI more attractive by using Standard and Force.com components. You will get to know all the events available to that particular components. At the end of the section, you will get an exercise which is really good for you to check your understanding.

<!-- SendName event -->
<aura:event type="APPLICATION" description="Send Name Event" >
    <aura:attribute name="firstName" type="String" />
    <aura:attribute name="lastName" type="String" />
</aura:event>

<!-- SendNameSender component -->
<aura:component >
    <aura:registerEvent name="SendNameEvent" type="c:SendName"/>
    <ui:button label="First Student" press="{!c.send}"/>
    <ui:button label="Second Student" press="{!c.send}"/>
</aura:component>

SendNameSender controller –

({
    send : function(component, event, helper) {
        var whichButtonClicked = event.source.get("v.label");
        if(whichButtonClicked=="First Student"){
            firstName = "Peter";
            lastName = "Sasse";
        }else{
            firstName = "James";
              lastName = "Hau";
        }
        $A.get("e.c:SendName").setParams({
            firstName: firstName,
            lastName: lastName
        }).fire();
    }
})

SendNameReceiver component –

<aura:component >
    <aura:attribute name="fullName" type="String" default="none" />
    <aura:handler event="c:SendName" action="{!c.prepareFullName}" />
    Full Name: {!v.fullName}
</aura:component>

SendNameReceiver controller –

({
    prepareFullName : function(component, event, helper) {
        var firstName = event.getParam("firstName");
        var lastName = event.getParam("lastName");
        component.set("v.fullName", firstName + " " + lastName);
        //component.set("v.fullName", firstName );
    }
})

Finally the application –

<aura:application >
    <c:SendNameSender />
    <br />
    <c:SendNameReceiver />
</aura:application>

Below is what you will receive –
    & 
After completing the challenge, you can earn 500 points.
Sub Module 7: Using Javascript Controllers with Components –
In this section, you will get to understand how to use JavaScript API to work with components, get user input and validate that in client side, how to create components dynamically, how to show error messages by creating dynamic error message window. In this section, you will know how to handle exceptions.

After completing the challenge, you can earn 500 points.
Sub Module 8: Using Apex in Components –
This is the section where you can understand how to load record data and display it in a component. This module will teach you how to call an Apex controller to fetch/edit/save the data.

After completing the challenge, you can earn 500 points.
Sub Module 9: Debugging your Components –
In this section, you will get to understand how to debug your lightning code using $A.log and $A.warning.You will also get to know how to use Debugger statement to examine the code execution in the browser.

After completing the challenge, you can earn 50 points.

I really enjoyed going through each sub module and now I am feeling inspired to explore more Lightning.
I am feeling good that I am having 6 Trailhead badges now.