Quizlet Clone App




Intro

Quizlet Clone is a remake of the flashcard component inspired from www.quizlet.com. This app was made using jquery and some vanilla javascript. The purpose was to put the majority of my javascript skills to the test without anykind of tutorial. The app allows a user to enter two input forms that will be displayed on each side of a 'flashcard'. The user can then click on the 'flashcard' and the card will rotate allowing the user to see the other side. If the user wants to create multiple flashcards they can cycle them them by clicking on the arrows.

Problem #1 Rotating Flashcard

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.

Solution

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.

Problem #2 Adding Dynamically Created Content to the Array

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.

Solution

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.

Takeaways

This project really allowed me to put my JavaScript skills to the test. It allowed me to use my fundamental skills that I already had and expand upon them into more technical parts of the language. I am really happy with how it turned out and I hope to later rebuild the same thing in React.js.