JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<style type="text/css">
table.hodnoty {
font-size: 20px;
}
table.hodnoty > tbody > tr > td:nth-child(2) {
text-align: right;
}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
</style>
<body style="background-color: #f9e79f ">
<center>
<div>
<h1>ESP8266 WEBSERVER</h1>
</div>
</center>
<br>
<div>
<table class="hodnoty">
<tr><td>Temp (°C): </td><td><span id="nahodnecislo">0</span></td></tr>
<tr><td>Vlhkost: </td><td><span id="nahodnecislo">0</span></td></tr>
<tr><td>Hustota vody: </td><td><span id="nahodnecislo">0</span></td></tr>
</table>
</div>
<script>
setInterval(function()
{
getData();
}, 2000);
function getData() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("nahodnecislo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "adcread", true);
xhttp.send();
}
</script>
</body>
</html>