86 lines
2.4 KiB
JavaScript
86 lines
2.4 KiB
JavaScript
let partySize = 0;
|
|
|
|
function createNewMember(id) {
|
|
const memberDiv = document.createElement("div");
|
|
memberDiv.classList.add("member");
|
|
|
|
const nameDiv = document.createElement("div");
|
|
|
|
const nameLabel = document.createElement("label");
|
|
nameLabel.htmlFor = `name-${id}`;
|
|
nameLabel.innerHTML = "Name:";
|
|
|
|
const nameInput = document.createElement("input");
|
|
nameInput.type = "text";
|
|
nameInput.id = `name-${id}`;
|
|
nameInput.name = `name-${id}`;
|
|
nameInput.required = true;
|
|
nameInput.style = "width:0;flex:1;";
|
|
|
|
nameDiv.appendChild(nameLabel);
|
|
nameDiv.appendChild(nameInput);
|
|
|
|
const childDiv = document.createElement("div");
|
|
|
|
const childLabel = document.createElement("label");
|
|
childLabel.htmlFor = `child-${id}`;
|
|
childLabel.innerHTML = "Child:";
|
|
|
|
const childInput = document.createElement("input");
|
|
childInput.type = "checkbox";
|
|
childInput.id = `child-${id}`;
|
|
childInput.name = `child-${id}`;
|
|
childInput.style = 'font-size: 1rem';
|
|
|
|
const childInputDiv = document.createElement("div");
|
|
childInputDiv.classList.add("fill-right");
|
|
|
|
childInputDiv.appendChild(childInput);
|
|
|
|
childDiv.appendChild(childLabel);
|
|
childDiv.appendChild(childInputDiv);
|
|
|
|
const dietDiv = document.createElement("p");
|
|
|
|
const dietLabel = document.createElement("label");
|
|
dietLabel.htmlFor = `diet-${id}`;
|
|
dietLabel.innerHTML = "Dietary preferences:";
|
|
|
|
const dietInput = document.createElement("textarea");
|
|
dietInput.id = `diet-${id}`;
|
|
dietInput.name = `dietaryPreferences-${id}`;
|
|
|
|
dietDiv.appendChild(dietLabel);
|
|
dietDiv.appendChild(dietInput);
|
|
|
|
const separatorDiv = document.createElement("div");
|
|
separatorDiv.classList.add("separator");
|
|
|
|
memberDiv.appendChild(separatorDiv);
|
|
memberDiv.appendChild(nameDiv);
|
|
memberDiv.appendChild(childDiv)
|
|
memberDiv.appendChild(dietDiv);
|
|
|
|
document.querySelector("div.members").appendChild(memberDiv);
|
|
}
|
|
|
|
function updatePartySize(newPartySize) {
|
|
if (newPartySize > partySize) {
|
|
for (let i = partySize; i < newPartySize; i++) {
|
|
createNewMember(partySize);
|
|
}
|
|
} else if (newPartySize < partySize) {
|
|
for (let i = partySize; i > newPartySize; i--) {
|
|
document.querySelector("div.members").lastChild.remove();
|
|
}
|
|
}
|
|
partySize = newPartySize;
|
|
}
|
|
|
|
window.onload = function () {
|
|
const partySizeDropdown = document.querySelector("select#party-size");
|
|
partySizeDropdown.addEventListener("change", () => {
|
|
updatePartySize(Number.parseInt(partySizeDropdown.value));
|
|
});
|
|
updatePartySize(1);
|
|
};
|