The first project for Xtern Bootcamp 2018 Session 3. This project uses vanilla JavaScript/ES2015+.
- Try the official React Tutorial
- Have a great weekend!
- In addition to building a list item and adding it to the DOM (as we are now), also store each flick in an array.
- Add a delete button to each list item that removes it from the list.
- Remove the flick from the array as well.
- Add a favorite button to each flick as well that lets you mark your favorites.
- Display favorites differently.
- Be sure the favorites are recorded appropriately in the array.
- Give the function
changeHeadinga more accurate name. - Add a second field to the form.
- Display the value of that field in the list.
- Display the second field in a separate HTML element than the flick name. For example:
<li>
<span class="flickName">Jurassic Work</span>
<span class="year">2015</span>
</li>- See if you can then style each field differently.
- Use more than one function. (Break
changeHeadinginto multiple functions, as appropriate.)
- Make the button change the text of the heading (the
<h1>).
- Add multiple headings to the page, and make the button change the second one. (Use a
classor anid.)
- Add a form to the page.
- Add a text input to the form.
- When the form is submitted, update the heading with the text that you type in the text input.
- Make sure it works when you press enter on the keyboard, not just when you click the button.