Live Voting
How do I make an live voting?
What is a live voting? How do you make a live voting? This script and codes were developed by Ariana Lynn on 05 September 2022, Monday.
Live Voting - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Live Voting</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h2 style="margin:45px 0;font-family:'Montserrat',sans-serif;text-align:center;color:rgb(90,90,90)"><img style="width:50px;margin:0 10px -11px;" src="https://zapier.cachefly.net/storage/services/2554f3f9544cf8375a46f68b18de0e7d.128x128.png"></img>Using <a href="https://docs.google.com/spreadsheets/d/10OPoiA7s3Bjuc3OekRJsEhfDF28I2Sx6GyIG4l90M5A/edit?usp=sharing" style="color:#5E337D;text-decoration:none">Google Forms</a> To Create A Poll</h2>
<center> <iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted == true){alert('Thanks for voting');document.getElementsByTagName('form')[0].style.display='none';setInterval(g,200)}"></iframe> <form action="https://docs.google.com/forms/d/11z3-qfHr19Ygg6qJK7kdGLEBrQ_dDnrnGgY7o00XqbY/formResponse" method="POST" id="ss-form" target="hidden_iframe" onsubmit="submitted=true"> <input type="radio" name="entry.1810478256" value="Option 1" id="group_1810478256_1" role="radio" class="ss-q-radio" aria-label="Option 1">Option 1 <input type="radio" name="entry.1810478256" value="Option 2" id="group_1810478256_2" role="radio" class="ss-q-radio" aria-label="Option 2">Option 2 <input type="radio" name="entry.1810478256" value="Option 3" id="group_1810478256_3" role="radio" class="ss-q-radio" aria-label="Option 3">Option 3 <input type="radio" name="entry.1810478256" value="Option 4" id="group_1810478256_4" role="radio" class="ss-q-radio" aria-label="Option 4">Option 4 <input type="hidden" name="draftResponse" value="[,,"-5181336583671519973"]"> <input type="hidden" name="pageHistory" value="0"> <input type="hidden" name="fvv" value="0"> <input type="hidden" name="fbzx" value="-5181336583671519973"> <input type="submit" name="submit" value="Submit" id="ss-submit" class="jfk-button jfk-button-action "> </form> <div class="chart-h"> <div class="chart"> <div class="bar" id="bar-1"></div> <div class="bar" id="bar-2"></div> <div class="bar" id="bar-3"></div> <div class="bar" id="bar-4"></div> </div> </div> <div class="graph"> <div class="pie"></div> <div class="pie pie2"></div> <div class="pie pie3"></div> <div class="pie pie4"></div> </div>
</center> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Live Voting - Script Codes CSS Codes
@import "https://fonts.googleapis.com/css?family=Montserrat";
body { background: #d2d2d2; font-family: 'Montserrat', sans-serif
}
form { margin: 40px 0 0
}
input[type=submit] { margin: 15px 0 0 20px; padding: 8px; border: 1px solid #5E337D; cursor: pointer; font-family: 'Montserrat', sans-serif
}
.chart-h { width: 440px; display: inline-block; max-width: calc(100vw - 40px)
}
.chart { margin: 40px 20px 0; min-height: 230px; border-bottom: 2px solid grey; -webkit-display: flex; -webkit-align-items: flex-end; display: flex; align-items: flex-end; justify-content: space-around; overflow: hidden
}
.bar { width: calc(25% - 20px); height: 2px; transition: all 1s; color: rgba(255, 255, 255, 0.8); padding-top: 10px; font-size: 13px
}
.graph { width: 200px; height: 200px; position: relative; overflow: hidden; border-radius: 100%; background: #ba55d3; -webkit-transform: rotate(-90deg); margin: 40px 0 -10px 20px; display: inline-block; vertical-align: bottom
}
.graph:after { position: absolute; content: ''; background: #d2d2d2; width: 100px; height: 100px; border-radius: 100%; top: 50px; left: 50px
}
.pie { width: 200px; height: 200px; position: absolute; clip: rect(100px, 200px, 200px, 0px); transition: all 1s
}
Live Voting - Script Codes JS Codes
function g() { var colors = ["#5E337D", "purple", "violet", "mediumorchid"]; $.getJSON("https://spreadsheets.google.com/feeds/list/10OPoiA7s3Bjuc3OekRJsEhfDF28I2Sx6GyIG4l90M5A/od6/public/values?alt=json", function(data) { for (var i = 0; i < 4; i++) { document.getElementsByClassName('bar')[i].style.height = (data.feed.entry[i].gsx$number.$t / data.feed.entry[4].gsx$number.$t * 500) + 'px'; document.getElementsByClassName('bar')[i].innerHTML = data.feed.entry[i].gsx$option.$t + '<br/><small>' + Math.floor(100 * data.feed.entry[i].gsx$number.$t / data.feed.entry[4].gsx$number.$t) + '%</small>'; document.getElementsByClassName('bar')[i].style.background = colors[i]; document.getElementsByClassName('pie')[i].style.background = 'linear-gradient(0deg, transparent 50%, transparent 50%),linear-gradient(' + Math.floor(360 * data.feed.entry[i].gsx$number.$t / data.feed.entry[4].gsx$number.$t) + 'deg, transparent 50%, ' + colors[i] + ' 50%)'; if (i != 0) { document.getElementsByClassName('pie')[i].style.webkitTransform = 'rotate(' + Math.floor(360 * data.feed.entry[i - 1].gsx$number.$t / data.feed.entry[4].gsx$number.$t) + 'deg) ' + document.getElementsByClassName('pie')[i - 1].style.webkitTransform; } } });
}
g();
Developer | Ariana Lynn |
Username | arianalynn |
Uploaded | September 05, 2022 |
Rating | 3.5 |
Size | 3,397 Kb |
Views | 22,264 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
404 Error Message | 3,143 Kb |
Canvas Cloth with Strings | 2,607 Kb |
Reveal Effect | 2,943 Kb |
-Webkit-Filter Demo | 2,374 Kb |
Fireworks Show | 3,048 Kb |
Dots and Shapes | 5,559 Kb |
Material Note App | 4,449 Kb |
Loading Loop | 2,798 Kb |
Material Buttons.css | 3,707 Kb |
Menu Animated Dropdown and Icon | 3,082 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Multi column experiment. | Spylefkaditis | 2,805 Kb |
CardMove | Thompsonemerson | 3,699 Kb |
DevCamp 2014 - Denver Public Library | See8ch | 5,033 Kb |
IbrahimJabbari-Effect21 | Ibrahimjabbari | 1,882 Kb |
Angular Sandbox | Alexgurrola | 1,616 Kb |
CSS Infinite 360 | APinix | 5,564 Kb |
Word Wrap Algorithm for Multiline Canvas Text | Peterhry | 2,349 Kb |
Spin | Elalemanyo | 8,262 Kb |
Animated rainbow wave on canvas | Icodeforlove | 2,777 Kb |
CSS Letter animations | Sladix | 2,116 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!