Blogs

<!DOCTYPE html>
<html>
<head>
<style>
.poll-container {
max-width: 600px;
margin: 20px auto;
padding: 20px;
font-family: Arial, sans-serif;
}
.poll-option {
margin: 15px 0;
}
.vote-button {
padding: 8px 20px;
margin: 5px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
}
.bar-container {
width: 100%;
background-color: #f0f0f0;
border-radius: 4px;
margin-top: 5px;
}
.bar {
height: 25px;
background-color: #2196F3;
border-radius: 4px;
text-align: right;
padding-right: 5px;
color: white;
transition: width 0.5s ease-in-out;
}
</style>
</head>
<body>
<div class="poll-container" id="pollContainer"></div>
<script>

function createPoll(options) {
const container = document.getElementById('pollContainer');
let votes = new Array(options.length).fill(0);
let totalVotes = 0;
// Create poll elements
options.forEach((option, index) => {
const optionDiv = document.createElement('div');
optionDiv.className = 'poll-option';
// Create vote button
const button = document.createElement('button');
button.className = 'vote-button';
button.textContent = option;
button.onclick = () => handleVote(index);
// Create bar graph container
const barContainer = document.createElement('div');
barContainer.className = 'bar-container';
const bar = document.createElement('div');
bar.className = 'bar';
bar.id = `bar-${index}`;
bar.textContent = '0%';
barContainer.appendChild(bar);
optionDiv.appendChild(button);
optionDiv.appendChild(barContainer);
container.appendChild(optionDiv);
});
function handleVote(optionIndex) {
votes[optionIndex]++;
totalVotes++;
updateBars();
}
function updateBars() {
options.forEach((_, index) => {
const percent = totalVotes > 0
? (votes[index] / totalVotes * 100).toFixed(1)
: 0;
const bar = document.getElementById(`bar-${index}`);
bar.style.width = `${percent}%`;
bar.textContent = `${percent}%`;
});

}
}
// Initialize poll with 2-4 options (modify this array as needed)
createPoll(['Option 1', 'Option 2', 'Option 3', 'Option 4']);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
.poll-container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
font-family: Arial, sans-serif;
}
.poll-option {
display: flex;
align-items: center;
margin: 15px 0;
gap: 15px;
}
.option-content {
width: 120px;
display: flex;
justify-content: center;
align-items: center;
}
.option-content img {
max-width: 100px;
max-height: 60px;
border-radius: 8px;
object-fit: cover;
}
.vote-button {
width: 40px;
height: 40px;

cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 50%;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s;
}
.vote-button:hover {
transform: scale(1.1);
}
.bar-container {
flex-grow: 1;
background-color: #f0f0f0;
border-radius: 20px;
height: 40px;
overflow: hidden;
position: relative;
}
.bar {
height: 100%;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 15px;
color: white;
font-weight: bold;
transition: width 0.5s ease-in-out;
}
</style>
</head>
<body>
<div class="poll-container" id="pollContainer"></div>
<script>
function createPoll(options) {
const container = document.getElementById('pollContainer');
let votes = new Array(options.length).fill(0);
let totalVotes = 0;
const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEEAD'];

options.forEach((option, index) => {
const optionDiv = document.createElement('div');
optionDiv.className = 'poll-option';
// + Button
const button = document.createElement('button');
button.className = 'vote-button';
button.innerHTML = '+';
button.onclick = () => handleVote(index);
// Content (Text/Image)
const content = document.createElement('div');
content.className = 'option-content';
if (option.image) {
const img = document.createElement('img');
img.src = option.image;
img.alt = option.text;
content.appendChild(img);
} else {
content.textContent = option.text;
}
// Progress Bar
const barContainer = document.createElement('div');
barContainer.className = 'bar-container';
const bar = document.createElement('div');
bar.className = 'bar';
bar.style.backgroundColor = colors[index % colors.length];
bar.textContent = '0%';
barContainer.appendChild(bar);
optionDiv.appendChild(button);
optionDiv.appendChild(content);
optionDiv.appendChild(barContainer);
container.appendChild(optionDiv);
});
function handleVote(index) {
votes[index]++;
totalVotes++;
updateBars();
}
function updateBars() {

options.forEach((_, index) => {
const percentage = totalVotes > 0
? ((votes[index] / totalVotes) * 100).toFixed(1)
: 0;
const bar = container.querySelectorAll('.bar')[index];
bar.style.width = `${percentage}%`;
bar.textContent = `${percentage}%`;
});
}
}
// Sample poll options (Modify as needed)
createPoll([
{ text: 'Beach Vacation', image: 'https://example.com/beach.jpg' },
{ text: 'Mountain Trek' },
{ text: 'City Tour', image: 'https://example.com/city.jpg' },
{ text: 'Countryside Escape' }
]);
</script>
</body>
</html>

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!


Comments

One response to “Hello world!”

  1. Hi, this is a comment.
    To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.
    Commenter avatars come from Gravatar.

Leave a Reply

Your email address will not be published. Required fields are marked *