1. Tutorials
  2. JavaScript Tutorial
  3. Simple Poll UI using HTML, CSS, and JavaScript Tutorial

Simple Poll UI using HTML, CSS, and JavaScript Tutorial

Submitted by oretnom23 on Saturday, October 14, 2023 - 15:55.

Within this guide, we'll delve into the creation of a straightforward Polling System user interface (UI) along with its core functionality. Our aim is to provide valuable insights to aspiring web developers, offering a practical guide on constructing a basic web application utilizing HTML, CSS, and JavaScript. In this tutorial, we'll share the source code for a basic web application that aligns with the objectives of this instructional material.

What is Polling Systems?

A Polling System represents a web application or a critical feature found in various applications, resembling a voting system designed for collecting opinions and facilitating decision-making processes. This system or feature typically enables numerous participants or voters to choose from the listed options, ultimately leading to a decision favored by the majority.

Essential Requirements

Please make sure to download and install the following if they are not already present on your computer:

  • Text Editor: We recommend using VS Code, Sublime Text, or Notepad++
  • Web Browser with JavaScript Support: We suggest using Chrome, Mozilla Firefox, or MS Edge

We will utilize CDN links to load the Bootstrap and jQuery libraries. The inclusion of the Bootstrap Framework will significantly enhance our ability to create a user-friendly application with excellent mobile responsiveness.

Time to Start Coding...

Creating the Index File

Our initial step involves the creation of the application's index file. Begin by launching your text editor and establish a new HTML file, naming it index.html. Next, refer to the provided source code to load the required libraries and craft the user interface components.

  1. <!DOCTYPE html>
  2. <html lang="en">
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Simple Poll UI</title>
  7.     <!-- Bootstrap CSS -->
  8.     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  9.     <link rel="stylesheet" href="styles.css">
  10.  
  11.     <!-- jQuery JS -->
  12.     <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  13.     <!-- Bootstrap JS -->
  14.     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  15. </head>
  17.     <main>
  18.         <div class="col-lg-3 col-md-5 col-sm-8 col-12">
  19.             <div class="card rounded-0 shadow mb-3">
  20.                 <div class="card-body">
  21.                     <div class="container-fluid">
  22.                         <div class="text-secondary-emphasis border-bottom"><b>Polls</b></div>
  23.                         <!-- Poll List -->
  24.                         <ul class="list-group my-2">
  25.                             <!-- Poll Items -->
  26.                             <li class="list-group-item list-group-item-action">
  27.                                 <div class="poll-item-container" data-item="HTML">
  28.                                     <div class="poll-item-title">HTML <span class="fs-6 text-secondary-emphasis">(<span class="poll-item-percentage">0%</span>)</span></div>
  29.                                     <div class="progress poll-item-progress" role="progressbar" aria-label="Example with label" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  30.                                         <div class="progress-bar progress-bar-striped progress-bar-animated"></div>
  31.                                     </div>
  32.                                 </div>
  33.                             </li>
  34.                             <li class="list-group-item list-group-item-action">
  35.                                 <div class="poll-item-container" data-item="CSS">
  36.                                     <div class="poll-item-title">CSS <span class="fs-6 text-secondary-emphasis">(<span class="poll-item-percentage">0%</span>)</span></div>
  37.                                     <div class="progress poll-item-progress" role="progressbar" aria-label="Example with label" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  38.                                         <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
  39.                                     </div>
  40.                                 </div>
  41.                             </li>
  42.                             <li class="list-group-item list-group-item-action">
  43.                                 <div class="poll-item-container" data-item="JS">
  44.                                     <div class="poll-item-title">JavaScript <span class="fs-6 text-secondary-emphasis">(<span class="poll-item-percentage">0%</span>)</span></div>
  45.                                     <div class="progress poll-item-progress" role="progressbar" aria-label="Example with label" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  46.                                         <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning"></div>
  47.                                     </div>
  48.                                 </div>
  49.                             </li>
  50.                             <!-- Poll Items -->
  51.                         </ul>
  52.                         <!-- Poll List -->
  53.                         <!-- Number of Voters or Responders  -->
  54.                         <div class="d-flex justify-content-end flex-wrap">
  55.                             <div class="text-secondary-emphasis">Number of Votes: <span class="text-dark fw-bold" id="total-votes"></span></div>
  56.                         </div>
  57.                         <!-- End of Number of Voters or Responders  -->
  58.                     </div>
  59.                 </div>
  60.             </div>
  61.             <!-- Buttons for voting -->
  62.             <div class="card rounded-0 shadow">
  63.                 <div class="card-body">
  64.                     <div class="container-fluid">
  65.                         <div class="text-secondary-emphasis border-bottom mb-2"><b>Vote</b></div>
  66.                         <div class="text-muted"><small><i>(Click the button you want to vote)</i></small></div>
  67.                         <div class="btn-group w-100 mt-1">
  68.                             <button type="button" class="btn btn-primary rounded-0 btn-lg vote-btn" data-item="HTML">HTML</button>
  69.                             <button type="button" class="btn btn-success rounded-0 btn-lg vote-btn" data-item="CSS">CSS</button>
  70.                             <button type="button" class="btn btn-warning rounded-0 btn-lg vote-btn" data-item="JS">JS</button>
  71.                         </div>
  72.                     </div>
  73.                 </div>
  74.             </div>
  75.             <!-- End of Buttons for voting -->
  76.         </div>
  77.     </main>
  78.     <script src="script.js"></script>
  79. </body>
  80. </html>

