MultiWEBPress
Wordpress & Shopify Experts

MultiWEBPress
Wordpress & Shopify Experts

How to create poll system in html css?

Hello Friends, Today in this blog you’ll learn how to create a voting app ui design using pure HTML, CSS & Javascripts. This is for beginners who want to learn new stuff using HTML & CSS. Recently, I have shared a Responsive Pricing Card using pure HTML & CSS. Now it’s time to create a polling app design Or poll ui design HTML & CSS.

Video tutorial of Responsive Pricing Card (Pricing Tables)

You may also like:

In the video, you’ve seen the poll result card ui html css.There are many different ways to create this voting app ui design, one of which is the way we have designed it.

Responsive Pricing Card (Pricing Tables)[Source Codes]

So to create these ,css polling ui design you need to create three different files. The 3 files are index.html, style.css & script.js. file. Remember when you create an HTML file don’t forget to add a .html extension on HTML file and .css extension to your style file. 

JAVASCRIPT CODE

Let’s create a Js file with the name of script.js and paste the below codes. Remember you’ve to create a file with a .js extension

				
					const options = document.querySelectorAll("label");
for (let i = 0; i < options.length; i++) {
  options[i].addEventListener("click", ()=>{
    for (let j = 0; j < options.length; j++) {
      if(options[j].classList.contains("selected")){
        options[j].classList.remove("selected");
      }
    }

    options[i].classList.add("selected");
    for (let k = 0; k < options.length; k++) {
      options[k].classList.add("selectall");
    }

    let forVal = options[i].getAttribute("for");
    let selectInput = document.querySelector("#"+forVal);
    let getAtt = selectInput.getAttribute("type");
    if(getAtt == "checkbox"){
      selectInput.setAttribute("type", "radio");
    }else if(selectInput.checked == true){
      options[i].classList.remove("selected");
      selectInput.setAttribute("type", "checkbox");
    }

    let array = [];
    for (let l = 0; l < options.length; l++) {
      if(options[l].classList.contains("selected")){
        array.push(l);
      }
    }
    if(array.length == 0){
      for (let m = 0; m < options.length; m++) {
        options[m].removeAttribute("class");
      }
    }
  });
}

Let’s create a Cascading Style Sheet(CSS) file with the name of style.css and paste the below codes in your CSS file. Remember you’ve to create a file with a .css extension

CSS CODE

				
					@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: FAFAFA;
}
.wrapper{
  padding: 30px;
  background: #fff;
  max-width: 500px;
  width: 100%;
  box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.1);
}

@media (max-width:675px){
    .wrapper{
        max-width: 300px;
}
}

.wrapper header{
  font-size: 22px;
  font-weight: 600;
}
.wrapper .poll-area{
  margin: 20px 0 15px 0;
}
.poll-area label{
  display: block;
  margin-bottom: 10px;
  padding: 8px 15px;
  border: 2px solid #e6e6e6;
  transition: all 0.2s ease;
}

label.opt-1.selected { 
    border: 2px solid #cf2d00;
}

label.opt-2.selected {
    border: 2px solid #4bcc00;
}

label.opt-3.selected {
    border: 2px solid #cfbd00;
}

label.opt-4.selected {
    border: 2px solid #01638c;
}

div#pstyle1::after {
    background: #cf2d00 !important;
}

div#pstyle2::after {
    background: #4bcc00 !important;
}

div#pstyle3::after {
    background:  #cfbd00 !important;
}

div#pstyle4::after {
    background: #01638c !important;
}

label.opt-1.selected .row .circle{
    border-color: #cf2d00 !important;
  }

  label.opt-2.selected .row .circle{
    border-color: #4bcc00 !important;
  }

  label.opt-3.selected .row .circle{
    border-color: #cfbd00 !important;
  }
  
  label.opt-4.selected .row .circle{
    border-color: #01638c !important;
  }


label.opt-1 .row .circle::after{
    background: #cf2d00 !important;
  }

  label.opt-2 .row .circle::after{
    background: #4bcc00 !important;
}

  label.opt-3 .row .circle::after{
    background: #cfbd00 !important;
  }

  label.opt-4 .row .circle::after{
    background: #01638c !important;
  }

