Memory cards with Javascript

course from Brad Traversy

Github code

Features:

localStorage set and get

card flip animation CSS

slide the cards two direction

add, clear cards

HTML

cleat button is on the bottom of the page

add new card button is on the top of the page with title

cards-container is the place to display the added cards container

the navigation with two buttons and the current card number

add-container is the box with two inputs and a submit button when triggering add-a-new-card

CSS

apply perspective to the outside of card

each card is in an absolute position

when the card is active, change the translalteX and rotateY degree .

with the left class name, change the x axis and rotateY degree

for a flipping card effect, transform-style:preserve-3d and animation rotateX degree

when flip, rotate x