feat: add flashcard app workshop

[naomi-lgbt]

Checklist:

• I have read freeCodeCamp's contribution guidelines.
• My pull request has a descriptive title (not a vague title like Update index.md)

Closes #644
Replaces #933

List of TypeScript Concepts taught

• Type Annotations
• Interfaces
• Type Guards
• Generic DOM Typing
• Union & Type Narrowing
• Type-safe error handling
• Typed Events

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@​parcel/​transformer-typescript-tsc@​2.15.4
	@​parcel/​config-default@​2.15.4
	parcel@​2.15.4
	prettier@​3.6.2

View full report

[eastbetsy]

Complete the flashcard quiz app with a cleaner UI and control panel to make it look like an actual app.
Credits to Musa for the Typescript. I just fixed it a bit when I edited the HTML and CSS for the new UI.
Not sure what to do for the quiz part. I hope this passes for now. Let me know if anything needs fixed. Sorry for the inactivity!

[shootermv]

i think it can be better to convert all the separate methods (like refresh or flipcard), the code has currently - to private methods of FlashCardGame class...
it will more typescript-style

[shootermv]

i have ui suggestion: to move flip button to be below the card
and rename the right section to manage cards, like here:

Also instead of back & front - will it be better to change it to question & answer?
what do you think? @ElectricMolasses @a2937 ?

[a2937]

Sure.

[shootermv]

one more question: do we need typescript package listed in the package.json list?
currently it is missing

[ElectricMolasses]

i have ui suggestion: to move flip button to be below the card and rename the right section to manage cards, like here: Also instead of back & front - will it be better to change it to question & answer? what do you think? @ElectricMolasses @a2937 ?

It's hard to beat back and front semantically. It immediately tells me that there is a back and front face for this css, and explains why there are properties like RotateY. question and answer describes none of the implementation to me, only what the text is going to represent.

If we do see a benefit in question and answer, I would prefer those be added to the text that the front and back of the cards contain, rather than the card faces themselves, or even as an additional class to the cards. .front and .back shouldn't be removed/replaced.

[shootermv]

it can be better to move all the methods to be a class-member methods instead

[a2937]

@shootermv Why did you remove the keydown handler?

[shootermv]

@shootermv Why did you remove the keydown handler?

i removed it since it wasnt doing noting (i suppose the initial intention was - to flip the card when user presses enter, which looks not so correct to me)

[shootermv]

im little concerned by the fact that there is some methods class based and others - not...

[jdwilkin4]

LGTM 👍🏾