label .row{
  display: flex;
  pointer-events: none;
  justify-content: space-between;
}
label .row .column{
  display: flex;
  align-items: center;
}
label .row .circle{
  height: 19px;
  width: 19px;
  display: block;
  border: 2px solid #ccc;
  border-radius: 50%;
  margin-right: 10px;
  position: relative;
}
label .row .circle::after{
  content: "";
  height: 11px;
  width: 11px;
  border-radius: inherit;
  position: absolute;
  left: 2px;
  top: 2px;
  display: none;
}
.poll-area label:hover .row .circle::after{
  display: block;
  background: #e6e6e6;
}
label.selected .row .circle::after{
  display: block;
}
label .row span{
  font-size: 16px;
  font-weight: 500;
}
label .row .percent{
  display: none;
}
label .progress{
  height: 7px;
  width: 100%;
  position: relative;
  background: #f0f0f0;
  margin: 8px 0 3px 0;
  border-radius: 30px;
  display: none;
  pointer-events: none;
}
label .progress:after{
  position: absolute;
  content: "";
  height: 100%;
  background: #ccc;
  width: calc(1% * var(--w));
  border-radius: inherit;
  transition: all 0.2s ease;
}
label.selectall .progress,
label.selectall .row .percent{
  display: block;
}
input[type="radio"],
input[type="checkbox"]{
  display: none;
}

Now create a Hypertext Markup Language(HTML) with the name of index.html and paste the below codes in your HTML file. Remember you’ve to create a file with a .html extension

HTML CODE

				
					<!DOCTYPE html>
<!-- Created By MultiWebPress - www.multiwebpress.com -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Poll UI Design | MultiWebPress</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="wrapper">
    <header>What Design tool do you use the most? <br></header>
    <div class="poll-area">
      <input type="checkbox" name="poll" id="opt-1">
      <input type="checkbox" name="poll" id="opt-2">
      <input type="checkbox" name="poll" id="opt-3">
      <input type="checkbox" name="poll" id="opt-4">
      <label for="opt-1" class="opt-1">
        <div class="row">
          <div class="column">
            <span class="circle"></span>
            <span class="text">Photoshop</span>
          </div>
          <span class="percent">55%</span>
        </div>
        <div class="progress" id="pstyle1" style='--w:55;'></div>
      </label>
      <label for="opt-2" class="opt-2">
        <div class="row">
          <div class="column">
            <span class="circle"></span>
            <span class="text">Sketch</span>
          </div>
          <span class="percent">20%</span>
        </div>
        <div class="progress" id="pstyle2" style='--w:80;'></div>
      </label>
      <label for="opt-3" class="opt-3">
        <div class="row">
          <div class="column">
            <span class="circle"></span>
            <span class="text">Adobe XD</span>
          </div>
          <span class="percent">20%</span>
        </div>
        <div class="progress" id="pstyle3" style='--w:20;'></div>
      </label>
      <label for="opt-4" class="opt-4">
        <div class="row">
          <div class="column">
            <span class="circle"></span>
            <span class="text">Figma</span>
          </div>
          <span class="percent">96%</span>
        </div>
        <div class="progress" id="pstyle4" style='--w:96;'></div>
      </label>
    </div>
  </div>
  <script src="javascript/script.js"></script>
</body>
</html>

After creating these two files & pasting codes, now run the files in your browser. You can run to any browser you have on your computer. (Google Chrome, Firefox, Internet explorer etc.)

That’s all, now you’ve successfully created Responsive poll system in HTML, CSS, JAVASCRIPT. If your code does have any bugs/errors/ or you’re facing any problems, then please comment down below or contact us from the contact us page.

Hope you enjoyed reading and watching the video. Please do like and subscribe to my youtube channel & follow me on Instagram.

Thanks in Advance!

Download Code Files

SHARE

WhatsApp
Facebook
Twitter
LinkedIn
Telegram

Leave a Comment

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

*
*

MOST POPULAR
SHARE
CATEGORY
Categories

ABOUT US

MultiWebPress is a full-service web development agency that creates custom websites and online stores using WordPress and Shopify. Our team of skilled developers and digital strategists offer personalized solutions, including ongoing maintenance and support, to help businesses succeed online.

QUICK LINK

FOLLOW US

Facebook-f Youtube Instagram Twitter

Copyright © 2023 MultiWebPress | All Rights Reserved