How To ConvertJQuery into Javascript

[missmc2017]

Hi Everyone,

I need to convert the following code here into working Javascript. Please note that the link listed is not a download nor spam. https://jsfiddle.net/tf7nb6yz/. This is the full code, to understand it fully I have uploaded it to JSFiddle.

Here are the parts that are JQuery that need to be converted:
First Part

$(".heading").each(function() {
  var $this, colors;
  $this = $(this);
  colors = getColors();
  $this.css({
    "backgroundColor": colors[0],
    "color": colors[1],
    "fontFamily": getFont()
  });
});

Second Part

$("body").keyup(function(e) {
  var colors = getColors();
  if ((e.which >= 65 && e.which <= 90) || e.which == 88 || e.which == 90 || (e.which >= 48 && e.which <= 57)) {
    $("<div class='letter'>" + String.fromCharCode(e.which) + "</div>").appendTo(".paper").css({
      "backgroundColor": colors[0],
      "color": colors[1],
      "fontFamily": getFont(),
      "fontSize": getSize(),
      "padding": getPadding(),
      "marginRight": getMargin(),
      "transform": getTransform()
    }).wrap("<div class='zoom'>");
  }

Third Part

if (e.which == 13) {
    $("<br>").appendTo(".paper").css("backgroundColor", "transparent");
  }
  if (e.which == 32) {
    $("<span class='letter space'>  </span>").appendTo(".paper").css("backgroundColor", "transparent");
  }
  if (e.which == 46) {

  }
});

These four methods need to be converted to Javascript, but I am having troubles. How would I do this so I have a workable solution that works? Also, if there is a working JQuery to Javascript convertor, please list it here. I’ve been googling all over for it but have not found it!

[ZooKeeper]

Is there any purpose beyond a learning practice which you are trying to accomplish this task?

[missmc2017]

Yes, I am attempting to use a ransom note generator but without external links or jquery. It is for a learning practice to help better understand BOM,DOM and function uses. Unfortunately, jquery cannot be used hence why the conversion. Using an API (Such as google) also will not work.

I was able to convert the first part successfully to this:

From this:

$(".heading").each(function() {
  var $this, colors;
  $this = $(this);
  colors = getColors();
  $this.css({
    "backgroundColor": colors[0],
    "color": colors[1],
    "fontFamily": getFont()
  });
});

To this:

document.querySelectorAll(".heading").forEach(function(head) {
  var colors = getColors();
  head.setAttribute("style", "backgroundColor: " + colors[0] + "; color: " + colors[1] + "; fontFamily: " + getFont() + ";");
});

Now its just the second

$("body").keyup(function(e) {
  var colors = getColors();
  if ((e.which >= 65 && e.which <= 90) || e.which == 88 || e.which == 90 || (e.which >= 48 && e.which <= 57)) {
    $("<div class='letter'>" + String.fromCharCode(e.which) + "</div>").appendTo(".paper").css({
      "backgroundColor": colors[0],
      "color": colors[1],
      "fontFamily": getFont(),
      "fontSize": getSize(),
      "padding": getPadding(),
      "marginRight": getMargin(),
      "transform": getTransform()
    }).wrap("<div class='zoom'>");
  }

and third part

if (e.which == 13) {
    $("<br>").appendTo(".paper").css("backgroundColor", "transparent");
  }
  if (e.which == 32) {
    $("<span class='letter space'>  </span>").appendTo(".paper").css("backgroundColor", "transparent");
  }
  if (e.which == 46) {

  }
});

that needs conversion.