index.html

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="80px" height="80px" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<h1>Ozark</h1>
<p>
  <h4>AWS Powered Multi-Input Generator and Manager for Westworld.</h4>
  Read, create, and update inputs for Alamo City Hacks with this serverless application.
</p>
<br />
<h2>Ozark URL Generator</h2>
<br />
<label for="groupid">Group ID</label>
<input id="groupid" oninput="updateURL()"></input>
<br />
<label for="challenge">Challenge Number</label>
<input id="challenge" type="number" min="1" max="50" oninput="updateURL()"></input>
<br />
<a target="_blank" id="url"></a>
<script>
    let groupid = document.getElementById('groupid');
    let challenge = document.getElementById('challenge');
    let url = document.getElementById('url');
    function updateURL() {
        let urlHref = `https://${location.hostname}/api/input?${groupid.value != '' ? `groupid=${groupid.value}` : ''}${challenge.value != '' ? `&challenge=${challenge.value}` : ''}`;
        url.innerHTML = urlHref;
        url.href = urlHref;
    }
</script>