Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Saroj KushwahaSaroj Kushwaha 

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
Best Answer chosen by Saroj Kushwaha
Nayana KNayana K
Instead of camping.app, create camping.component :
<aura:component >
    <br/><br/><br/>
    <c:campingHeader/>
    <c:campingList/>  
</aura:component>

All Answers

Nayana KNayana K
Instead of camping.app, create camping.component :
<aura:component >
    <br/><br/><br/>
    <c:campingHeader/>
    <c:campingList/>  
</aura:component>
This was selected as the best answer
Saroj KushwahaSaroj Kushwaha
Thanx Nayana ....
Beck Wu 8Beck Wu 8
Hi, 

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!
Nayana KNayana K
@Beck use font-size:18pt;  instead of 18px
kavithatrailheads reddykavithatrailheads reddy
Hi 
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>
:
 
Prashanth Adepu 4Prashanth Adepu 4
I did all the above steps but still
Challenge Not yet complete... here's what's wrong: 
The 'campingHeader' Lightning Component does not include the correct markup.
 
Raghavendra Joshi 7Raghavendra Joshi 7
@ Prasanth, Can u give campingHeader component code. 
Tiago Coelho 19Tiago Coelho 19
Hi @Raghavndra Please find below my code

<aura:component >
    <h1 >
        Camping List
    </h1>
</aura:component>
Stephen Stanley 2Stephen Stanley 2
@tiago  - you need to have both Camping Header and Camping List in the Camping Component - but you seem to have the  header inside your list component

The header should have some fixed text in it as described in the challenge
shubham_sonishubham_soni
for completing challenge follow this steps-


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:
  
h1.THIS {
    font-size: 18;
}



 Thanks!
Reddeiah R 3Reddeiah R 3
Hi Bro! It's useful
Thanks
Manj_SFDCManj_SFDC
.THIS {
   
}

H1.THIS {
    font-size: 18px;
}
TriopticonTriopticon
I'm so sick of this challange... I have tried everything I can think of, but without any luck.
Muniza ArifinMuniza Arifin
Hello Triopticon,
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.
 
Gangadhar LGangadhar L
campingList Component

<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
Marie LefortMarie Lefort
Hello all, 

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 !
Stephen Stanley 2Stephen Stanley 2
Try just campingHeader
Marie LefortMarie Lefort
@Stephen, 

thanks it worked well :)
trong tran 2trong tran 2
Hello
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 ?
 
sudheer yetthapu 1sudheer yetthapu 1
Hi Use H1 instead of h1 in campingHeader component and in style to solve the issue. Thanks
trong tran 2trong tran 2
HI sudheer
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
Nirvik MitterNirvik Mitter

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

User-added image

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>
Manish1812Manish1812
Here is my Challenge complete :Camping 
<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 
Ryan OlsenRyan Olsen
For those of you still struggling with this trailhead even though your code is correct, the solution is simple. You need to SAVE every component first before you ask trailhead to check your work. No need to beat your head against the wall. Hope this helps!
David Parent CuentasDavid Parent Cuentas
Hi, If someone is getting an error about "Ordered List" check that you're using <ol>...</ol> instead of <ul>...</ul>
Andrew ClintonAndrew Clinton
After many struggles on this I can echo what Ryan says, hit save on each individual component after every change before you submit to Trailhead for assessment. Notice it asks for an ordered list in the assessment. This isn't mentioned in the unit, so you'll need to explore that bit elsewhere. All the code you need is on this thread, along with lots of wrong code, you just need to figure out which bits work.
Platinum TradePlatinum Trade
.THIS {
}

.THIS h1 {
    font-size:18px;
}
johny Bashajohny Basha
.THIS {
}
h1.THIS {
    font-size: 18px;
}
Santosh-GaddamSantosh-Gaddam
I Got the challege passed with following code, hope it will be usefull for other Lightning begineers;

Created a Component camping: 
camping.cmp
<aura:component >
    <c:campingHeader/>
    <c:campingList/>
</aura:component>



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


campingHeader.css
.THIS {
}
h1.THIS {
    font-size: 18pt;
}






CampingList.cmp

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

 
Saket Ranjan 3Saket Ranjan 3
point to remember in
  CampingHeader.cmp :
 <h1><c:campingList/></h1> .
 
AVINASH NAIR 7AVINASH NAIR 7
Thanks Nayana. You suggestions really came to my rescue :)
 
Rob Koch 1Rob Koch 1
The Ordered List <ol> and List Item <li> markups are not mentioned in the unit, as Andrew pointed out. Add them to your component campingList.cmp 

<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.

 
Troy CenterTroy Center

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;
}
Troy CenterTroy Center
@trong tran 2 -- You need to put the CSS in the Style portion of the component. You can't do it inline like that *for the challenge*.