JSFiddle - React, Tailwind, and code Playground

by Felype Rennan

HTML

<div class="container">

<input id="in" />

<button id="bt">
Gerar
</button>

</div>

<div id="out">

</div>

SCSS

body {
  margin: 0;
  font-family: 'Segoe UI', 'Verdana', sans-serif;
}

.container {
  display:flex;
  width: 100%;
  > * {
    display: block;
  }
}

#in {
  padding: 12px;
  margin: 0;
  width: 80%;
}
#bt {  
  padding: 12px;
  margin: 0;
  width: 20%;
  border: 1px solid rgba(0,0,0,0.4);
  background: hsl(150, 80, 40);
  color: white;
}
#out {
  padding: 12px;
}

JavaScript

const getAnagrams = (str) => {
    if(str.length === 1) {
        return [str];
    }
    let anagrams = [];
    for(let i = 0; i < str.length; i++) {
        let newStr = Array.from(str).filter(Boolean);
        let thisChar = newStr.splice(i, 1);
        newStr = newStr.join('');
        const subAnagrams = getAnagrams(newStr);
        subAnagrams.forEach(anagram=> {
            anagrams.push(thisChar + anagram);
        })
    }
    
    return Array.from(new Set(anagrams));
};

/*



-----



*/
document.getElementById('bt').addEventListener('click', (evt)=> {
	document.getElementById('out').innerHTML = getAnagrams(document.getElementById('in').value).join(', ');
});