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

24
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,16 +49,17 @@
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">
<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>
</div>
<script>
function displayStatus(message) {
document.getElementById('statusMessage').textContent = message;
}
@ -89,9 +94,14 @@
headers: {
'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 => {
alert(data);
displayStatus('');
@ -103,6 +113,6 @@
}
loadData();
</script>
</script>
</body>
</html>