CodemySite_Web development

  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 ...

  course from Brad Traversy Github code  Features: web speech API HTML toggle-button for hiding and showing the text box the select option list will fetch from API  textarea value pass into the message text when reading the main show up the list of data (images and text) CSS hide the text box outside top of client Page and position turns down when adding classlist show when the box is active , the box-shadow shows up and the image fit in the box grid the box at the main part. four columns and responsive screen setting up JS get the DOM needed the data of images and text array loop the data to get the image and the text, set the box dom and classList, then append to the main section when clicking the box, setTextMessage() and speanText(),also for the box-shadow effect with active classname For fetching the text and language with Web speech API .  new message of input text value as a parameter the text pass to message value speakText with speecgSynthesis.speak()  ...

  course from Brad Traversy Github code Features: localStorage get and set setting difficulty selects matching words score add when correct time reduces and the time add if typing correctly(time depends on difficulty level) HTML button controls the setting section at the top the setting is a form with three selections the word data will be shown in the h1 tag the text input compare to the word when the user types time on the left, score on the right and when the game end, the message shows up with the score and a reset button CSS hide the arrow on the select with appearance, for other browser adding the -webkit and -moz When focusing on select, hiding the outline the setting places at the top. when hiding, the position of the y-axis moves up the messager box show at the absolute position relative to the container and hide first. when the game ends, show up JS select all the DOM needed with id the words array or can be fetched from API the initial score is zero, and the time is 10 s...