<aura:component >
   <lightning:layout class="slds-page-header slds-page-header--object-home">
    <lightning:icon iconName="action:goal" size="large" alternativeText="Camping"/>
    <!-- PAGE HEADER -->
    <div class="slds-page-header" role="banner">
      <div class="slds-grid">
        <div class="slds-col">
          <p class="slds-text-heading--label">Campings</p>
          <h1 class="slds-text-heading--medium">Camping List</h1>
        </div>
      </div>
    </div>
    <!-- / PAGE HEADER -->
   </lightning:layout>
 
</aura:component>

<aura:component >
    
	<aura:attribute name="items" type="Camping_Item__c[]"/>
    <aura:attribute name="newItem" type="Camping_Item__c"
                    default="{'sobjectType' : 'Camping_Item__c',
                               'Quantity__c' : 0,
                               'Price__c' : 0}"/>
  <!-- BOXED AREA -->
  <fieldset class="slds-box slds-theme--default slds-container--small">

    <legend id="newCampItemForm" class="slds-text-heading--small 
      slds-p-vertical--medium">
      Add Camping Item
    </legend>

    <!-- CREATE NEW CAMPING ITEM FORM -->
    <form class="slds-form--stacked">

      <lightning:input aura:id="itemform" 
                       label="Name"
                       name="itemname"
                       value="{!v.newItem.Name}"
                       required="true"
                       messageWhenValueMissing="Name is required"/>

      <lightning:input type="number" 
                       aura:id="itemform" 
                       label="Quantity"
                       name="quantityfield"
                       value="{!v.newItem.Quantity__c}"
                       min="1"
                       required="true"
                       messageWhenValueMissing="Quantity is required"/>

      <lightning:input type="number" 
                       aura:id="itemform" 
                       label="Price"
                       name="price"
                       value="{!v.newItem.Price__c}"
                       formatter="currency"
                       step="0.1"/>

      <lightning:input type="checkbox" 
                       aura:id="itemform" 
                       label="Packed?"
                       name="packed"
                       checked="{!v.newItem.Packed__c}"/>

      <lightning:button label="Create Camping Item"
                        variant="brand"
                        onclick="{!c.clickCreateItem}"/>

    </form>
    <!-- / CREATE NEW CAMPING ITEM FORM -->

  </fieldset>
        <div class ="slds-card slds-p-top--meduim">
        <header class ="slds-card__header">
            <h3 class = "slds-text-heading--small">Items</h3>
        </header>

        <section class ="slds-card__body">
        	<div id="list" class = "row">
            	<aura:iteration items="{!v.items}" var="item">
                    <c:campingListItem item="{!item}"/>
                </aura:iteration>
            </div>
        </section>

    </div>

</aura:component>

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

        //  check for validation
        var checkField = component.find("itemform").reduce(function (validSoFar, inputCmp) {
            // Displays error messages for invalid fields
            inputCmp.showHelpMessageIfInvalid();
            return validSoFar && inputCmp.get('v.validity').valid;
        }, true);



        if (checkField)
        {
            //  gets refernce to view's newItem attribute
            var newItemRef = component.get("v.newItem");
            console.log("Create Camping Item: " + JSON.stringify(newItemRef));
            
            
            // **** begin helper class code ****
            // note that i originally created helper class to perform the logic below
            // but it appears as though the challenge is expecting you NOT to use helper class
            // which would be why i was getting challenge error while using it
            var theItems = component.get("v.items");
 
            // Copy the expense to a new object
            // THIS IS A DISGUSTING, TEMPORARY HACK
            var newItem = JSON.parse(JSON.stringify(newItemRef));    
            theItems.push(newItem);
            component.set("v.items", theItems);
            //  *******  end helper class code *********
            
            //  this will reset the view's newItem object 
            //  to a be a blank sobject of type Camping_Item__c
            //  credit to: Shobhit Saxena
            component.set("v.newItem", 
                          {'sobjectType' : 'Camping_Item__c',
                           'Name' : '',
                           'Quantity__c' : 0,
                           'Price__c' : 0,
                           'Packed__c' : false});
                           
        }
        
	}
})

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c"/>
    
    <p>Name:
        <ui:outputText value="{!v.item.Name}"/>
    </p>
    <p>Quantity:
        <ui:outputNumber value="{!v.item.Quantity__c}"/>
    </p>
    <p>Price:
        <ui:outputCurrency value="{!v.item.Price__c}"/>
    </p>
    <p>Packed?:
        <ui:outputCheckbox value="{!v.item.Packed__c}"/>
    </p>
</aura:component>