diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 78 |
1 files changed, 36 insertions, 42 deletions
@@ -6,7 +6,7 @@ #margin-top: 0; #margin-bottom: 0; } - label.number { + label.number, label.text { margin-right: 1rem; } label.multi-label { @@ -29,6 +29,9 @@ input[type="range"] { width: 60%; } + input[type="text"] { + height: 3rem; + } .prompt { margin-bottom: 2rem; } @@ -72,47 +75,36 @@ }) root_el.appendChild(wrapper_el) } - function insert_number(prompt, prompt_id){ + function insert_input(prompt, prompt_id, class_name, type){ let root_el = document.getElementById("prompts") let wrapper_el = document.createElement("div") wrapper_el.setAttribute("class", "prompt") let item_label = document.createElement("label") item_label.setAttribute("for", prompt_id) - item_label.setAttribute("class", "number") + item_label.setAttribute("class", class_name) item_label.innerHTML = prompt let input_el = document.createElement("input") input_el.setAttribute("id", prompt_id) - input_el.setAttribute("type", "number") + input_el.setAttribute("type", type) wrapper_el.appendChild(item_label) wrapper_el.appendChild(input_el) root_el.appendChild(wrapper_el) + + return input_el + } + function insert_number(prompt, prompt_id){ + insert_input(prompt, prompt_id, "number", "number") + } + function insert_text(prompt, prompt_id){ + insert_input(prompt, prompt_id, "text", "text") } function insert_range(prompt, prompt_id, min, max){ - let root_el = document.getElementById("prompts") - let wrapper_el = document.createElement("div") - wrapper_el.setAttribute("class", "prompt") - - let item_label = document.createElement("label") - item_label.setAttribute("for", prompt_id) - item_label.setAttribute("class", "number") - item_label.innerHTML = prompt - - let checkbox_el = document.createElement("input") - checkbox_el.setAttribute("id", prompt_id+"_checkbox") - checkbox_el.setAttribute("type", "checkbox") - - let input_el = document.createElement("input") - input_el.setAttribute("id", prompt_id) - input_el.setAttribute("type", "range") + let input_el = insert_input(prompt, prompt_id, "number", "range") input_el.setAttribute("min", min) input_el.setAttribute("max", max) input_el.setAttribute("value", Math.floor((max+min)/2)) - wrapper_el.appendChild(item_label) - wrapper_el.appendChild(checkbox_el) - wrapper_el.appendChild(input_el) - root_el.appendChild(wrapper_el) } function insert_textarea(prompt, prompt_id){ let root_el = document.getElementById("prompts") @@ -219,25 +211,27 @@ } window.onload = function(){ fetch("/forms").then(res => res.json()).then(data => { - data.forEach(form => { - switch(form["type"]) { - case "multiple_select": - insert_multiple_select(form["prompt"], form["prompt_id"], form["extra"]) - break; - case "number": - insert_number(form["prompt"], form["prompt_id"]) - break; - case "range": - insert_range( - form["prompt"], form["prompt_id"], form["extra"]["min"], form["extra"]["max"]) - break; - case "textarea": - insert_textarea(form["prompt"], form["prompt_id"]) - break; - } - }) + data.forEach(form => { + switch(form["type"]) { + case "multiple_select": + insert_multiple_select(form["prompt"], form["prompt_id"], form["extra"]) + break; + case "number": + insert_number(form["prompt"], form["prompt_id"]) + break; + case "range": + insert_range( + form["prompt"], form["prompt_id"], form["extra"]["min"], form["extra"]["max"]) + break; + case "textarea": + insert_textarea(form["prompt"], form["prompt_id"]) + break; + case "text": + insert_text(form["prompt"], form["prompt_id"]) + break; + } + }) }) - fetch("/books").then(res => res.json()).then(data => { data.forEach(book => insert_book(book)) }) |