JSFiddle - React, Tailwind, and code Playground

by cchana

HTML

<div id="output"></div>

CSS

#output {
    border: 1px solid black;
    padding: 10px;
}

JavaScript

// on any keypress (is this a good idea?!)
window.addEventListener("keypress", function(e) {
    // quickly reference the div
    var box = document.getElementById('output');
    // if the letter is not a capital S
	if(e.charCode !== 205) {
        // change the border color to red
    	box.style.borderColor = '#F00';
	} else {
        // check that the alt and shift keys have also been pressed
        if(e.altKey === true && e.shiftKey === true && e.ctrlKey === false) {
	        // change the border color to green
    	    box.style.borderColor = '#0F0';
        }
    }
});