It sets a animated transform that rotates the element 360 degrees. It applies that animation to the .spinner class infinately every 0.6 seconds.
The .spinner class has a border at its top, and it's 20px square. It's placed in the centre and it has a margin half it's width and height to centre it. It has a border-radius to make it round. It has a border-box sizing to stop the margin and padding enlarging the box.
However, the JSON data did not change during user input. There was no user input! We can change that simply. Let's change our HTML so we have user input first:
div("display: flex; flex-direction: column; align-items: flex-start;",
input(["placeholder", "search for something"]),
button(text("search for UK constituency"),
["click", ...]
),
)
The HTML is simple enough: We're making a column flex box and putting a input and button elements. I've left the click method empty. But we will grab the event object, use its target object and grab the data from input and send it to fetchData:
["click", e => fetchData(e.target.previousSibling.value)]
(The good thing about this is that with javascript genereated HTML you don't have to worry about a blank space changing the DOM.)
The fetch data method now takes an argument and we pass that to the fetch using a template literal:
function fetchData(inputText) {
sensibleFetch(`https://newfivefour.com:3000/name?name=${inputText}`)
.then(json => {
var list = json.map(place => place.name)
dynSet("change_it", list)
})
.catch(e => console.log("A bad request!", e))
}
Now it's time to turn on and off that error from our fetchData function, where we turn on and off this new dyn function.
function fetchData(inputText) {
dynSet("loading", true)
dynSet("error", "")
sensibleFetch(`https://newfivefour.com:3000/name?name=${inputText}`)
.then(json => {
dynSet("loading", false)
var list = json.map(place => place.name)
dynSet("change_it", list)
})
.catch(e => {
dynSet("loading", false)
dynSet("error", e)
console.log("A bad request!", e)
})
}
Now press search when there's nothing in the input box and my NodeJS server will serve you up a 400 response.
Now we have dynamic DOM updates, remote data fetches, an animated loading button on remote data fetch, an error dialogue and some very simple new "tags".
The fetchData method is getting a bit out of hand, but we can come to that later.