Memory cards with Javascript

4 min readDec 28, 2020

course from Brad Traversy

Github code


localStorage set and get

card flip animation CSS

slide the cards two direction

add, clear cards


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


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




❤️Front-end Web Development self-taught *share what I learned*