Published
Edited
Jul 8, 2021
Insert cell
Insert cell
fetch("https://httpbin.org/basic-auth/user/passwd", {
headers: new Headers({
"Authorization": `Basic ${base64.encode(`${login}:${password}`)}`
}),
}).then(response => {
if (!response.ok) throw new Error(response.status);
return response.json();
})
Insert cell
viewof login = submit({value: "user"})
Insert cell
Insert cell
function submit({value = "", placeholder = "Type here, then click submit."} = {}) {
const form = html`<form>
<input name="text">
<button type=submit>Submit</button>
</form>`;
form.text.value = form.value = value;
form.text.placeholder = placeholder;
form.text.addEventListener("input", event => event.stopPropagation());
form.addEventListener("submit", event => {
form.value = form.text.value;
form.dispatchEvent(new CustomEvent("input"));
event.preventDefault();
});
return form;
}
Insert cell
function submit_hidden({value = "", placeholder = "Type here, then click submit."} = {}) {
const form = html`<form>
<input type=password name="text">
<button type=submit>Submit</button>
</form>`;
form.text.value = form.value = value;
form.text.placeholder = placeholder;
form.text.addEventListener("input", event => event.stopPropagation());
form.addEventListener("submit", event => {
form.value = form.text.value;
form.dispatchEvent(new CustomEvent("input"));
event.preventDefault();
});
return form;
}
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more