<!DOCTYPE html>
<html>
  <body>
    
    Enter your name:
    <input type="text" id="fname" onblur="myFunction()">
  
    <p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>
  
    <script>
      function myFunction() {
        var x = document.getElementById("fname");
        x.value = x.value.toUpperCase();
      }
    </script>
    
  </body>
</html>
// Code goes here

/* Styles go here */