JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <h2>First Non Repeated Char</h2>
    <label for="input_string">Enter String</label>
    <input type="text" name="input_string" id="input_string" />
    
    <input type="button" value="Find" onclick="findFirstNonRepeatedChar('input_string')" />
</div>

CSS

h2{
    font: bold 16px/22px arial,sans-serif;
}
label{
    font:bold 13px/18px arial,sans-serif;
}

JavaScript

function findFirstNonRepeatedChar(input_string) {
    
    var str = document.getElementById(input_string).value;
    if(str.length == 0) { alert('Empty String'); return; }
    var hash = [];
    var atleast_one_found = false;
    var string_chars = Array.prototype.slice.apply(str);

    for(var i in string_chars) {
        if(typeof(hash[string_chars[i]]) != "undefined") {
            hash[string_chars[i]]++;
            atleast_one_found = true;
        } else {
            hash[string_chars[i]] = 0;
        }        
    }
    if (atleast_one_found) {
    for (var j in hash) {
        if(hash[j] == 0) {
            alert('First non repeated char found => '+ j);
            return;
        }
    }
    }
    alert('No non-repeated char found');    
}