Poll animation

by crduling

HTML

<div id='display-polls-container'>
</div>


<button id='user-created-poll'>Click for new poll</button>

CSS

#user-created-poll {
  position: absolute;
  top: 0;
  right: 0;
}

.poll-container {
  border-style: solid;
}

#vote-animation-1 {
  width: 100%;
  border-style: solid;
  height: 100%;
}

JavaScript

let counter = 0;
$("#user-created-poll").click(function() {
  let newHtml = "<div class='poll-container'><form><div class='title'><p class='user'>Username</p><p class='title-text'>Poll title</p></div><label class='userPollLabel'><div class='inner-content'><input type='radio' name='polls' value='0'>First option<div id='vote-animation-1'></div></div></label><label class='userPollLabel'><div class='inner-content'><input type='radio' name='polls' value='1'>Second item<div id='vote-animation-2'></div></div></label></form></div>";

  let appended = $(newHtml).appendTo("#display-polls-container");
  $(appended).find("input:radio").click(function(){ 
  var x = alert($(this).val());
  
	if (x == 1) {
  	$("#vote-animation-1").width().animate({'width': '50%'}, 1000);
  }
  
  });
  
});