{"id":3645,"date":"2022-10-07T23:17:45","date_gmt":"2022-10-07T18:17:45","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=3645"},"modified":"2022-10-07T23:17:47","modified_gmt":"2022-10-07T18:17:47","slug":"how-to-design-poll-ui-using-html5-css3-javascript","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/how-to-design-poll-ui-using-html5-css3-javascript\/","title":{"rendered":"How to Design Poll UI using HTML5, CSS3 & JavaScript"},"content":{"rendered":"\n

In this tutorial, you will learn\u00a0how to design Poll UI<\/strong>\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this Poll UI Design<\/strong> project is given below.<\/p>\n\n\n\n

HTML5, CSS3, and JavaScript Poll UI Design Source Code<\/h2>\n\n\n\n

index.html<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n  <meta charset="UTF-8">\n  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n  <title>Poll UI Design<\/title>\n  <link rel="stylesheet" href="style.css">\n<\/head>\n<body>\n  <div class="wrapper">\n    <header>Poll UI Design<\/header>\n    <div class="poll-area">\n      <input type="checkbox" name="poll" id="opt-1">\n      <input type="checkbox" name="poll" id="opt-2">\n      <input type="checkbox" name="poll" id="opt-3">\n      <input type="checkbox" name="poll" id="opt-4">\n      <label for="opt-1" class="opt-1">\n        <div class="row">\n          <div class="column">\n            <span class="circle"><\/span>\n            <span class="text">HTML<\/span>\n          <\/div>\n          <span class="percent">30%<\/span>\n        <\/div>\n        <div class="progress" style='--w:30;'><\/div>\n      <\/label>\n      <label for="opt-2" class="opt-2">\n        <div class="row">\n          <div class="column">\n            <span class="circle"><\/span>\n            <span class="text">Java<\/span>\n          <\/div>\n          <span class="percent">20%<\/span>\n        <\/div>\n        <div class="progress" style='--w:20;'><\/div>\n      <\/label>\n      <label for="opt-3" class="opt-3">\n        <div class="row">\n          <div class="column">\n            <span class="circle"><\/span>\n            <span class="text">Python<\/span>\n          <\/div>\n          <span class="percent">40%<\/span>\n        <\/div>\n        <div class="progress" style='--w:40;'><\/div>\n      <\/label>\n      <label for="opt-4" class="opt-4">\n        <div class="row">\n          <div class="column">\n            <span class="circle"><\/span>\n            <span class="text">jQuery<\/span>\n          <\/div>\n          <span class="percent">10%<\/span>\n        <\/div>\n        <div class="progress" style='--w:10;'><\/div>\n      <\/label>\n    <\/div>\n  <\/div>\n\n  <script src="script.js"><\/script>\n\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n\n
script.js<\/h3>\n\n\n\n
const options = document.querySelectorAll("label");\nfor (let i = 0; i < options.length; i++) {\n  options[i].addEventListener("click", ()=>{\n    for (let j = 0; j < options.length; j++) {\n      if(options[j].classList.contains("selected")){\n        options[j].classList.remove("selected");\n      }\n    }\n\n    options[i].classList.add("selected");\n    for (let k = 0; k < options.length; k++) {\n      options[k].classList.add("selectall");\n    }\n\n    let forVal = options[i].getAttribute("for");\n    let selectInput = document.querySelector("#"+forVal);\n    let getAtt = selectInput.getAttribute("type");\n    if(getAtt == "checkbox"){\n      selectInput.setAttribute("type", "radio");\n    }else if(selectInput.checked == true){\n      options[i].classList.remove("selected");\n      selectInput.setAttribute("type", "checkbox");\n    }\n\n    let array = [];\n    for (let l = 0; l < options.length; l++) {\n      if(options[l].classList.contains("selected")){\n        array.push(l);\n      }\n    }\n    if(array.length == 0){\n      for (let m = 0; m < options.length; m++) {\n        options[m].removeAttribute("class");\n      }\n    }\n  });\n}\n<\/pre><\/div>\n\n\n\n
style.css<\/h3>\n\n\n\n
@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');\n*{\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  font-family: 'Poppins', sans-serif;\n}\nbody{\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 100vh;\n  background: #6665ee;\n}\n::selection{\n  color: #fff;\n  background: #6665ee;\n}\n.wrapper{\n  background: #fff;\n  border-radius: 15px;\n  padding: 25px;\n  max-width: 380px;\n  width: 100%;\n  box-shadow: 0px 5px 10px rgba(0,0,0,0.1);\n}\n.wrapper header{\n  font-size: 22px;\n  font-weight: 600;\n}\n.wrapper .poll-area{\n  margin: 20px 0 15px 0;\n}\n.poll-area label{\n  display: block;\n  margin-bottom: 10px;\n  border-radius: 5px;\n  padding: 8px 15px;\n  border: 2px solid #e6e6e6;\n  transition: all 0.2s ease;\n}\n.poll-area label:hover{\n  border-color: #ddd;\n}\nlabel.selected{\n  border-color: #6665ee!important;\n}\nlabel .row{\n  display: flex;\n  pointer-events: none;\n  justify-content: space-between;\n}\nlabel .row .column{\n  display: flex;\n  align-items: center;\n}\nlabel .row .circle{\n  height: 19px;\n  width: 19px;\n  display: block;\n  border: 2px solid #ccc;\n  border-radius: 50%;\n  margin-right: 10px;\n  position: relative;\n}\nlabel.selected .row .circle{\n  border-color: #6665ee;\n}\nlabel .row .circle::after{\n  content: "";\n  height: 11px;\n  width: 11px;\n  background: #6665ee;\n  border-radius: inherit;\n  position: absolute;\n  left: 2px;\n  top: 2px;\n  display: none;\n}\n.poll-area label:hover .row .circle::after{\n  display: block;\n  background: #e6e6e6;\n}\nlabel.selected .row .circle::after{\n  display: block;\n  background: #6665ee!important;\n}\nlabel .row span{\n  font-size: 16px;\n  font-weight: 500;\n}\nlabel .row .percent{\n  display: none;\n}\nlabel .progress{\n  height: 7px;\n  width: 100%;\n  position: relative;\n  background: #f0f0f0;\n  margin: 8px 0 3px 0;\n  border-radius: 30px;\n  display: none;\n  pointer-events: none;\n}\nlabel .progress:after{\n  position: absolute;\n  content: "";\n  height: 100%;\n  background: #ccc;\n  width: calc(1% * var(--w));\n  border-radius: inherit;\n  transition: all 0.2s ease;\n}\nlabel.selected .progress::after{\n  background: #6665ee;\n}\nlabel.selectall .progress,\nlabel.selectall .row .percent{\n  display: block;\n}\ninput[type="radio"],\ninput[type="checkbox"]{\n  display: none;\n}\n<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"
In this tutorial, you will learn\u00a0how to design Poll UI\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this Poll UI Design project is given below. HTML5, CSS3, and JavaScript Poll UI Design Source Code index.html script.js style.css<\/p>\n","protected":false},"author":1,"featured_media":3647,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-3645","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"\nHow to Design Poll UI using HTML5, CSS3 & JavaScript<\/title>\n<meta name=\"description\" content=\"In this tutorial, you will learn\u00a0how to design Poll UI\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this Poll UI Design project is given\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.edopedia.com\/blog\/how-to-design-poll-ui-using-html5-css3-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Design Poll UI using HTML5, CSS3 & JavaScript\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, you will learn\u00a0how to design Poll UI\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this Poll UI Design project is given\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/how-to-design-poll-ui-using-html5-css3-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Edopedia\" \/>\n<meta property=\"article:author\" content=\"trulyfurqan\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-07T18:17:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-07T18:17:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Poll_UI_Design.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"880\" \/>\n\t<meta property=\"og:image:height\" content=\"495\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Furqan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Furqan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Design Poll UI using HTML5, CSS3 & JavaScript","description":"In this tutorial, you will learn\u00a0how to design Poll UI\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this Poll UI Design project is given","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.edopedia.com\/blog\/how-to-design-poll-ui-using-html5-css3-javascript\/","og_locale":"en_US","og_type":"article","og_title":"How to Design Poll UI using HTML5, CSS3 & JavaScript","og_description":"In this tutorial, you will learn\u00a0how to design Poll UI\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this Poll UI Design project is given","og_url":"https:\/\/www.edopedia.com\/blog\/how-to-design-poll-ui-using-html5-css3-javascript\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-10-07T18:17:45+00:00","article_modified_time":"2022-10-07T18:17:47+00:00","og_image":[{"width":880,"height":495,"url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Poll_UI_Design.jpg","type":"image\/jpeg"}],"author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/how-to-design-poll-ui-using-html5-css3-javascript\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-design-poll-ui-using-html5-css3-javascript\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"How to Design Poll UI using HTML5, CSS3 & JavaScript","datePublished":"2022-10-07T18:17:45+00:00","dateModified":"2022-10-07T18:17:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-design-poll-ui-using-html5-css3-javascript\/"},"wordCount":53,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-design-poll-ui-using-html5-css3-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Poll_UI_Design.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/how-to-design-poll-ui-using-html5-css3-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/how-to-design-poll-ui-using-html5-css3-javascript\/","url":"https:\/\/www.edopedia.com\/blog\/how-to-design-poll-ui-using-html5-css3-javascript\/","name":"How to Design Poll UI using HTML5, CSS3 & JavaScript","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-design-poll-ui-using-html5-css3-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-design-poll-ui-using-html5-css3-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Poll_UI_Design.jpg","datePublished":"2022-10-07T18:17:45+00:00","dateModified":"2022-10-07T18:17:47+00:00","description":"In this tutorial, you will learn\u00a0how to design Poll UI\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this Poll UI Design project is given","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-design-poll-ui-using-html5-css3-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/how-to-design-poll-ui-using-html5-css3-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/how-to-design-poll-ui-using-html5-css3-javascript\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Poll_UI_Design.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Poll_UI_Design.jpg","width":880,"height":495,"caption":"How to Design Poll UI using HTML5, CSS3 & JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/how-to-design-poll-ui-using-html5-css3-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Design Poll UI using HTML5, CSS3 & JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.edopedia.com\/blog\/#website","url":"https:\/\/www.edopedia.com\/blog\/","name":"Edopedia","description":"Coding\/Programming Blog","publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.edopedia.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.edopedia.com\/blog\/#organization","name":"Edopedia","url":"https:\/\/www.edopedia.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","width":400,"height":100,"caption":"Edopedia"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339","name":"Furqan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","caption":"Furqan"},"description":"Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.","sameAs":["http:\/\/www.edopedia.com\/blog\/","trulyfurqan"],"url":"https:\/\/www.edopedia.com\/blog\/author\/furqan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3645","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/comments?post=3645"}],"version-history":[{"count":1,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3645\/revisions"}],"predecessor-version":[{"id":3646,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3645\/revisions\/3646"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/3647"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=3645"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=3645"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=3645"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}