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;
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,64 +49,70 @@
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">
<label for="yamlContent"></label><textarea id="yamlContent" rows="10"></textarea><br>
<button class="button" onclick="loadData()">Reload Data</button>
<button class="button" onclick="saveData()">Save Data</button>
<div id="statusMessage"></div>
</div>
<script>
function displayStatus(message) {
document.getElementById('statusMessage').textContent = message;
}
<div class="container" id="appContainer">
<label for="yamlContent"></label><textarea id="yamlContent" rows="10"></textarea><br>
<button class="button" onclick="loadData()">Reload Data</button>
<button class="button" onclick="saveData()">Save Data</button>
<div id="statusMessage"></div>
</div>
<script>
function displayStatus(message) {
document.getElementById('statusMessage').textContent = message;
}
async function loadData() {
try {
displayStatus('Loading data...');
const response = await fetch('/data');
if (!response.ok) {
displayStatus(`HTTP error! Status: ${response.status}`);
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('');
async function loadData() {
try {
displayStatus('Loading data...');
const response = await fetch('/data');
if (!response.ok) {
displayStatus(`HTTP error! Status: ${response.status}`);
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('');
}
}
function saveData() {
const content = document.getElementById('yamlContent').value;
displayStatus('Saving data...');
fetch('/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ text: content }),
function saveData() {
const content = document.getElementById('yamlContent').value;
displayStatus('Saving data...');
fetch('/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
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 => {
alert(data);
displayStatus('');
})
.catch(error => {
console.error('Error:', error);
displayStatus('Failed to save data.');
});
}
.then(data => {
alert(data);
displayStatus('');
})
.catch(error => {
console.error('Error:', error);
displayStatus('Failed to save data.');
});
}
loadData();
</script>
loadData();
</script>
</body>
</html>