JSFiddle - React, Tailwind, and code Playground

by Chris Nicholson

HTML

<label>
    First Name
    <input id="FirstName" />
</label>

<br />

<label>
    Last Name
    <input id="LastName" />
</label>

<br />

<input type="button" id="format" value="Format Names">
    
<div id="output"></div>

JavaScript

$('#format').click(function(){ 
    var firstName = $('#FirstName').val();
    var lastName = $('#LastName').val();
    
    if (!/\s/.test(firstName)) {
        
        var isAllUpper = true;
        var isAllLower = true;
        
        var i = 0;
        
        while (i <= firstName.length) {
            var character = firstName.charAt(i);
            
            if (character == character.toUpperCase()) {
                isAllLower = false;
            }
            
            if (character == character.toLowerCase()) {
                isAllUpper = false;
            }
            
            i++;
        }
        
        if (isAllUpper || isAllLower) {
            firstName = firstName.charAt(0).toUpperCase() +  firstName.slice(1).toLowerCase();
        }
    }
    
    if (!/\s/.test(lastName)) {
        lastName = lastName.toLowerCase();
        lastName = lastName.charAt(0).toUpperCase() + lastName.slice(1);
    }
    
    $('#output').text(firstName + ' ' + lastName);
});