angularjsnotes/Day 4/readmes/afternoon_lab.md

Lab - Afternoon

Keep Building the Holiday App

Warm Up

• Add a td element to the table that shows the number of likes
• Add a td element to the table that has an image of balloons, when you click it, the number of likes go up
  • In the assets folder is an image two-balloon-icons-68911.png

Hints:

• Create a new function with an $http call that specifically updates just the likes

More Challenging

• Add a td element to the table that has an image of a pencil, when you click it, a modal will appear with a form to edit
  • In the assets folder is an image simpleiconDOTcom-pen-15-64x64.png

Hints

• Starter Form - this should give you a nice layout that plays well with the CSS already in place. Note when the class edit is present it shows the modal, when the class edit is removed the modal disappears.

• There is also another css class .dim which when added to the body, will dim the apperance of the body, which you can also toggle with angular ng-class - if you go this route it is recommended you set a variable to true/false and create a function that allows you to toggle this value.

<div class="modal edit">
  <form>
    <div class="row">
        <label for="name">Name</label>
        <input type="text" placeholder="" id="name">
        <label for="celebrated">Celebrated</label>
        <input type="text" placeholder=""  id="celebrated">
        <label for="likes">Likes</label>
        <input type="number" placeholder="" id="likes">
        <label for="description">Description</label>
          <textarea class="u-full-width" placeholder="" id="description"></textarea>
          <input type="submit" value="Update Holiday" class="button-primary">
          <button class="button-red"> Don't Update </button>
      </div>
  </form>
</div>

• One way to solve it is to have, on click, the ability to grab the holiday object being clicked and store it in a global variable for reuse in other functions

• Review the create form the edit route and show one functionality we created and mix and match the functionality you need

Ultra

• Add date to the schema. Use the JavaScript date object, mongoose Date, and moment.js to enter dates properly and also to format them that displays them in a user friendly way.