<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Family Gift Exchange Draw</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<style>
body {
font-family: system-ui,
-apple-system, BlinkMacSystemFont, "Segoe
UI", sans-serif;
margin: 0;
padding: 0;
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.card {
background: #ffffff;
padding: 24px 20px;
max-width: 420px;
width: 100%;
box-shadow: 0 4px 14px rgba(0,
0, 0, 0.12);
border-radius: 12px;
text-align: center;
}
h1 {
font-size: 1.4rem;
margin-bottom: 0.25rem;
}
.subtitle {
color: #666;
font-size: 0.95rem;
margin-bottom: 1.25rem;
}
select {
width: 100%;
padding: 12px;
font-size: 1rem;
border-radius: 8px;
border: 1px solid #ccc;
}
button {
display: inline-block;
margin-top: 1rem;
padding: 14px 18px;
font-size: 1.05rem;
border-radius: 999px;
border: none;
cursor: pointer;
background: #007bff;
color: #fff;
font-weight: 600;
width: 100%;
}
button:active
{
transform: scale(0.98);
}
.result {
margin-top: 1.5rem;
font-size: 1.2rem;
font-weight: 600;
display: none;
}
.error {
color: #b00020;
font-weight: 500;
margin-top: 1rem;
display: none;
}
</style>
</head>
<body>
<div class="card">
<h1>Gift Exchange Draw</h1>
<div class="subtitle">Choose
your name and tap reveal.</div>
<select id="nameSelect">
<option value="">--
Select Your Name --</option>
<option
value="kelly">Kelly</option>
<option
value="matt">Matt</option>
<option
value="nana">Nana</option>
<option
value="pa">Pa</option>
<option value="jovanna">Jovanna</option>
<option
value="sara">Sara</option>
<option value="michelle">Michelle</option>
<option value="emma">Emma</option>
<option value="taylor">Taylor</option>
<option
value="mason">Mason</option>
<option value="maggie">Maggie</option>
<option value="carlos">Carlos</option>
</select>
<button id="revealBtn">Reveal
My Person</button>
<div id="result"
class="result"></div>
<div id="error"
class="error"></div>
</div>
<script>
const people = {
kelly: { label:
"Kelly", givesTo: "Emma" },
matt: { label:
"Matt", givesTo: "Carlos" },
nana: { label:
"Nana", givesTo: "Taylor" },
pa: { label:
"Pa", givesTo: "Michelle" },
jovanna: { label: "Jovanna", givesTo:
"Mason" },
sara: { label:
"Sara", givesTo: "Maggie" },
michelle: { label: "Michelle", givesTo:
"Kelly" },
emma: { label: "Emma", givesTo:
"Pa" },
taylor: { label: "Taylor", givesTo:
"Jovanna" },
mason: { label:
"Mason", givesTo: "Nana" },
maggie: { label: "Maggie", givesTo:
"Sara" },
carlos: { label: "Carlos", givesTo:
"Matt" }
};
const select = document.getElementById("nameSelect");
const resultDiv = document.getElementById("result");
const errorDiv = document.getElementById("error");
const revealBtn = document.getElementById("revealBtn");
revealBtn.addEventListener("click",
() => {
const key = select.value;
resultDiv.style.display
= "none";
errorDiv.style.display
= "none";
if (!key || !people[key]) {
errorDiv.textContent
= "Please select your name first.";
errorDiv.style.display = "block";
return;
}
resultDiv.textContent
= `You are buying a gift for: ${people[key].givesTo}`;
resultDiv.style.display
= "block";
});
</script>
</body>
</html>