You need to sign in to do that
Don't have an account?
Create a Simple Camping List Lightning Component
Hi,
the challenge is as follows :
Create a camping component that contains a campingHeader and a campingList component.
1.The campingList component contains an ordered list of camping supplies that include Bug Spray, Bear Repellant, and Goat Food.
2.The campingHeader component contains an H1 heading style with a font size of 18 points and displays 'Camping List'.
so i made a lightening application named "camping.app" having code :
<aura:application >
<br/><br/><br/>
<c:campingHeader/>
<c:campingList/>
</aura:application>
where lightening component "campingHeader.cmp" having code :
<aura:component >
<h1> Camping List </h1>
</aura:component>
for I have "campingHeader.css" having code :
.THIS {
}
h1.THIS {
font-size: 18px;
}
and lightening component "campingList.cmp" having code :
<aura:component >
<ol>
<li>Bug Spray</li>
<li>Bear Repellant</li>
<li>Goat Food</li>
</ol>
</aura:component>
when i preview the application it is working nice; but when checking the challenge it says :
"Challenge Not yet complete... here's what's wrong:
The 'camping' Lightning Component does not include either the campingHeader or campingList component."
please help me know where I m doing wrong. Thanx waiting for your reply
the challenge is as follows :
Create a camping component that contains a campingHeader and a campingList component.
1.The campingList component contains an ordered list of camping supplies that include Bug Spray, Bear Repellant, and Goat Food.
2.The campingHeader component contains an H1 heading style with a font size of 18 points and displays 'Camping List'.
so i made a lightening application named "camping.app" having code :
<aura:application >
<br/><br/><br/>
<c:campingHeader/>
<c:campingList/>
</aura:application>
where lightening component "campingHeader.cmp" having code :
<aura:component >
<h1> Camping List </h1>
</aura:component>
for I have "campingHeader.css" having code :
.THIS {
}
h1.THIS {
font-size: 18px;
}
and lightening component "campingList.cmp" having code :
<aura:component >
<ol>
<li>Bug Spray</li>
<li>Bear Repellant</li>
<li>Goat Food</li>
</ol>
</aura:component>
when i preview the application it is working nice; but when checking the challenge it says :
"Challenge Not yet complete... here's what's wrong:
The 'camping' Lightning Component does not include either the campingHeader or campingList component."
please help me know where I m doing wrong. Thanx waiting for your reply
<aura:component >
<br/><br/><br/>
<c:campingHeader/>
<c:campingList/>
</aura:component>
All Answers
<aura:component >
<br/><br/><br/>
<c:campingHeader/>
<c:campingList/>
</aura:component>
The same challenge, then I created as follows:
camping.cmp:
<aura:component >
<c:campingHeader/>
<c:campingList/>
</aura:component>
campingHeader.cmp:
<aura:component >
<h1>Camping List</h1>
</aura:component>
campingList.cmp:
<aura:component >
<ol>
<li>Bug Spray</li>
<li>Bear Repellant</li>
<li>Goat Food</li>
</ol>
</aura:component>
campingHeader.css:
.THIS {
}
h1.THIS {
font-size: 18px;
}
But when I checked the challenge it says:
"Challenge Not yet complete... here's what's wrong:
The component is not using the correct font size."
So I don't know where I'm doing wrong, please help. Thanks in advance!
My code completed the challenge
step1:campingList.cmp
<aura:component >
<ol >
<li>Bug Spray</li>
<li>Bear Repellant </li>
<li>Goat Food</li>
</ol>
</aura:component>
step2:campingHeader.cmp
<aura:component >
<h1>Camping List</h1>
</aura:component>
step3:campingHeader.css
.THIS {
}
h1.THIS {
font-size: 18 pt;
}
step4:camping.cmp
<aura:component >
<c:campingList></c:campingList>
<c:campingHeader ></c:campingHeader>
</aura:component>
:
Challenge Not yet complete... here's what's wrong:
The 'campingHeader' Lightning Component does not include the correct markup.
<aura:component >
<h1 >
Camping List
</h1>
</aura:component>
The header should have some fixed text in it as described in the challenge
camping.cmp:
campingHeader.cmp:
campingList.cmp:
campingHeader.css:
Thanks!
Thanks
}
H1.THIS {
font-size: 18px;
}
I also had trouble with this. Following the logic described in the unit (helloWorld example), I put the style in the style section of camping.cmp. That did not work (challenge not complete). When I put the style in the style section of the header component, it worked.
For my own understanding, I previewed both versions in the application and they both work; but for this challenge only the campingHeader.css is accepted.
<aura:component >
<ol>
<li>Bug Spray</li>
<li>Bear Repellant</li>
<li>Goat Food</li>
</ol>
</aura:component>
campingHeader Component
<aura:component >
<h1><c:campingList/></h1>
</aura:component>
campingHeader CSS
.THIS {
}
h1.THIS {
font-size:18px;
}
camping Component
<aura:component >
<c:campingHeader/>
<c:campingList/>
</aura:component>
I completed this challenge by this code
When I try to complete this challenge,
Here is the message I get when I try to create the campingHeader.cmp...
The Lightning Bundle "campingHeader.cmp" is not a legal name.
Where am I wrong ? Thanks !
thanks it worked well :)
I have made my campingHeader like this:
<aura:component >
<h1 style="font-size:18px">Camping List</h1>
</aura:component>
And i received message :
The 'campingHeader' Lightning Component does not include the words 'Camping List' wrapped in an H1 tag.
Please help. What did i do wrong ?
I did try H1 but got the same error message.
<aura:component >
<H1 style="font-size:18px;">Camping List</H1>
</aura:component>
What should i do ?
Thanks
Try this:
CampingHeader.cmp should read as:
<aura:component >
<h1> Camping List </h1>
</aura:component>
--------------------------------------------------------------------
THEN CLICK ON STYLE for the SAME COMPONENT, i.e. CampingHeader.cmp

