🎨✨ Handle submit button errors and update styles

Enhanced the UI with improved padding, line-height, container box shadow, text alignment, and button hover effects. Integrated error handling for the submit button to display HTTP request errors effectively. Corrected script tag indentation.
2023-12-22 01:24:45 +01:00 · 2023-12-22 01:24:45 +01:00 · 5d35eec1d8
commit 5d35eec1d8
parent d673833335
1 changed files with 61 additions and 51 deletions
--- a/index.html
+++ b/index.html
@ -14,6 +14,7 @@
            padding: 20px;
            line-height: 1.6;
        }
+
        .container {
            max-width: 800px;
            margin: auto;
@ -23,6 +24,7 @@
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
+
        .button {
            background-color: #007bff;
            color: #fff;
@ -34,9 +36,11 @@
            transition: background-color 0.3s;
            font-weight: 500;
        }
+
        .button:hover {
            background-color: #0056b3;
        }
+
        textarea {
            width: 100%;
            padding: 10px;
@ -45,7 +49,8 @@
            margin-top: 10px;
        }
    </style>
-    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.2.7.nomodule.min.js"></script>
+    <script type="text/javascript"
+            src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.2.7.nomodule.min.js"></script>
 </head>
 <body>
 <div class="container" id="appContainer">
@ -91,7 +96,12 @@
            },
            body: JSON.stringify({text: content}),
        })
-                .then(response => response.text())
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+                return response.text();
+            })
            .then(data => {
                alert(data);
                displayStatus('');