JSFiddle - React, Tailwind, and code Playground

by Miguel Roman

HTML

<ul id="samples">
<li><a href="http://localhost:3000/test/url">http://localhost:3000/test/url</a></li>
<li><a href="http://not-mobile.admin.dev.notawadserver.net/test/url">http://not-mobile.admin.dev.notawadserver.net/test/url</a></li>
<li><a href="http://not-mobile.admin.qa.notawadserver.net/test/url">http://not-mobile.admin.qa.notawadserver.net/test/url</a></li>
<li><a href="http://not-mobile.admin.notawadserver.net/test/url">http://not-mobile.admin.notawadserver.net/test/url</a></li>
</ul>

<form id="form">
<div>

<label>
  <span>Enter hostname</span>
  <input type="text" value="" id="hostname" />
</label>

</div>

<div>
<button type="submit">Get Environment Name</button>
</div>

</form>

TypeScript

/*function getEnvironment(hostname) {
		const environments = ['local', 'dev', 'qa', 'prod'];
    const [local, dev, qa, prod] = environments;

    if (isLocal(hostname)) {
        return local;
    }
    
    for (let environmentName of environments) {
    	if (isEnvironmment(environmentName)) {
      	return environmentName;
      }
    }
    
    return prod;
    
    function isLocal(hostname){
        return /^localhost:[0-9]+$/i.test(hostname)
    }

    function isEnvironment(environment, hostname) {
        return new RegExp(`\\.${environment}\\.`, 'i').test(hostname);
    }

}
*/
const form = document.getElementById('form');
const input = document.getElementById('hostname');
const sampleLinks = document.querySelectorAll('#samples > li > a');

for (let i = 0; i < sampleLinks.length; i++) {
	sampleLinks[i].addEventListener('click', e => {
  	e.preventDefault();
    input.value = e.target.href;
  });
}

form.addEventListener('submit', e => {
	e.preventDefault();
  
});


console.log('test', form, input, sampleLinks);