31:[] 2f:{"title":"Flipping a Card","cells":[{"id":0,"value":"# Flipping a Card\n\n> Objective: this is a step-by-step breakdown of creating a flipping card. UI element. These are frequently used for question & answer activities or to provide additional details to a topic.\n\nFirst, create a basic card object.","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"\n\n

Card

","pinned":false,"hidden":false,"mode":"html"},{"id":569,"value":"Create a content placeholder. This should fill the entire card. Move `.centered` and `.bordered` down from the card to the content.","pinned":false,"hidden":false,"mode":"md"},{"id":222,"value":"\n\n

Content

","pinned":false,"hidden":false,"mode":"html"},{"id":642,"value":"Add the front of the card. This should fill the content.","pinned":false,"hidden":false,"mode":"html"},{"id":630,"value":"\n\n

Front

","pinned":false,"hidden":false,"mode":"html"},{"id":585,"value":"Add the front and back to the content. The back is on the front because we haven't created any transforms yet.","pinned":false,"hidden":false,"mode":"md"},{"id":261,"value":"\n\n

Front

Back

","pinned":false,"hidden":false,"mode":"html"},{"id":590,"value":"Apply transforms.","pinned":false,"hidden":false,"mode":"md"},{"id":661,"value":"\n\n

Front

Back

","pinned":false,"hidden":false,"mode":"html"},{"id":694,"value":"**Finally!** Add an event listener to detect click events.","pinned":false,"hidden":false,"mode":"md"},{"id":663,"value":"

Front

I don't trust trees...

Back

... because they seem shady.

","pinned":false,"hidden":false,"mode":"html"},{"id":666,"value":"function rotate(e) {\n mutable rotation += 180;\n e.target.parentElement.style.transform = `rotateY(${mutable rotation}deg)`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":547,"value":"mutable rotation = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"borderColor = \"#d0d0d0\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"colors = ({\n card: d3sc.interpolateViridis(0),\n content: d3sc.interpolateViridis(0.2),\n front: d3sc.interpolateViridis(0.4),\n back: d3sc.interpolateViridis(0.6),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":598,"value":"d3sc = require(\"d3-scale-chromatic@3\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}