title: jQuery/CSS to create a Form for style choosing. That will change aspects of the page
body: <p>In class I am suppose to use the jQuery method of CSS to create a Form that allows the user to change aspects of the page.  I am struggling with the CSS part.  I created a function for the Form to Submit and also display the chosen results.  But cant figure out how to apply CSS to the form to change the page.  Any ideas or help would be great.  Thanks</p>
  
  <pre><code>  &lt;form id="style-form"&gt;
  
  &lt;div&gt;
   &lt;label for="fontColor"&gt;Font Color&lt;/label&gt;
   &lt;select name="font-color" id="fontColor"&gt;
    &lt;option value="" disabled selected="selected"&gt;--Choose--&lt;/option&gt;
    &lt;option value="blue"&gt;Blue&lt;/option&gt;
    &lt;option value="red"&gt;Red&lt;/option&gt;
    &lt;option value="green"&gt;Green&lt;/option&gt;
   &lt;/select&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
   &lt;label for="fontFamily"&gt;Font Family&lt;/label&gt;
   &lt;select name="font-family" id="fontFamily"&gt;
    &lt;option value="" disabled selected="selected"&gt;--Choose--&lt;/option&gt;
    &lt;option value="times"&gt;Times New Roman&lt;/option&gt;
    &lt;option value="arial"&gt;Arial&lt;/option&gt;
    &lt;option value="monospace"&gt;Monospace&lt;/option&gt;
   &lt;/select&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
   &lt;label for="fontSize"&gt;Font Size&lt;/label&gt;
   &lt;select name="font-size" id="fontSize"&gt;
    &lt;option value="" disabled selected="selected"&gt;--Choose--&lt;/option&gt;
    &lt;option value="12"&gt;12&lt;/option&gt;
    &lt;option value="14"&gt;14&lt;/option&gt;
    &lt;option value="16"&gt;16&lt;/option&gt;
   &lt;/select&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
   &lt;input type="submit" value="Submit Form" /&gt;
  &lt;/div&gt;
  
  &lt;/form&gt;
  
  &lt;div id="results"&gt;
  &lt;/div&gt;
  
  $(function() {
   $('#style-form').on('submit', function(evnt) {
    evnt.preventDefault();
   $('#results').html('');
     let elements = this.elements;
     let index = 0;
    while (elements.item(index) !== null) {
     let el = elements.item(index);
     el = $(el);
     let name = el.attr('name');
     let value = el.val();
     console.log(name + ': ' + value);
    $('#results').append('&lt;p&gt;&lt;strong&gt;' + name + '&lt;/strong&gt;: ' + 
     value + '&lt;/p&gt;');
    index++;
    }
    });
    });
  </code></pre>