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

29
views/index.hbs
View File

@@ -1,10 +1,11 @@
<h1>{{title}}</h1> <div class="content">
<p>Welcome to {{title}}</p> <h1 class="title">{{title}}</h1>
<button id="btn-pun">Pun Me!</button> <p class="subtitle">Welcome to {{title}}</p>
<p id="pun"></p> <button id="btn-pun" class="button">Pun Me!</button></div><br/>
<input type="text" id="rhyme-word" /> <div class="box" id="pun"></div><br/>
<button id="btn-rhyme">Rhyme It!</button> <input class="field input is-primary" type="text" placeholder="Word to Rhyme" id="rhyme-word" /><br/>
<p id="rhymes"></p> <button id="btn-rhyme" class="button">Rhyme It!</button><br/><br/>
<div class="box" id="rhymes"></div>
<script> <script>
document.querySelector('#btn-pun').addEventListener('click', () => { document.querySelector('#btn-pun').addEventListener('click', () => {
fetch('/pun').then(response => response.text()).then(text => { fetch('/pun').then(response => response.text()).then(text => {
@@ -15,9 +16,21 @@
document.querySelector('#btn-rhyme').addEventListener('click', () => { document.querySelector('#btn-rhyme').addEventListener('click', () => {
let word = document.querySelector('#rhyme-word').value; 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 => { fetch('/pun/query?word=' + encodeURIComponent(word)).then(response => response.json()).then(json => {
let textTag = document.querySelector('#rhymes'); let textTag = document.querySelector('#rhymes');
textTag.innerHTML = json.join('</br>'); textTag.innerHTML = json.join('<br/>');
}); });
}); });
document.querySelector('#rhyme-word').addEventListener('keypress', (event) => {
if (event.key === 'Enter') {
event.preventDefault();
document.querySelector('#btn-rhyme').click();
}
})
</script> </script>
</div>

4
views/layout.hbs
View File

@@ -2,9 +2,13 @@
<html> <html>
<head> <head>
<title>{{title}}</title> <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' /> <link rel='stylesheet' href='/stylesheets/style.css' />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body> <body>
<section class="section">
{{{body}}} {{{body}}}
</section>
</body> </body>
</html> </html>