The first problem I ran into was how to make the flashcard rotate. I wanted for the user to be able to click on the card and have it rotate to display the other side. This would make it seem just like an actual flash card.
The solution was to create a function that would toggle a class allowing the card to rotate and show what was on the other side. I ended up using
transform-style: preserve-3d; to create the front and back. Then I created a
flip class would toggle on and off as the user clicked on the card. When the flip class was on it would add
transform: rotateY(180deg); to the card. This is what gave it the flipping motion.
If a user wanted to make more flashcards they would simple click the 'create flashcard' buttona and a new imput field would appear. However, when the user clicks create cards the info placed inside the dynamically created flashcards would not appear in the array.
The Problem came from the fact that it was receiving the input and putting it into a node list, not the array. So, all I had to do was use the Array.from(); method to convert the node list into an array. This would allow me to work with all the methods that are available to arrays and not node lists.