Published
Edited
Oct 7, 2019
Importers
2 stars
Also listed in…
UI
viewof form = {
// form_inputs.reset.onclick = function() {localStorage.removeItem(storage_key);};
const form_elements = setInputElements(form_inputs);
const form = html`
<style type="text/css">
.panel {
background-color: #ffffff;
display: grid;
grid-auto-rows: 100px;
padding: 10px;
text-align: center;
}
input[type=select] {
width: 110px;
margin: 1px;
}
input[type=range] {
width: 110px;
margin: 1px;
}
form {
width: 120px;
}
@media only screen and (max-width: 1000px) { .panel { grid-template-columns: 120px 120px 120px 120px 120px 120px 120px 120px; } }
@media only screen and (max-width: 600px) { .panel { grid-template-columns: 120px 120px 120px 120px } }
@media only screen and (max-width: 400px) { .panel { grid-template-columns: 120px 120px; } }
</style>
<div class="panel"> ${form_elements} </div>
`;
form.oninput = function() {
const result = {};
for (var i in form_elements) {
result[form_elements[i].id] = form_elements[i].value
}
form.value = result;
localStorage.setItem(storage_key, JSON.stringify(result));
}
form.oninput();
return form;
}
// grid-template-columns: 120px 120px 120px 120px 120px 120px 120px 120px ;
// @media only screen and (max-width: 1000px) { .panel { grid-template-columns: auto; auto; } }
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.
