jQuery and Ice Cream

JavaScript

Ice Cream and JavaScript

document.addEventListener("DOMContentLoaded", function(){
/* js to be executed when dom is loaded goes here */

  let iceCreamOptions = document.getElementById("icecream_options_v2");
  let wantRadioButtons = document.querySelectorAll("form input[name=want]");

  let icoClasses = iceCreamOptions.classList;
  icoClasses.add("collapsed");

  for (let radio of wantRadioButtons) {
    radio.addEventListener("click",function(){
      let yesRadio = document.getElementById("ic_yes");
      if (yesRadio.checked == true) {
        icoClasses.remove("collapsed");
      } else {
        icoClasses.add("collapsed");
      }
    })
  }

});

jQuery

Ice Cream and jQuery

• jQuery automatically sets up loops if there are multiple items
  e.g. $("form input[name=want]")

$(document).ready(function(){
  console.log("jQuery ready!");
  let iceCreamOptions = $("#icecream_options_v2");
  let wantRadioButtons = $("#form input[name=want]");

  iceCreamOptions.addClass("collapsed");
  yesRadio = $('#ic_yes');
  $("form input[name=want]").click( function(){
    if (yesRadio.is(':checked') == true) {
      iceCreamOptions.removeClass("collapsed");
    } else {
      iceCreamOptions.addClass("collapsed");
    }
  })
});