Travel Poll - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Travel Poll</title> <style> body { font-family: 'Arial', sans-serif; background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%); display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .poll-container { background: #ffffff; border-radius: 15px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); padding: 30px; max-width: 500px; width: 100%; text-align: left; animation: slideIn 1s ease-out; } @keyframes slideIn { from { opacity: 0; transform: translateX(-100px); } to { opacity: 1; transform: translateX(0); } } .poll-header { font-size: 24px; margin-bottom: 20px; color: #333; } .poll-question { font-size: 20px; margin-bottom: 15px; } .poll-options { list-style: none; padding: 0; } .poll-options li { margin-bottom: 10px; } .poll-options input[type="radio"] { display: none; } .poll-options label { display: block; padding: 15px; border-radius: 8px; cursor: pointer; transition: background 0.3s, transform 0.3s; font-size: 18px; background: #b3e0db; color: #555; } .poll-options input[type="radio"]:checked + label { background: #2c7d76; color: #fff; transform: scale(1.05); } .poll-options input[type="radio"] + label:hover { background: #9cd5d1; } .poll-buttons { margin-top: 20px; } .poll-buttons button { padding: 10px 20px; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; transition: background 0.3s; margin: 5px; } .poll-buttons .submit-btn { background: #27846b; color: #fff; } .poll-buttons .submit-btn:hover { background: #1f6c57; } .poll-buttons .reset-btn { background: #757575; color: #fff; } .poll-buttons .reset-btn:hover { background: #616161; } .result-container { display: none; text-align: center; margin-top: 20px; } .result-container h2 { margin-bottom: 15px; color: #333; } .result-bar { width: 100%; background: #d1efed; border-radius: 8px; margin-bottom: 10px; position: relative; } .result-bar .bar { height: 30px; border-radius: 8px; background: #2c7d76; text-align: center; line-height: 30px; color: #fff; position: relative; z-index: 1; } .result-bar .bar::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; border-radius: 8px; background: rgba(255, 255, 255, 0.2); animation: barAnim 2s infinite; } @keyframes barAnim { from { left: -100%; } to { left: 100%; } } </style> </head> <body> <div class="poll-container"> <div class="poll-header">✈️ Travel Poll ✈️</div> <div class="poll-question">What is your dream travel destination?</div> <ul class="poll-options"> <li> <input type="radio" id="destination1" name="poll" value="Paris"> <label for="destination1">Paris <span>🗼</span></label> </li> <li> <input type="radio" id="destination2" name="poll" value="Bali"> <label for="destination2">Bali <span>🌴</span></label> </li> <li> <input type="radio" id="destination3" name="poll" value="Tokyo"> <label for="destination3">Tokyo <span>🗾</span></label> </li> <li> <input type="radio" id="destination4" name="poll" value="New York"> <label for="destination4">New York <span>🗽</span></label> </li> </ul> <div class="poll-buttons"> <button class="submit-btn" onclick="submitPoll()">Submit</button> <button class="reset-btn" onclick="resetPoll()">Reset</button> </div> <div class="result-container"> <h2>Results</h2> <div id="result1" class="result-bar"><div class="bar" style="width: 0%;">Paris</div></div> <div id="result2" class="result-bar"><div class="bar" style="width: 0%;">Bali</div></div> <div id="result3" class="result-bar"><div class="bar" style="width: 0%;">Tokyo</div></div> <div id="result4" class="result-bar"><div class="bar" style="width: 0%;">New York</div></div> </div> </div> <script> const results = { Paris: 0, Bali: 0, Tokyo: 0, New York: 0 }; let totalVotes = 0; function submitPoll() { const selectedOption = document.querySelector('input[name="poll"]:checked'); if (selectedOption) { const value = selectedOption.value; results[value]++; totalVotes++; displayResults(); } else { alert('Please select an option.'); } } function resetPoll() { document.querySelectorAll('input[name="poll"]').forEach(input => input.checked = false); document.querySelector('.result-container').style.display = 'none'; document.querySelector('.poll-options').style.display = 'block'; document.querySelector('.poll-buttons').style.display = 'block'; } function displayResults() { document.querySelector('.result-container').style.display = 'block'; document.querySelector('.poll-options').style.display = 'none'; document.querySelector('.poll-buttons').style.display = 'none'; Object.keys(results).forEach((key, index) => { const percentage = (results[key] / totalVotes) * 100; document.querySelector(`#result${index + 1} .bar`).style.width = `${percentage}%`; document.querySelector(`#result${index + 1} .bar`).innerText = `${key} (${Math.round(percentage)}%)`; }); } </script> </body> </html>