Description:
The Poll Creator Tool is a user-friendly web application built with HTML, CSS, and JavaScript. It enables users to effortlessly create customized polls by entering a question and specifying multiple answer options. The tool supports dynamic addition and removal of answer options for flexibility. Upon clicking the "Generate Poll" button, users can instantly preview their poll, making it a quick and convenient solution for crafting interactive surveys or polls for various purposes.Poll Creator tool with customizable questions and answer options in HTML, CSS, and JavaScript.
project code tool
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Poll Creator</title>
<style>
body {
font-family: 'Arial', sans-serif;
text-align: center;
margin: 50px;
}
#pollForm {
max-width: 600px;
margin: 0 auto;
}
#pollPreview {
margin-top: 20px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
min-height: 100px;
background-color: #f8f8f8;
text-align: left;
}
</style>
</head>
<body>
<h1>Poll Creator</h1>
<form id="pollForm">
<label for="question">Poll Question:</label>
<input type="text" id="question" placeholder="Enter your poll question" required>
<div id="optionsContainer">
<label for="options">Answer Options:</label>
<div class="option">
<input type="text" class="optionInput" placeholder="Option 1" required>
<button type="button" onclick="removeOption(this)">Remove</button>
</div>
<div class="option">
<input type="text" class="optionInput" placeholder="Option 2" required>
<button type="button" onclick="removeOption(this)">Remove</button>
</div>
</div>
<button type="button" onclick="addOption()">Add Option</button>
<button type="button" onclick="generatePoll()">Generate Poll</button>
</form>
<div id="pollPreview"></div>
<script>
function addOption() {
const optionsContainer = document.getElementById('optionsContainer');
const newOption = document.createElement('div');
newOption.className = 'option';
newOption.innerHTML = `
<input type="text" class="optionInput" placeholder="New Option" required>
<button type="button" onclick="removeOption(this)">Remove</button>
`;
optionsContainer.appendChild(newOption);
}
function removeOption(button) {
const optionsContainer = document.getElementById('optionsContainer');
optionsContainer.removeChild(button.parentNode);
}
function generatePoll() {
const questionInput = document.getElementById('question');
const optionsInputs = document.querySelectorAll('.optionInput');
const pollPreview = document.getElementById('pollPreview');
const question = questionInput.value.trim();
const options = Array.from(optionsInputs).map(input => input.value.trim());
if (!question || options.some(option => !option)) {
alert('Please fill in both the question and all answer options.');
return;
}
// Generate poll preview
pollPreview.innerHTML = `
<h3>${question}</h3>
<ul>
${options.map(option => `<li>${option}</li>`).join('')}
</ul>
`;
}
</script>
</body>
</html>
No comments:
Post a Comment