Item Tracker Add-On

javascript:(function() {
    let data = JSON.parse(localStorage["data"]);
    var div = document.createElement('div');
    div.style.cssText = 'color:black;position:absolute;top:50px;left:5px;padding:10px;border: 1px solid white;z-index:99;background-color:white';
    var input = document.createElement('input');
    input.id = 'myInput';
    input.placeholder = 'item name';
    input.style.cssText = 'width:150px';
    var selectHero = document.createElement('select');
    var selectType = document.createElement('select');
    var heroArray = ['all','ana','bastion','dva','doomfist','genji','hanzo','junkrat','lucio','mccree','mei','mercy','orisa','pharah','reaper','reinhardt','roadhog','soldier-76','sombra','symmetra','torbjorn','tracer','widowmaker','winston','zarya','zenyatta'];
    var itemType = ['skins','emotes','intros','sprays','voicelines','poses','icons'];
    for (he in heroArray) {
        let opt = document.createElement("option");
        opt.innerHTML = heroArray[he];
        selectHero.appendChild(opt);
    }
    for (it in itemType) {
        let opt = document.createElement("option");
        opt.innerHTML = itemType[it];
        selectType.appendChild(opt);
    }
    var submit = document.createElement('input');
    submit.setAttribute('type','submit');
    submit.value = "Add Item";
    function shorten(s) {
        let specialChars = /[\.\?!;:@#\$%&\+\-\(\)"']/g;
        let sNew = s.toLowerCase().trim().replace(specialChars,"").replace(/[àáâãäå]/g,"a").replace(/ç/g,'c').replace(/[éë]/g,'e').replace(/ï/g,'i').replace(/ñ/g,'n').replace(/[óôö]/g,'o').replace(/[úü]/g,'u').replace(/\^o\^/g,"excited").replace(/>_</g,"frustration").replace(/\^_\^/g,"joy").replace(/\s/g,"-");
        return sNew;
    }
    function msg(str) {
        var success = document.createElement("p");
        success.style.cssText = 'width:auto;height:auto';
        success.innerHTML = str;
        div.appendChild(success);
        window.setTimeout(function() {
            success.parentNode.removeChild(success);
        }, 2000);
    }
    submit.onclick = function() {
        let h = selectHero.options[selectHero.selectedIndex].text;
        let t = selectType.options[selectType.selectedIndex].text;
        let na = shorten(input.value);
        let nb = h == "all" ? na : `${h}-${na}`;
        data[h][t][nb] = true;
        localStorage['data'] = JSON.stringify(data);
        msg("Item added.");
    };
    div.appendChild(selectHero);
    div.appendChild(selectType);
    div.appendChild(input);
    div.appendChild(submit);
    document.body.appendChild(div);
})
();