index.html 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Hello World</title>
  7. <style>
  8. body {
  9. display: flex;
  10. justify-content: center;
  11. align-items: center;
  12. height: 100vh;
  13. margin: 0;
  14. font-family: Arial, sans-serif;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <div>
  20. <form id="myForm">
  21. <input type="text" id="myInput" placeholder="Enter text">
  22. <button type="submit">Send</button>
  23. </form>
  24. <p id="response">Enter a name in the input box and click send</p>
  25. </div>
  26. <script>
  27. document.getElementById('myForm').addEventListener('submit', function(event) {
  28. event.preventDefault();
  29. var inputValue = document.getElementById('myInput').value;
  30. fetch('/api/hello?name=' + encodeURIComponent(inputValue))
  31. .then(response => response.text())
  32. .then(data => {
  33. document.getElementById('response').innerText = data;
  34. })
  35. .catch(error => {
  36. console.error('Error:', error);
  37. });
  38. });
  39. </script>
  40. </body>
  41. </html>