Hello I have a website and it is currently running on a shared hosting package meaning I do not have the ability to run node.js on the server, however, I was wondering if I could use normal javascript to change a certain element on my page (Change a p element from Operational to Offline and it from green to red and back again when I receive the up command) I am using healthchecks.io to send either get or post requests to a URL when my monitor goes offline.
If I can't use receive requests from normal javascript how would I be able to change those tiny things on a website using something like Express? Whenever I look I just see the ability to serve static files or just Hello World or something. How could I serve an HTML file with all of its CSS and stuff while changing only one tiny thing?
Your question is very specific to your case and not in a wider context from which everyone could benefit.
The question you should ask for would be more like "how to update HTML code based on AJAX call" or something similar.
In any case I'll leave this answer here because I believe it can help you reach your goal.
I think theoretically what you are talking about are "ajax" (asynchronous JavaScript) requests.
You can use the callbacks from these requests, traditionally the "then" part to update your html code or update let's say CSS classes of an element.
Let's say you do something like :
fetch("http://example.com/movies.json")
.then((response) => response.json())
.then((data) => {
// you can console.log(data) here to see on the console, the structure of the received
// object from the API call
// this is just an example, based on the idea that the API would return a JSON object with
// a property named "online" which would be a boolean (true or false) value
if (data.online) { // if online is true add the CSS class "online"
document.getElementById("IdOfElementToUpdate").classList.add("online");
}else{ // if online is false or not there, remove the CSS class "online"
document.getElementById("IdOfElementToUpdate").classList.remove("online");
}
});
In this case you would have a default css style for the element (let's say for offline) , and then when the element gets added the class "online" you would have some CSS rules to override the default style.