JSFiddle - React, Tailwind, and code Playground

by loganconnor44

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
	<title>Material Beautify Chinese Study</title>
</head>

<body>
	<style>
		body {
			margin: 0;
			display: flex;
			min-height: 100vh;
			flex-direction: column;
		}
	</style>
</body>
</html>

JavaScript

const projectVersion = "1.20.24";

if (!customElements.get('material-beautify-chinese-study')) {
  console.log('Custom element does not exist - Creating script to pull it in');
  var script = document.createElement('script');
  script.setAttribute('id', 'import-script');
  script.setAttribute('type', 'module');
  script.setAttribute('src', `https://cdn.jsdelivr.net/npm/beautify-chinese-study@${projectVersion}/dist/beautify-chinese-study/beautify-chinese-study.esm.js`);
  document.body.appendChild(script);
} else {
  console.log('Custom element exists.');
}

var beautify = document.querySelector('material-beautify-chinese-study');
if (beautify !== null) {
  beautify.remove();
}

var beautify = document.createElement('material-beautify-chinese-study');
beautify.setAttribute('id', 'beautify');
beautify.setAttribute('primary-character', '天气');
beautify.setAttribute('primary-character-sentence', '今天天气很好。');
beautify.setAttribute('meaning', "The weather today is good.");
// card type can be changed here to view another type
// available types found here under the attribute card-type
// https://github.com/LoganConnor44/anki-templates/blob/master/src/components/material-beautify-chinese-study/readme.md#properties
beautify.setAttribute('card-type', 'recognition');
beautify.setAttribute('card-orientation', 'question');
// if pinyin is desired this next line can be omitted completely
beautify.setAttribute('preferred-phonic', 'zhuyin');
/* beautify.setAttribute('phonic-orientation', 'over') */
// this value is for generating secondary characters and pinyin/zhuyin
beautify.setAttribute('force-auto-generation', 'force-auto-generation');
document.body.appendChild(beautify);


// set card orientation to answer automatically after 5 seconds for demonstration purposes
setTimeout(() => {
  beautify.setAttribute('card-orientation', 'answer');
}, 5000);