title: How to create a polling system in HTML for a movie review website?
body: <p>How do I creating a <strong>voting system</strong> that uses checkboxes for 1 star, 2 stars, 3 stars, 4 stars and 5 stars. According to what the user picks it will generate an average user rating from the given votes and display the number of stars required. <a href="https://i.stack.imgur.com/MGWgd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MGWgd.png" alt="enter image description here"></a></p>
  
  <p>I am not sure where exactly to start in terms of gathering the input from the user etc...This is all the code I have for now</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;!-- Font Awesome Icon Library --&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  &lt;style&gt;
  * {
    box-sizing: border-box;
  }
  
  body {
    font-family: Arial;
    margin: 0 auto; /* Center website */
    max-width: 800px; /* Max width */
    padding: 20px;
  }
  
  .heading {
    font-size: 25px;
    margin-right: 25px;
  }
  
  .fa {
    font-size: 25px;
  }
  
  .checked {
    color: orange;
  }
  
  /* Three column layout */
  .side {
    float: left;
    width: 15%;
    margin-top:10px;
  }
  
  .middle {
    margin-top:10px;
    float: left;
    width: 70%;
  }
  
  /* Place text to the right */
  .right {
    text-align: right;
  }
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* The bar container */
  .bar-container {
    width: 100%;
    background-color: #f1f1f1;
    text-align: center;
    color: white;
  }
  
  /* Individual bars */
  .bar-5 {width: 60%; height: 18px; background-color: #4CAF50;}
  .bar-4 {width: 30%; height: 18px; background-color: #2196F3;}
  .bar-3 {width: 10%; height: 18px; background-color: #00bcd4;}
  .bar-2 {width: 4%; height: 18px; background-color: #ff9800;}
  .bar-1 {width: 15%; height: 18px; background-color: #f44336;}
  
  /* Responsive layout - make the columns stack on top of each other instead of next to each other */
  @media (max-width: 400px) {
    .side, .middle {
      width: 100%;
    }
    .right {
      display: none;
    }
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;span class="heading"&gt;User Rating&lt;/span&gt;
  &lt;span class="fa fa-star checked"&gt;&lt;/span&gt;
  &lt;span class="fa fa-star checked"&gt;&lt;/span&gt;
  &lt;span class="fa fa-star checked"&gt;&lt;/span&gt;
  &lt;span class="fa fa-star checked"&gt;&lt;/span&gt;
  &lt;span class="fa fa-star"&gt;&lt;/span&gt;
  &lt;p&gt;4.1 average based on 254 reviews.&lt;/p&gt;
  &lt;hr style="border:3px solid #f1f1f1"&gt;
  
  &lt;div class="row"&gt;
    &lt;div class="side"&gt;
      &lt;div&gt;5 star&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="middle"&gt;
      &lt;div class="bar-container"&gt;
        &lt;div class="bar-5"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="side right"&gt;
      &lt;div&gt;150&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="side"&gt;
      &lt;div&gt;4 star&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="middle"&gt;
      &lt;div class="bar-container"&gt;
        &lt;div class="bar-4"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="side right"&gt;
      &lt;div&gt;63&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="side"&gt;
      &lt;div&gt;3 star&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="middle"&gt;
      &lt;div class="bar-container"&gt;
        &lt;div class="bar-3"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="side right"&gt;
      &lt;div&gt;15&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="side"&gt;
      &lt;div&gt;2 star&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="middle"&gt;
      &lt;div class="bar-container"&gt;
        &lt;div class="bar-2"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="side right"&gt;
      &lt;div&gt;6&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="side"&gt;
      &lt;div&gt;1 star&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="middle"&gt;
      &lt;div class="bar-container"&gt;
        &lt;div class="bar-1"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="side right"&gt;
      &lt;div&gt;20&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>