deltreey/pun-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

add some styling via bulma
All checks were successful
Build access-web-migration / Build-And-Push (push) Successful in 15s
Details

Browse Source
This commit is contained in:
Edward Coderman
2024-04-22 15:06:49 -05:00
parent 680ee11e04
commit 93a9b6eca8
2 changed files with 37 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
views/index.hbs
View File

@@ -1,23 +1,36 @@
<h1>{{title}}</h1>
<p>Welcome to {{title}}</p>
<button id="btn-pun">Pun Me!</button>
<p id="pun"></p>
<input type="text" id="rhyme-word" />
<button id="btn-rhyme">Rhyme It!</button>
<p id="rhymes"></p>
<script>
document.querySelector('#btn-pun').addEventListener('click', () => {
fetch('/pun').then(response => response.text()).then(text => {
let textTag = document.querySelector('#pun');
textTag.innerHTML = text;
<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;
fetch('/pun/query?word=' + encodeURIComponent(word)).then(response => response.json()).then(json => {
let textTag = document.querySelector('#rhymes');
textTag.innerHTML = json.join('</br>');
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/>');
});
});
});
</script>
document.querySelector('#rhyme-word').addEventListener('keypress', (event) => {
if (event.key === 'Enter') {
event.preventDefault();
document.querySelector('#btn-rhyme').click();
}
})
</script>
</div>

4
views/layout.hbs
View File

@@ -2,9 +2,13 @@
<html>
<head>
<title>{{title}}</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
<link rel='stylesheet' href='/stylesheets/style.css' />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<section class="section">
{{{body}}}
</section>
</body>
</html>