Creating the CSS File

Now, it's time to craft the CSS file that will house the supplementary styling script for further enhancing the application's design. Begin by creating a new CSS file and saving it with the name styles.css. Remember, this file is also linked and loaded within the index.html file.

  1. @import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200;1,300;1,400;1,500&display=swap');
  2. *{
  3.     font-family: 'Exo 2', sans-serif;
  4. }
  5. html,body{
  6.     height: 100%;
  7.     width: 100%;
  8. }
  9. main{
  10.     height: 100%;
  11.     width: 100%;
  12.     background-color: #0093E9;
  13.     background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
  14.     display: flex;
  15.     flex-direction: column;
  16.     align-items: center;
  17.     justify-content: center;
  18. }
  19. .poll-item-title{
  20.     display: flex;
  21.     flex-flow: row wrap;
  22.     justify-content: space-between;
  23. }
  24. .poll-item-progress{
  25.     height: 7px;
  26. }

Creating the JS File

Finally, it's time to generate the JavaScript file that contains the functions and event listeners crucial for the operation of our Polling System. Begin by creating a new JS file and save it with the name script.js.

  1. const voteBTN = document.querySelectorAll('.vote-btn')
  2. let pollData = localStorage.getItem('Polls') || '{}'
  3.     pollData = JSON.parse(pollData)
  4. function vote(item){
  5.     if(!!pollData[item])
  6.         pollData[item] = pollData[item] + 1;
  7.     else
  8.         pollData[item] = 1;
  9.  
  10.     update_poll_data()
  11. }
  12. function update_poll_data(){
  13.     localStorage.setItem('Polls', JSON.stringify(pollData))
  14.     update_progress()
  15. }
  16.  
  17. voteBTN.forEach(el=>{
  18.     el.addEventListener('click', function(e){
  19.         e.preventDefault()
  20.         var item = el.dataset.item || null
  21.         if(item != null)
  22.             vote(item)
  23.     })
  24. })
  25.  
  26. function update_progress(){
  27.     var total = 0;
  28.     var items = [];
  29.     Object.entries(pollData).map(item=>{
  30.         items.push(item[0])
  31.         total += parseInt(item[1])
  32.     })
  33.     if(document.getElementById('total-votes') != null)
  34.         document.getElementById('total-votes').innerText = total.toLocaleString('en-US', {style: 'decimal', maximumFractionDigits:2});  
  35.     items.forEach(item => {
  36.         // Skip If the Item does not Exists
  37.         if(document.querySelectorAll(`.poll-item-container[data-item="${item}"]`) == null)
  38.             return;
  39.         var container = document.querySelector(`.poll-item-container[data-item="${item}"]`)
  40.  
  41.         var percentage = pollData[item] || 0
  42.             percentage = percentage > 0 ? ((percentage / total) * 100) : 0;
  43.             percentage = percentage.toLocaleString('en-US', {style: 'decimal', maximumFractionDigits:2})
  44.  
  45.         if(container.querySelector('.poll-item-percentage') != null)
  46.             container.querySelector('.poll-item-percentage').innerText = `${percentage}%`
  47.  
  48.         if(container.querySelector('.poll-item-progress') != null)
  49.             container.querySelector('.poll-item-progress').setAttribute('aria-valuenow', percentage)
  50.        
  51.         if(container.querySelector('.poll-item-progress .progress-bar') != null)
  52.             container.querySelector('.poll-item-progress .progress-bar').style.width = `${percentage}%`
  53.     })
  54. }
  55.  
  56. window.onload = function(){
  57.     update_progress()
  58. }

The source code shared above will yield a result similar to the illustration below:

Simple Polling System UI using HTML, CSS, and JS

And there you have it! You can now test the functionality of the Simple Polling System User Interface created with HTML, CSS, and JavaScript. I hope this tutorial will be beneficial and prove valuable for your forthcoming web application endeavors.

Explore further on this website for additional Tutorial Resources, Open Source Code Samples, and Informative Articles spanning a wide range of programming languages.

You might also want to download the following Source Codes:

Happy Coding =)

Tags
HTML
css
Javascript
js
Polling System
voting system
Javascript Tutorial

Add new comment

About text formats
  • 1791 views