Looping through a JSON file of questions and answers, you learn to build a flash-card deck prototype that will be reused later to create a standard deck of cards.
- [Instructor] Here's the card we're going to build.…You'll notice there's quite a few divs.…He first one is the card container,…and that's essentially going to just keep things in place.…Inside of that is a flip div,…and that's going to be in charge of rotating…both the front and the back of the card.…You'll notice again there's a card back…and a card front, and each of those contains divs…for values, and the card front also has a div…for the category value.…We know a couple of things about our card.…We know it has an ID, it gets data,…and it has a buildCard function.…
Down here in our card, let's go ahead and add those.…So it's going to be this.id, and I'm going to set the ID…to an empty string…because of course that gets overwritten…when we build the card.…Then there is the data,…and, again, I can just set that to an empty string,…and there is the buildCard function,…and that's going to be equal to a function.…There are a bunch of divs I need to create here,…but there are three main ones…that I have a feeling I'll want to reference later.…
- Working with prototype and dynamic elements
- Using bind, call, and apply
- Using the Fisher–Yates formula
- When to use e.preventDefault() and when to avoid it
- Drag-and-drop life cycle
- Using prototypical inheritance to optimize your code
Skill Level Intermediate
Q: This course was updated on 1/16/2019. What changed?
A: The following topics were updated: propagation and drag and drop.