Flip Card Effect - Flashcards (How-To-Svelte)

Practice passing props, add/remove classes, use reactive variables, making components and good ol' JavaScript.

00:04 the project
00:50 project examples
02:16 the flip effect using a CSS class
02:48 class:shorthand
03:51 button with on:click
04:42 change text content with ternary
05:41 using/importing external data
07:34 using reactive variable
09:20 add forward and back buttons
12:20 concealing/revealing answer text on back
14:29 make Flashcard component

Learn More about Svelte here:
https://svelte.dev/

View my Svelte REPL for this project here (with updates to the code):
https://svelte.dev/repl/05cf2934d8534...
Meet the Team example: https://svelte.dev/repl/dbdad7821bff4...

View the w3school How To here:
https://www.w3schools.com/howto/howto...

If you thought this video was helpful, consider buying me a coffee here: https://ko-fi.com/sixstringscoder

Headshots from PhotoPixels.com
Christmas images by Shannon E Thomas (https://www.toicon.com/collections/ho...)
and also Open Clip Art Library (check out wikimedia: https://commons.wikimedia.org/wiki/Fi...)