function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Rohit AttriRohit Attri 

Need help in Completing Trailhead challenge

Need help!

I am trying to complete Lightning "Create and Edit Lightning Components" trailhed challenge .
Create a camping component that contains a campingHeader and a campingList component.
The campingList component contains an ordered list of camping supplies that include Bug Spray, Bear Repellant, and Goat Food.
The campingHeader component contains an H1 heading style with a font size of 18 points and displays 'Camping List'.

I created Camping Component :
<aura:component >
    <c:campingList/>
    <c:campingHeader/>
</aura:component>

campingList Component:
<aura:component >    
    <h1>  type="List" default="['Bug Spray', 'Bear Repellant', 'Goat Food']"</h1>
</aura:component>

CampingHeader Component:
<aura:component >   
    <H1>Camping List</H1>    
</aura:component>

And a css tp add font-size 
.THIS {
}
H1.THIS {
    font-size:18px;
}

But I am getting below error :

Challenge Not yet complete... here's what's wrong: 
The component is not using the correct font size.

Please help.


 
Jerome RussJerome Russ
Is it supposed to be points? Because your font siz is px for pixels, not points. pt is for points.
For more on px vs pt, see:
http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
Amit VaidyaAmit Vaidya
Yes Jerome is correct. Just update your campingHeader.css as below and it will  work:

.THIS {
}
H1.THIS {
    font-size:18pt;
}

Thanks,
Amit
Rohit AttriRohit Attri
Thanks a lot Jerome and amit.
That problem is resolved but now i am getting error in CampingList component. 
I tried this 
campingList Component:
<aura:component >    
    <h1>  type="List" default="['Bug Spray', 'Bear Repellant', 'Goat Food']"</h1>
</aura:component>
and getting an error 
Challenge Not yet complete... here's what's wrong: 
The 'campingList' component does not include the correct markup.

Then I tries using <aura:attribute>

<aura:component >
    <aura:attribute name="CampingList" type="List" default="['Bug Spray', 'Bear Repellant', 'Goat Food']" />
</aura:component>

But I still getting the same error.

I am stuck here.
Please help

 
Rohit AttriRohit Attri
I completed the challenge . I missed this: 

<aura:component >
<ol >
<li>Bear Repellant</li>
<li>Bug Spray</li>
<li>Goat Food</li>
</ol>
</aura:component> 

Thank You!
Amit VaidyaAmit Vaidya
That's perfect Rohit.
Utpal SinghUtpal Singh
Hi,
I am also facing same issue even after updating the correct code. Please suggest.

CampingList.cmp
<aura:component >
<ol >
<li>Bear Repellant</li>
<li>Bug Spray</li>
<li>Goat Food</li>
</ol>
</aura:component>

CampingHeader.css
.THIS {
}
H1.THIS {
    font-size:18pt;
}

CampingHeader.cmp
<aura:component >   
    <H1>Camping List</H1>    
</aura:component>

Camping.cmp
<aura:component >
    <c:campingList/>
    <c:campingHeader/>
</aura:component>

Challenge Not yet complete... here's what's wrong: 
The component is not using the correct font size.
UrminderUrminder
@Utpal Singh : You need to change your headerComponent.css as 

.THIS H1 {
    font-size:18pt;
}