assets/js/app.js
//Function to generate the Form that gathers information needed to process the API call
Function to generate the Form that gathers information needed to process the API call
Function to generate the Form that gathers information needed to process the API call
function makeSearchForm() {
  var searchForm = $("<form>");
      searchForm.attr("id", "searchForm");
      searchForm.attr("class", "form-horizontal");
  var nameDiv = $("<div>");
      nameDiv.attr("class", "form-group row justify-content-around");
  var nameLabel = $("<label>");
      nameLabel.attr("class", "col-sm-2 col-form-label labels");
      nameLabel.attr("for", "nameField");
      nameLabel.text("Name: ");
  var nameField = $("<input>");
      nameField.attr("type", "text");
      nameField.attr("id", "nameField");
      nameField.attr("class", "form-control col-sm-10");
      nameDiv.append(nameLabel);
      nameDiv.append(nameField);
  var emailDiv = $("<div>");
      emailDiv.attr("class", "form-group row justify-content-around");
  var emailLabel = $("<label>");
      emailLabel.attr("class", "col-sm-2 col-form-label labels");
      emailLabel.attr("for", "emailField");
      emailLabel.text("Email: ");
  var emailField = $("<input>");
      emailField.attr("type", "email");
      emailField.attr("id", "emailField");
      emailField.attr("class", "form-control col-sm-10");
      emailDiv.append(emailLabel);
      emailDiv.append(emailField);
  var ratingsDiv = $("<div>");
      ratingsDiv.attr("class", "form-group row justify-content-around");
  var ratingsLabel = $("<label>");
      ratingsLabel.attr("class", "col-sm-2 col-form-label labels");
      ratingsLabel.attr("for","ratingsGroup");
      ratingsLabel.text("Ratings: ");
  var ratingsGroup = $("<div>");
      ratingsGroup.attr("id", "ratingsGroup");
      ratingsGroup.attr("class", "form-check-inline col-sm-10");
      for (var j=0; j < ratings.length; j++) {
      var ratingsCheck = $("<input>");
      var ratingsText = $('<p>')
      ratingsCheck.attr("type", "checkbox");
      ratingsCheck.attr("class", "form-check-input");
      ratingsCheck.attr("id", "ratingsCheck" + ratings[j]);
      ratingsCheck.attr("name", "ratingsCheck" + ratings[j]);
      ratingsCheck.attr("value", ratings[j]);
      ratingsText.attr("class", "form-check-label labels");
      ratingsText.text(ratings[j]);
      ratingsCheck.appendTo(ratingsGroup);
      ratingsGroup.append(ratingsText)
      };
      ratingsDiv.append(ratingsLabel);
      ratingsDiv.append(ratingsGroup);
  var genresDiv = $("<div>");
      genresDiv.attr("class", "form-group row justify-content-around");
  var genresLabel = $("<label>");
      genresLabel.attr("class", "col-sm-2 col-form-label labels");
      genresLabel.attr("for", "genresDropdown");
      genresLabel.text("Genre: ");
  var genresDropdown = $("<select>");
      genresDropdown.attr("id", "genresDropdown");
      genresDropdown.attr("class", "form-control col-sm-10");
      for (var i = 0; i < genres.length; i++) {
      genresOption = $("<option>");
      genresOption.attr("value", genres[i].name);
      genresOption.attr("id", genres[i].id);
      genresOption.text(genres[i].name);
      genresDropdown.append(genresOption);
      };
      genresDiv.append(genresLabel);
      genresDiv.append(genresDropdown);
  var searchSubmitBtn = $("<button>");
  searchSubmitBtn.attr("id", "results");
  searchSubmitBtn.attr("type", "submit");
  searchSubmitBtn.attr("class", "btn btn-primary");
  searchSubmitBtn.text("Submit");
  nameDiv.appendTo(searchForm);
  emailDiv.appendTo(searchForm);
  ratingsDiv.appendTo(searchForm);
  genresDiv.appendTo(searchForm);
  searchSubmitBtn.appendTo(searchForm);
  searchForm.appendTo("#container");
  var selectedGenre = $("#genresDropdown option:selected").attr("id");
}
function makeSearchForm ( ) { var searchForm = $ ( "<form>" ) ; searchForm . attr ( "id" , "searchForm" ) ; searchForm . attr ( "class" , "form-horizontal" ) ; var nameDiv = $ ( "<div>" ) ; nameDiv . attr ( "class" , "form-group row justify-content-around" ) ; var nameLabel = $ ( "<label>" ) ; nameLabel . attr ( "class" , "col-sm-2 col-form-label labels" ) ; nameLabel . attr ( "for" , "nameField" ) ; nameLabel . text ( "Name: " ) ; var nameField = $ ( "<input>" ) ; nameField . attr ( "type" , "text" ) ; nameField . attr ( "id" , "nameField" ) ; nameField . attr ( "class" , "form-control col-sm-10" ) ; nameDiv . append ( nameLabel ) ; nameDiv . append ( nameField ) ; var emailDiv = $ ( "<div>" ) ; emailDiv . attr ( "class" , "form-group row justify-content-around" ) ; var emailLabel = $ ( "<label>" ) ; emailLabel . attr ( "class" , "col-sm-2 col-form-label labels" ) ; emailLabel . attr ( "for" , "emailField" ) ; emailLabel . text ( "Email: " ) ; var emailField = $ ( "<input>" ) ; emailField . attr ( "type" , "email" ) ; emailField . attr ( "id" , "emailField" ) ; emailField . attr ( "class" , "form-control col-sm-10" ) ; emailDiv . append ( emailLabel ) ; emailDiv . append ( emailField ) ; var ratingsDiv = $ ( "<div>" ) ; ratingsDiv . attr ( "class" , "form-group row justify-content-around" ) ; var ratingsLabel = $ ( "<label>" ) ; ratingsLabel . attr ( "class" , "col-sm-2 col-form-label labels" ) ; ratingsLabel . attr ( "for" , "ratingsGroup" ) ; ratingsLabel . text ( "Ratings: " ) ; var ratingsGroup = $ ( "<div>" ) ; ratingsGroup . attr ( "id" , "ratingsGroup" ) ; ratingsGroup . attr ( "class" , "form-check-inline col-sm-10" ) ; for ( var j = 0 ; j < ratings . length ; j ++ ) { var ratingsCheck = $ ( "<input>" ) ; var ratingsText = $ ( '<p>' ) ratingsCheck . attr ( "type" , "checkbox" ) ; ratingsCheck . attr ( "class" , "form-check-input" ) ; ratingsCheck . attr ( "id" , "ratingsCheck" + ratings [ j ] ) ; ratingsCheck . attr ( "name" , "ratingsCheck" + ratings [ j ] ) ; ratingsCheck . attr ( "value" , ratings [ j ] ) ; ratingsText . attr ( "class" , "form-check-label labels" ) ; ratingsText . text ( ratings [ j ] ) ; ratingsCheck . appendTo ( ratingsGroup ) ; ratingsGroup . append ( ratingsText ) } ; ratingsDiv . append ( ratingsLabel ) ; ratingsDiv . append ( ratingsGroup ) ; var genresDiv = $ ( "<div>" ) ; genresDiv . attr ( "class" , "form-group row justify-content-around" ) ; var genresLabel = $ ( "<label>" ) ; genresLabel . attr ( "class" , "col-sm-2 col-form-label labels" ) ; genresLabel . attr ( "for" , "genresDropdown" ) ; genresLabel . text ( "Genre: " ) ; var genresDropdown = $ ( "<select>" ) ; genresDropdown . attr ( "id" , "genresDropdown" ) ; genresDropdown . attr ( "class" , "form-control col-sm-10" ) ; for ( var i = 0 ; i < genres . length ; i ++ ) { genresOption = $ ( "<option>" ) ; genresOption . attr ( "value" , genres [ i ] . name ) ; genresOption . attr ( "id" , genres [ i ] . id ) ; genresOption . text ( genres [ i ] . name ) ; genresDropdown . append ( genresOption ) ; } ; genresDiv . append ( genresLabel ) ; genresDiv . append ( genresDropdown ) ; var searchSubmitBtn = $ ( "<button>" ) ; searchSubmitBtn . attr ( "id" , "results" ) ; searchSubmitBtn . attr ( "type" , "submit" ) ; searchSubmitBtn . attr ( "class" , "btn btn-primary" ) ; searchSubmitBtn . text ( "Submit" ) ; nameDiv . appendTo ( searchForm ) ; emailDiv . appendTo ( searchForm ) ; ratingsDiv . appendTo ( searchForm ) ; genresDiv . appendTo ( searchForm ) ; searchSubmitBtn . appendTo ( searchForm ) ; searchForm . appendTo ( "#container" ) ; var selectedGenre = $ ( "#genresDropdown option:selected" ) . attr ( "id" ) ; }
Function to generate the Form that gathers information needed to process the API call
Function to generate the Form that gathers information needed to process the API call
//Create the Form to which all form fields will be appended //Generate the Name Field //Generate the Email Field //Generate the Ratings Checkboxes //Generate the Genres Dropdown List //Generate the Submit button //Connect the form components //Append the form and button to the HTML