Problem Statement:

Create a form to enter new items and display the list of items entered. To make our camping list look more appealing, change the campingHeader component to use the SLDS. Similar to the unit, style the Camping List H1 inside the slds-page-header. Modify the campingList component to contain an input form and an iteration of campingListItem components for displaying the items entered.

• The component requires an attribute named items with the type of an array of camping item custom objects.
• The component requires an attribute named newItem of type Camping_Item__c with default quantity and price values of 0.
• The component displays the Name, Quantity, Price, and Packed form fields with the appropriate input component types and values from the newItem attribute.
• The JavaScript controller checks to ensure that the Name, Quantity and Price values submitted are not null.
• If the form is valid, the JavaScript controller pushes the newItem onto the array of existing items, triggers the notification that the items value provider has changed, and resets the newItem value provider with a blank sObjectType of Camping_Item__c.

My Code:

CampingList.cmp
 

<aura:component >
	<ol>
        <li>Bug Spray</li>
        <li>Bear Repellant</li>
        <li>Goat Food</li>
    </ol>
 <aura:attribute name="items" type="Camping_Item__c[]"/>
 <aura:attribute name="newItem" type="Camping_Item__c"
     default="{'sobjectType': 'Camping_Item__c',
                    'Name': '',
                    'Price__c': 0,
                    'Quantity__c': 0,
                    'Packed__c': false }"/>    
    <div style = "slds">
    <div class="slds-col slds-col--padded slds-p-top--large">
		<div aria-labelledby="newform">
			<fieldset class="slds-box slds-theme--default slds-container--small">
				<legend id="newform" class="slds-text-heading--small slds-p-vertical--medium">New Form</legend>
				<form class="slds-form--stacked">
					<div class="slds-form-element slds-is-required">
						<div class="slds-form-element__control">
							<ui:inputText aura:id="formname" label="Name" class="slds-input" labelClass="slds-form-element__label" value="{!v.newItem.Name}" required="true"/>
						</div>
					</div>
					<div class="slds-form-element slds-is-required">
						<div class="slds-form-element__control">
							<ui:inputCurrency aura:id="formprice" label="Price" class="slds-input" labelClass="slds-form-element__label" value="{!v.newItem.Price__c}" placeholder="0"/>
						</div>
					</div>
					<div class="slds-form-element">
						<div class="slds-form-element__control">
							<ui:inputNumber aura:id="formquantity" label="Quantity" class="slds-input" labelClass="slds-form-element__label" value="{!v.newItem.Quantity__c}" required="true" placeholder="0"/>
						</div>
					</div>
					<div class="slds-form-element">
						<ui:inputCheckbox aura:id="formpacked" label="Packed?" class="slds-checkbox" labelClass="slds-form-element__label" value="{!v.newItem.Packed__c}"/>
					</div>
					<div class="slds-form-element">
						<ui:button label="Create Form" class="slds-button slds-button--brand" press="{!c.clickCreateFormData}"/>
					</div>
				</form>
			</fieldset>
		</div>
    </div>

    <div class="slds-card slds-p-top--medium">
        <header class="slds-card__header">
            <h3 class="slds-text-heading--small">Camping</h3>
        </header>
        
        <section class="slds-card__body">
            <div id="list" class="row">
                <aura:iteration items="{!v.items}" var="items">
                    <c:campingListItem item="{!items}"/>
                </aura:iteration>
            </div>
        </section>
    </div>    
	</div>
</aura:component>

CampingListController.js:
 

({
    clickCreateFormData: function(component, event, helper) {

        var validitem = true;
        
        var nameField = component.find("formname");
        var expname = nameField.get("v.value");
		if ($A.util.isEmpty(expname)){
            validitem = false;
            nameField.set("v.errors", [{message:"Expense name can't be blank."}]);
        }
        else {
            nameField.set("v.errors",null);
        }
        
        var priceField = component.find("formprice");
        var expprice = nameField.get("v.value");
            if ($A.util.isEmpty(expprice)){
            validitem = false;
            priceField.set("v.errors", [{message:"Expense price can't be blank."}]);
        }
        else{
            priceField.set("v.errors",null);
        }
        
        var quantityField = component.find("formquantity");
        var expquantity = nameField.get("v.value");
        if ($A.util.isEmpty(expquantity)){
            validitem = false;
            quantityField.set("v.errors", [{message:"Expense quantity can't be blank."}]);
        }
        else{
            quantityField.set("v.errors",null);
        } 
        
      /*  if(validExpense){
            var newItem = component.get("v.newItem");
            console.log("Create item: " + JSON.stringify(newItem));
            helper.createExpense(component, newItem);
        } */
         if(validitem){
            var newItem = component.get("v.newItem");
            console.log("Create item: " + JSON.stringify(newItem));
        	var theItem = component.get("v.items");
            var newItem = JSON.parse(JSON.stringify(newItem));
            theItem.push(newItem);
            component.set("v.newItem",newItem);
        }
        component.set("v.newItem",{'sobjectType': 'Camping_Item__c',
                    'Name': '',
					'Price__c': 0,                                   
                    'Quantity__c': 0,
                    'Packed__c': false });
    }
})

CampingListItem.cmp:
 

<aura:component implements="force:appHostable">
   <aura:attribute name="item" type="Camping_Item__c"/>
     <p>The Item is: 
         <ui:outputText value="{!v.item}" />
    </p> 
    <p>Name:
        <ui:outputText value="{!v.item.Name}"/>
    </p>
    <p>Price:
    	<ui:outputCurrency value="{!v.item.Price__c}"/>
    </p>
    <p>Quantity:
		<ui:outputNumber value="{!v.item.Quantity__c}"/>
    </p>
    <p>Packed?:
    	<ui:outputCheckbox value="{!v.item.Packed__c}"/>
    </p>
    
  <!--  <p>
    	<ui:button label="Packed!" press="{!c.packItem}"/>
    </p> -->
</aura:component>

Could anyone help pass and run the challenge.

Thanks.