Isaak/cuori
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🎨✨ Handle submit button errors and update styles

Browse Source 
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.
This commit is contained in:
Isaak Buslovich 2023-12-22 01:24:45 +01:00
parent d673833335
commit 5d35eec1d8
Signed by: Isaak
GPG Key ID: EEC31D6437FBCC63
1 changed files with 61 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
index.html
View File

@ -14,6 +14,7 @@
padding: 20px; padding: 20px;
line-height: 1.6; line-height: 1.6;
} }
.container { .container {
max-width: 800px; max-width: 800px;
margin: auto; margin: auto;
@ -23,6 +24,7 @@
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
text-align: center; text-align: center;
} }
.button { .button {
background-color: #007bff; background-color: #007bff;
color: #fff; color: #fff;
@ -34,9 +36,11 @@
transition: background-color 0.3s; transition: background-color 0.3s;
font-weight: 500; font-weight: 500;
} }
.button:hover { .button:hover {
background-color: #0056b3; background-color: #0056b3;
} }
textarea { textarea {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
@ -45,64 +49,70 @@
margin-top: 10px; margin-top: 10px;
} }
</style> </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> </head>
<body> <body>
<div class="container" id="appContainer"> <div class="container" id="appContainer">
<label for="yamlContent"></label><textarea id="yamlContent" rows="10"></textarea><br> <label for="yamlContent"></label><textarea id="yamlContent" rows="10"></textarea><br>
<button class="button" onclick="loadData()">Reload Data</button> <button class="button" onclick="loadData()">Reload Data</button>
<button class="button" onclick="saveData()">Save Data</button> <button class="button" onclick="saveData()">Save Data</button>
<div id="statusMessage"></div> <div id="statusMessage"></div>
</div> </div>
<script> <script>
function displayStatus(message) { function displayStatus(message) {
document.getElementById('statusMessage').textContent = message; document.getElementById('statusMessage').textContent = message;
} }
async function loadData() { async function loadData() {
try { try {
displayStatus('Loading data...'); displayStatus('Loading data...');
const response = await fetch('/data'); const response = await fetch('/data');
if (!response.ok) { if (!response.ok) {
displayStatus(`HTTP error! Status: ${response.status}`); displayStatus(`HTTP error! Status: ${response.status}`);
return; return;
}
const data = await response.json();
if (typeof data !== 'object' || data === null || !('text' in data)) {
displayStatus('Invalid format in response data');
return;
}
document.getElementById('yamlContent').value = data.text || '';
} catch (error) {
console.error('Error loading data:', error);
displayStatus(`Failed to load data: ${error.message}`);
} finally {
displayStatus('');
} }
const data = await response.json();
if (typeof data !== 'object' || data === null || !('text' in data)) {
displayStatus('Invalid format in response data');
return;
}
document.getElementById('yamlContent').value = data.text || '';
} catch (error) {
console.error('Error loading data:', error);
displayStatus(`Failed to load data: ${error.message}`);
} finally {
displayStatus('');
} }
}
function saveData() { function saveData() {
const content = document.getElementById('yamlContent').value; const content = document.getElementById('yamlContent').value;
displayStatus('Saving data...'); displayStatus('Saving data...');
fetch('/data', { fetch('/data', {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
body: JSON.stringify({ text: content }), body: JSON.stringify({text: content}),
})
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.text();
}) })
.then(response => response.text()) .then(data => {
.then(data => { alert(data);
alert(data); displayStatus('');
displayStatus(''); })
}) .catch(error => {
.catch(error => { console.error('Error:', error);
console.error('Error:', error); displayStatus('Failed to save data.');
displayStatus('Failed to save data.'); });
}); }
}
loadData(); loadData();
</script> </script>
</body> </body>
</html> </html>