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

each card has two sides: front and back

add an icon before the flip button with Font awesome 

The pop-up adding container position is the same as card. hide first when loading

JS

select all the DOM needed

init the currentActiveCard is the first one 

init the array to store all the added cards

the cardsData can be a static array data or get from localStorage

get the localStorage named cards if have them. 

set the localStorage data to cards and then reload

When clicking the add card button, get the value of the question and answer, and create a new card passed with the values.

hide the add container,push the new card data to cardsData array,and set them to localStorage

create card with createElement() 

when clicking the card to flip with toggle class name

and updateCurrentText()

show and hide the container with class name show

when clicking the prev or next buttons, the card moves with the class name added the index increases. If the active card index reaches the last one , stay at the last one, if the active card index reaches the first one, do the same.

the currentText shows the active card index+1

if clear the cards, all the data store in the localStorage and cards container cleared and reload