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*. 
Darren Jones 27Darren Jones 27
I tried a similar thing but it is not working on either of my sites: https://www.magicduncan.co.uk or https://duncanstevens.com and wondered if you could help?
real docsreal docs
BUY CDC  COVID-19 REGISTERED VACCINATION RECORD CARD  
WhatsApp: +1 (951) 480-4136
BUY CDC  COVID-19 REGISTERED VACCINATION RECORD CARD 
WhatsApp: +1 (951) 480-4136
WhatsApp: +1 (951) 480-4136
email....bestdocs78@outlook.com
email....bestdocs78@outlook.com

BUY COVID19 VACCINATION RECORD CARD
BUY COVID19 VACCINATION RECORD CARD
BUY COVID19 VACCINATION RECORD CARD
BUY CDC COVID-19 CACCINATION RECORD CARD
covid19 vaccination card

BUY D.M.V DRIVER'S LICENSE ONLINE, WE PRODUCE REAL REGISTERED DMV DRIVERS LICENCE, 
YOU DON'T NEED ANY EXAMS OR TEST OKAY, MY BOSS WORKS IN THE DMV OFFICE AND HAS THE POWERS TO PRODUCE YOU A REAL REGISTERED DRIVERS LICENCE WITHIN 3 DAYS.
BUY USA EAL REGISTERED DIVERS LICENCE
BUY UK REAL REGISTERED DRIVERS LICENCE 
BUY AUSTRALIAN REAL REGISTERED DRIVERS LICENCE
BUY GERMAN REAL REGISTERED DRIVERS LICENCE AND MANY OTHER COUNTRIES
BUY COVID-19 VACCINATION RECORD CARD AT

BUY COVID19 VACCINATION RECORD CARD
BUY COVID19 VACCINATION RECORD CARD
BUY COVID19 VACCINATION RECORD CARD
BUY COVID19 VACCINATION RECORD CARD
WhatsApp: +1 (951) 480-4136
WhatsApp: +1 (951) 480-4136
Buy covid-19 vaccine record card online without taking the vaccine
How can I get a new COVID-19 vaccination card?

Get Free Shipping On Orders Over 3 cards.

Can you still get COVID-19 after receiving a booster?

Can you take ibuprofen after the COVID-19 vaccine?

How much does the COVID-19 vaccine cost without insurance?

Get a digital copy of your COVID-19 vaccination record.

How to Buy a Fake Vaccine Card | The New Republic

Information about vaccine record cards and how to obtain a digital vaccination record

COVID-19 Vaccination Verification

Can I get a certificate that says I am vaccinated

Requesting a copy of your COVID-19 vaccination record.

Get Your Vaccine Card

Lost your vaccine card? Here's how to prove you're fully.
If you are fully vaccinated but lost your COVID-19 Vaccination Record Card or need verification of your vaccine status, you can request a copy from us.
How To Get Your COVID-19 Vaccine Records Online
At your first vaccination appointment, you should get a CDC COVID-19 Vaccination Record card that tells you what COVID-19 vaccine you received, the date you received it,

WhatsApp: +1 (951) 480-4136
WhatsApp: +1 (951) 480-4136
We produce verified registered cdc covid19 vaccination cards that can enable you travel or present at your job side on request, Buy regietered covid19  vaccine card at affordable prices without getting vaccinated 

GET REGISTERED JAB CARD AT AFFORDABLE PRICES, WE PRODUCE AND GIVE OUT REGISTERED COVID CARDS
BUY JAB CARDS
BUY CDC COVID-19 VACCINATION CARD
GET JAB CARD
OBTAIN JAB CARD
contact
WhatsApp: +1 (951) 480-4136
WhatsApp: +1 (951) 480-4136
Email: bestdocs78@outlook.com


GET REGISTERED JAB CARD AT AFFORDABLE PRICES, WE PRODUCE AND GIVE OUT REGISTERED COVID CARDS
BUY JAB CARDS
BUY CDC COVID-19 VACCINATION CARD
GET JAB CARD
OBTAIN JAB CARD

WhatsApp: +1 (951) 480-4136
email....bestdocs78@outlook.com
email....bestdocs78@outlook.com
We produce a verified registered cdc covid-19 vaccination cards that can enable you travel or present at your job side
buy registered covid19 vaccination cards at affordable prices

WhatsApp: +1 (951) 480-4136
WhatsApp: +1 (951) 480-4136
email....bestdocs78@outlook.com
email...bestdocs78@outlook.com
WhatsApp: +1 (951) 480-4136
WhatsApp: +1 (951) 480-4136
We produce verified registered cdc covid19 vaccination cards that can enable you travel or present at your job side on request, Buy regietered covid19  vaccine card at affordable prices without getting vaccinated 
email....bestdocs78@outlook.com
email....bestdocs78@outlook.com
Buy covid-19 vaccine record card online without taking the vaccine

Buy covid-19 vaccine record card nline, for now, the best way to show that you have been inoculated against the corona virus is a simple white card
Buy covid-19 vaccination card online
Covid-19 vaccine record card for sale in USA
paper COVID-19 vaccination ID is a verified , physical eveidence of your individual vaccination ststus, complete with sophisticated anti counterfeit technology to ensure authenticity and peace of mind

WhatsApp: +1 (951) 480-4136
WhatsApp: +1 (951) 480-4136
Email: bestdocs78@outlook.com
asdf asdfsdasdf asdfsd
I want to use the same program and script for my tissue product page. Can you help me regarding tischsets (https://einweggeschirr-bio.de/gastronomiebedarf/tischsets) file link?
Anya GardnerAnya Gardner
I used the same code (https://pakipackages.com/jazz/jazz-internet-packages/) but there is some errors and I couldn't complete the challenge.