Webleb - UI Elements - Multiple Choice

HTML

CSS

@import url("https://cdn.jsdelivr.net/npm/primeicons@7.0.0/primeicons.css");
@import url("https://fonts.googleapis.com/css2?family=Doto:wght@100..900&display=swap");

:root {
	--col-a: #f4f1de; /* white */
	--col-b: #e07a5f; /* orange	 */
	--col-c: #3d405b; /* purple	 */
	--col-d: #81b29a; /* green	 */
	--col-e: #f2cc8f; /* yellow	 */
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: var(--col-d);
	background-image: linear-gradient(
		var(--col-d) 0%,
		var(--col-d) 80%,
		var(--col-e) 80%
	);
}
body,
button {
	font-family: "Doto", serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
	font-variation-settings: "ROND" 100;
}

section {
	position: relative;
	border: 10px solid var(--col-c);
	width: 200px;
	aspect-ratio: 0.5;
	display: flex;
	place-items: center;
	place-content: center;
	border-radius: 1.5em;
	background-image: linear-gradient(
		var(--col-e) 0%,
		var(--col-e) 80%,
		var(--col-b) 80%
	);
}

.food-icon {
	position: absolute;
	top: -2em;
	background: var(--col-c);
	border-radius: 50%;
}
.food-icon svg {
	fill: var(--col-d);
	font-size: 3em;
}
fieldset {
	display: flex;
	height: 50%;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	/* 	max-width: 100%; */
	place-items: center;
	place-content: center;
}

fieldset input {
	flex: 10%;
}

fieldset label {
	/* 	flex: 0 25%; */
	flex: 80%;
	padding-left: 0.5rem;
	border-bottom: 1px dashed gray;
	text-transform: capitalize;
}

button {
	background: var(--col-b);
	color: var(--col-a);
	border: none;
	padding: 0.75em 1.5em;
	border-radius: 0.3em;
	cursor: pointer;
	transition: background 0.3s;
	margin: 0.5rem;
}
button:hover {
	background: var(--col-c);
}

#next {
	position: absolute;
	bottom: 2.5em;
	right: 0;
}
#back {
	position: absolute;
	bottom: 2.5em;
	left: 0;
}
#total-price {
	position: absolute;
	top: 1.5em;
	left: 0;
	text-align: center;
	width: 100%;
}
fieldset input[type="radio"],
fieldset input[type="checkbox"] {
	display: none;
}

fieldset input:checked + label {
	background: var(--col-b);
	color: var(--col-a);
	font-weight: bold;
}

JS

const base_noodle_price = 1.25;
const option_1 = [
	["ramen", base_noodle_price],
	["harusame", base_noodle_price],
	["udon", base_noodle_price],
	["shirataki", base_noodle_price + 0.45]
];

const option_2 = [
	["chicken", 2.0],
	["beef", 2.5],
	["tofu", 1.75],
	["shrimp", 3.0]
];

const option_3 = [
	["bok choy", 1.0],
	["mushrooms", 1.25],
	["bean sprouts", 0.75],
	["carrots", 0.5]
];

const option_4 = [
	["miso broth", 1.5],
	["tonkotsu broth", 2.0],
	["shoyu broth", 1.75],
	["spicy miso", 2.25]
];

const option_5 = [
	// Garnish
	["green onions", 0.5],
	["sesame seeds", 0.5],
	["seaweed", 1.0],
	["soft-boiled egg", 1.5]
];
const options = [
	{ label: "Choose Your Noodles", choices: option_1, multi: true },
	{ label: "Choose Your Protein", choices: option_2, multi: true },
	{ label: "Choose Your Veggies", choices: option_3, multi: true },
	{ label: "Choose Your Sauce/Soup/Broth", choices: option_4, multi: false },
	{ label: "Choose Your Garnish", choices: option_5, multi: true }
];

let currentStep = 0;
let selectedOptions = {};
let totalPrice = 0;

const menu = document.getElementById("menu");
const priceDisplay = document.getElementById("total-price");
const nextBtn = document.getElementById("next");
const backBtn = document.getElementById("back");
const totalPriceComponent = document.getElementById("total-price");

function updateButtons() {
	backBtn.style.display = currentStep > 0 ? "inline-block" : "none";
	nextBtn.textContent = currentStep < options.length - 1 ? "Next" : "Finish";
}

menu.addEventListener("change", (e) => {
	const { name, value, checked, dataset } = e.target;
	const price = parseFloat(dataset.price);

if (options[currentStep].multi) {
		if (!selectedOptions[name]) selectedOptions[name] = new Set();
		if (checked) {
			selectedOptions[name].add(value);
			updateTotalPrice(price);
		} else {
			selectedOptions[name].delete(value);
			updateTotalPrice(-1 * price);
		}
	} else {
		if (selectedOptions[name])
			totalPrice -= parseFloat(selectedOptions[name].price);
		selectedOptions[name] = { value, price };
		updateTotalPrice(price);
	}
	priceDisplay.textContent = `Total Price: $${totalPrice.toFixed(2)}`;
});
function updateTotalPrice(priceModifier) {
	totalPrice += priceModifier;
	totalPriceComponent.innerHtml = totalPrice;
}
nextBtn.addEventListener("click", () => {
	if (currentStep < options.length - 1) {
		currentStep++;
		updateMenu();
	} else {
		alert("Order Complete! Total: $" + totalPrice.toFixed(2));
	}
});

backBtn.addEventListener("click", () => {
	if (currentStep > 0) {
		currentStep--;
		updateMenu();
	}
});

updateMenu();

Multiple Choice

Recommended