JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/alpine.js"></script>
<div>
	<p>Input</p>
	<textarea class="js-input"></textarea>
</div>

<div>
	<p>Output</p>
	<textarea class="js-output"></textarea>
</div>

<div>
<button class="js-submit">Transform</button>
</div>

CSS

body, textarea {
	background: #222;
	color: #ccc;
}

textarea {
	min-width: 400px;
	min-height: 400px;
	border: 2px solid #444;
	padding: 8px;
}
button {
	padding: 12px;
	border: 2px solid #444;
	background: #222;
	color: #ccc;
}

JavaScript

const $input = document.querySelector(".js-input");
const $output = document.querySelector(".js-output");
const $btn = document.querySelector(".js-submit");



function transform(){
	let value = $input.value;
	value = JSON.stringify(value, null, 2);
	$output.value = value;
}

$btn.addEventListener("click", transform);