JSFiddle - React, Tailwind, and code Playground

HTML

<input placeholder="KEY AND CODE" id="keyAndCode">
<input placeholder="KEY ONLY" id="keyOnly">

<div id="log">

</div>

CSS

input {
  margin: 10px;
  margin-left: 0;
  padding: 5px;
}

#log {
  border: 1px solid #aaa;
  padding: 10px;
}

JavaScript

document.getElementById('keyAndCode').addEventListener('keydown', (event) => {
	console.log('asdsd');
  
	const key = event.key?.toUpperCase()
	if (key === ',' || event.keyCode === 188) {
  		log('KEY OR CODE');
  }
});

document.getElementById('keyOnly').addEventListener('keydown', (event) => {
	console.log('asdsd');
  
	const key = event.key?.toUpperCase()
	if (key === ',') {
  		log('KEY ONLY');
  }
});

function log(text) {
	let p = document.createElement("p");
	p.innerText = text;
  
	document.getElementById('log').appendChild(p)
}