<html>
<body>
<form>
<input type="text" id="name">
<button type="submit" id="submit">Submit</button>
</form>
</body>
</html>
body {
height: 100vh;
align-content: center;
}
form {
display: flex;
flex-direction: column;
margin: 0 auto;
width: 300px;
gap: 10px;
}
button {
color: grey;
}
button.ready {
background-color: blue;
color: white;
}
const input = document.getElementById("name");
const button = document.getElementById("submit");
input.addEventListener("keydown", (evt) => {
if (evt.target.value) {
// expensive call, like doing a typeahead search
renderSearch(evt.target.value);
button.classList.add("ready");
} else {
button.classList.remove("ready");
}
});
// This simulates doing something really slow.
function renderSearch() {
const el = document.createElement("div");
for (var i = 0; i <= 10000; i++) {
el.innerHTML = el.innerHTML + i;
}
return el;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.