title: Auto Updated Progress Bar with a form in HTML, CSS, JS
body: <p>First off, I'm very new to coding. I'm making a website on WordPress for myself and have run into the problem of needing something that's not available. So instead of paying someone for it, I've decided that I want to learn it!</p>
  
  <p>I'm trying to make a progress bar with HTML, JS, and CSS that automatically updates after a user submits a number using a form. I don't know how to make the 'Submit' button work so that when the form is submitted, the number gets added to the progress bar's value.
  For example: if the progress bar is at 50/100 and someone submits a 10 (for example, but it will be chosen by the user), how do I make it so the progress bar updates to 60/100? After this is submitted, I would want there to be a list of users under the updated progress bar who have submitted by first name and what number they submitted. I'm assuming I need some sort of function to connect JS to HTML and display code to display the list of names with numbers submitted. </p>
  
  <p>This is what I have tried in JSFiddle so far. I'm stuck because whenever I hit submit it changes the window where it ran the code to just a white box:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;h3&gt;Quantity&lt;/h3&gt;
  &lt;div class="progress"&gt;
  &lt;div class="progress-bar" role="progressbar"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;h5&gt;Fill out the form below:&lt;/h5&gt;
  &lt;form action="action_page.php"&gt;
  First name:&lt;br&gt;
  &lt;input type="text" name="firstname"&gt;&lt;br&gt;
  Last name:&lt;br&gt;
  &lt;input type="text" name="lastname"&gt;&lt;br&gt;
  Email:&lt;br&gt;
  &lt;input type="email" name="email"&gt;&lt;br&gt;
  Quantity:&lt;br&gt;
  &lt;input type="number" name="quantity" min="1" max="10000"&gt;&lt;br&gt;&lt;br&gt;
  &lt;form action="action_page.php"&gt;
  Select images: &lt;input type="file" name="img" multiple&gt;
  &lt;br&gt;
  &lt;input type="submit" value="Submit"&gt;
  &lt;input type="reset"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.progress, .alert {
  margin: 15px;
  border-radius: 25px;}
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var $progress = $('.progress');
  var $progressBar = $('.progress-bar');
  var $quantity = $('.quantity');
  
  $progressBar.animate({width: "50"}, 100);
  </code></pre>
  
  <p>Thank you so much for your help and explanations in advanced!</p>