prof3ssorSt3v3/uppercase-text.html

## uppercase-text.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Automatic Conversion to Uppercase</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <header>
        <h1>Converting Text as you Type</h1>
    </header>
    <main>
        <input type="text" id="txt" style="font-size: 30px" />
    </main>
    <script>
        document.addEventListener('DOMContentLoaded', function(){
            let txt = document.getElementById('txt');
            //txt.addEventListener('keydown', upThing);
            //1st - no charcode. no input value added yet

            //txt.addEventListener('keypress', upThing);
            //2nd - charcode. no input value added yet

            //txt.addEventListener('keyup', upThing);
            //3rd - no charcode. input value added

            txt.addEventListener('input', upThing);
            //4th - no charcode but input value accessible/mutable
        });

        function upThing(ev){
            let num = ev.charCode;
            let letter = String.fromCharCode(num);
            console.log(ev.type, num, letter, ev.target.value);
            ev.target.value = ev.target.value.toUpperCase();
        }
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Automatic Conversion to Uppercase</title>
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="main.css">
	</head>
	<body>
	<header>
	<h1>Converting Text as you Type</h1>
	</header>
	<main>
	<input type="text" id="txt" style="font-size: 30px" />
	</main>
	<script>
	document.addEventListener('DOMContentLoaded', function(){
	let txt = document.getElementById('txt');
	//txt.addEventListener('keydown', upThing);
	//1st - no charcode. no input value added yet

	//txt.addEventListener('keypress', upThing);
	//2nd - charcode. no input value added yet

	//txt.addEventListener('keyup', upThing);
	//3rd - no charcode. input value added

	txt.addEventListener('input', upThing);
	//4th - no charcode but input value accessible/mutable
	});

	function upThing(ev){
	let num = ev.charCode;
	let letter = String.fromCharCode(num);
	console.log(ev.type, num, letter, ev.target.value);
	ev.target.value = ev.target.value.toUpperCase();
	}
	</script>
	</body>
	</html>