Go to Mastodon page

by Ben Gillbanks

HTML

<form>
<input id="address" />
</form>
<div id="linkWrapper"></div>

CSS

a,
input { 
    display: block;
    padding: 10px; 
}

JavaScript

(function(){

    const createLink = function( e ) {
        let value = e.target.value.trim();
        if ( '@' === value[0] ) {
        	value = value.substring(1);
        }
        const urlParts = value.split('@');
        const url = `https://${urlParts[1]}/@${urlParts[0]}`;
        
        document.getElementById('linkWrapper').innerHTML = `<a href="${url}">Visit ${urlParts[0]} &rarr;</a>`;
    }

    const input = document.getElementById('address');
    input.addEventListener('keyup', createLink);

})()