You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
2.3 KiB
60 lines
2.3 KiB
# 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.
|
|
|
|
|
|
```html
|
|
<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.
|