79 lines
2.1 KiB
JavaScript
79 lines
2.1 KiB
JavaScript
let partySize = 0;
|
|
|
|
function createNewMember(id) {
|
|
const memberDiv = document.createElement("div");
|
|
memberDiv.classList.add("member");
|
|
|
|
const innerDiv = document.createElement("div");
|
|
|
|
const nameP = document.createElement("p");
|
|
|
|
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;
|
|
|
|
nameP.appendChild(nameLabel);
|
|
nameP.appendChild(nameInput);
|
|
|
|
const childP = document.createElement("p");
|
|
|
|
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}`;
|
|
|
|
childP.appendChild(childLabel);
|
|
childP.appendChild(childInput);
|
|
|
|
innerDiv.appendChild(nameP);
|
|
innerDiv.appendChild(childP);
|
|
|
|
const dietP = 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}`;
|
|
|
|
dietP.appendChild(dietLabel);
|
|
dietP.appendChild(dietInput);
|
|
|
|
memberDiv.appendChild(innerDiv);
|
|
memberDiv.appendChild(dietP);
|
|
|
|
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);
|
|
};
|