pun-app/views/index.hbs

<div class="content">
    <h1 class="title">{{title}}</h1>
    <p class="subtitle">Welcome to {{title}}</p>
    <button id="btn-pun" class="button">Pun Me!</button></div><br/>
    <div class="box" id="pun"></div><br/>
    <input class="field input is-primary" type="text" placeholder="Word to Rhyme" id="rhyme-word" /><br/>
    <button id="btn-rhyme" class="button">Rhyme It!</button><br/><br/>
    <div class="box" id="rhymes"></div>
    <script>
        document.querySelector('#btn-pun').addEventListener('click', () => {
            fetch('/pun').then(response => response.text()).then(text => {
                let textTag = document.querySelector('#pun');
                textTag.innerHTML = text;
            });
        });

        document.querySelector('#btn-rhyme').addEventListener('click', () => {
            let word = document.querySelector('#rhyme-word').value;
            if (!word) {
                alert('Please enter a word to rhyme.');
                return;
            }
            fetch('/pun/query?word=' + encodeURIComponent(word)).then(response => response.json()).then(json => {
                let textTag = document.querySelector('#rhymes');
                textTag.innerHTML = json.join('<br/>');
            });
        });

        document.querySelector('#rhyme-word').addEventListener('keypress', (event) => {
            if (event.key === 'Enter') {
                event.preventDefault();
                document.querySelector('#btn-rhyme').click();
            }
        })
    </script>
</div>