The first project for Xtern Bootcamp 2018, Session 3. This project uses vanilla JavaScript/ES2015+.
- Try the official React Tutorial
- In addition to building a list item, and adding it to the DOM (as we are now), also store each list item in an array
- Add a delete button to each list item that removes it from the list
- Remove the list item 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 to that favorites are recorded in the array
- Give the function a more accurate name of your choice
- Add a second field value to the form
- Display the value of that field to the list
- Display the second field in a separate HTML element than the flick name
- See if you can then style each field differently
- Use more than one function (break
changeHeading()into different functions)
- 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.