<div class="poll-card">
<h3>What is your favorite framework?</h3>
<div class="poll-options">
<div class="option" onclick="vote(this, 65)">
<span class="label">React</span>
<span class="percent">65%</span>
<div class="progress" style="--w:65%"></div>
</div>
<div class="option" onclick="vote(this, 20)">
<span class="label">Vue</span>
<span class="percent">20%</span>
<div class="progress" style="--w:20%"></div>
</div>
<div class="option" onclick="vote(this, 10)">
<span class="label">Angular</span>
<span class="percent">10%</span>
<div class="progress" style="--w:10%"></div>
</div>
<div class="option" onclick="vote(this, 5)">
<span class="label">Svelte</span>
<span class="percent">5%</span>
<div class="progress" style="--w:5%"></div>
</div>
</div>
</div>
.poll-card {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: #fff;
padding: 25px;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
width: 350px;
margin: 0 auto;
}
.poll-card h3 {
margin: 0 0 20px 0;
color: #1f2937;
font-size: 1.2rem;
}
.option {
position: relative;
padding: 12px 15px;
border: 2px solid #e5e7eb;
border-radius: 8px;
margin-bottom: 12px;
cursor: pointer;
display: flex;
justify-content: space-between;
overflow: hidden;
transition: border-color 0.2s;
}
.option:hover {
border-color: #3b82f6;
background: #f9fafb;
}
.option.selected {
border-color: #3b82f6;
}
.label {
position: relative;
z-index: 2;
font-weight: 500;
color: #374151;
}
.percent {
position: relative;
z-index: 2;
font-weight: 700;
color: #1f2937;
display: none;
}
.progress {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background: #dbeafe;
z-index: 1;
transition: width 0.5s ease-out;
}
.poll-card.voted .percent {
display: block;
}
.poll-card.voted .option {
cursor: default;
pointer-events: none;
}
function vote(option, percent) {
const card = option.closest(".poll-card");
const options = card.querySelectorAll(".option");
// Prevent multiple votes
if (card.classList.contains("voted")) return;
card.classList.add("voted");
option.classList.add("selected");
options.forEach(opt => {
const bar = opt.querySelector(".progress");
const w = bar.style.getPropertyValue("--w");
bar.style.width = w;
});
}
