JSFiddle - React, Tailwind, and code Playground

by mehulkar

HTML

<div some-attr>Hello</div>
<div some-attr-with-val="1">Hello</div>

JavaScript

function read(selector, message) {
	let read;
	try {
  	read = document.querySelector(selector).textContent.trim();
  } catch(e) {
		read = 'COULD NOT GET ELEMENT'
	}
	
	window.alert(`${message}: ${read}`);
}

// Good, semantic selectors
read('[some-attr]', 'some-attr, good');
read('[some-attr-with-val="1"]', 'some-attr-with-val, good');

// Bad, unclosed selectors
read('[some-attr', 'some-attr, bad');
read('[some-attr-with-val="1', 'some-attr-with-val, bad');