Now use this code below on the campingHeader.css file that gets created after clicking on Style from above:
.THIS {
}
h1.THIS {
font-size: 18px;
}
--------------------------------------------------------------------
Just to check if your other TWO components are correct, here's the versions:
campingList.cmp
<aura:component >
<ol>
<li>Bug Spray</li>
<li>Bear Repellant</li>
<li>Goat Food</li>
</ol>
</aura:component>
AND
camping.cmp
<aura:component >
<c:campingHeader/>
<c:campingList/>
</aura:component>
<aura:component >
<c:campingHeader/>
<c:campingList/>
</aura:component>
Campaigning Header
<aura:component >
<h1><c:campingList/></h1>
</aura:component>
.THIS {
}
p.THIS {
font-size: 18px;
}
CampingList
<aura:component >
<ol >
<li>Bug Spray</li>
<li>Bear Repellant </li>
<li>Goat Food</li>
</ol>
</aura:component>
Check Challenge and Earn 500 Points
}
.THIS h1 {
font-size:18px;
}
}
h1.THIS {
font-size: 18px;
}
Created a Component camping:
CampingHeader.cmp :
<h1><c:campingList/></h1> .
<ol>
<li>Bug Spray</li>
<li>Bear Repellant</li>
<li>Goat Food</li>
</ol>
Then to the bigger component Camping.cmp add these items:
<aura:component >
<c:campingHeader/>
<c:campingList/>
</aura:component>
Thank you Santosh-Gaddam for the ordered list markup info. That was what was holding me back.
I got this right! But Thank you @shubham_soni. I tried 25 times to pass this. MY ISSUE: CSS file was nto recognized by the challenge. PASSED.
### WRONG ###
.THIS{ <<<< Remove this
} <<<<< and this... This first .THIS is not read correctly by the Challenge, but it does work. #BadChallenge
h1.THIS {
font-size: 18pt;
}
### RIGHT ###
h1.THIS {
font-size: 18pt;
}