Convert or change jquery methods into vanilla javascript

Question

0.00/5 (No votes)

See more:

Hi all,

I need to be able to change the current JQuery Methods into Vanilla(regular) javascript parts. The full code can be found here (Edit fiddle - JSFiddle[^]. Note the link is not spam, download, promoting, etc. It is simply displaying to a popular tool/IDE for webpage results that most IT/Coding sites use, especially for Web Design). Unfortunately, external sites or API's cannot be used (thus the reason for the conversion). I also understand that jquery is part of javascript but that is not what I am looking for. I am looking to convert the remaining jquery segments into workable javascript. :)

What I have tried:

Here's what I've tried so far:

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

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

The Second Before:

<pre>$("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'>");
  }

2nd 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) {

  }
});

I am struggling to convert the second Before and the 2nd part successfully into workable Javascript. If there is a tool available that does, feel free to add (would also appreciate as well). I have read upon many sites, looked at the Mozilla reference, and googled but have not successfully found the workable and understandable solution. Perhaps a helpful Javascript Expert(s) could solve this dilemma?

Posted 27-Nov-17 16:18pm

Member 13491039

Updated 28-Nov-17 0:13am

Add a Solution

Comments

Sinisa Hajnal 28-Nov-17 3:30am

jQuery is open source, take the function you need from the source file and use that instead of jQuery --> you may need to follow dependencies through multiple functions. Good luck

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Answer 1 · 2017-11-27T21:34:00

try

var allheadings = document.getElementsByClassName('heading');
for (var i = 0; i < allheadings.length; i++) {
    var heading = allheadings[i];
    var colors = getColors();
    heading.style.backgroundColor = colors[0];
    heading.style.color = colors[1];
    heading.style.fontFamily = getFont()
}

document.body.addEventListener("keyup", function (e) {
    if ((e.which >= 65 && e.which <= 90) || e.which == 88 || e.which == 90 || (e.which >= 48 && e.which <= 57)) {
        var div = document.createElement('div');
        div.className = 'letter';
        div.innerText = String.fromCharCode(e.which);

        var papers = document.getElementsByClassName('paper');
        for (var i = 0; i < papers.length; i++) {
            var paper = papers[i];
            var zoom = document.createElement('div');
            zoom.className = 'zoom';
            zoom.appendChild(paper);
            paper.appendChild(div);
            paper.style.backgroundColor = colors[0];
            paper.style.color = colors[1];
            paper.style.fontFamily = getFont();
            paper.style.fontSize = getSize();
            paper.style.padding = getPadding();
            paper.style.marginRight = getMargin();
            paper.style.transform = getTransform();
        }


        if (e.which == 13) {
            var papers = document.getElementsByClassName('paper');
            for (var i = 0; i < papers.length; i++) {
                var paper = papers[i];
                paper.style.backgroundColor = 'transparent'
                var br = document.createElement('br');
                paper.appendChild(br);
            }

        }
        if (e.which == 32) {
            var papers = document.getElementsByClassName('paper');
            for (var i = 0; i < papers.length; i++) {
                var paper = papers[i];
                paper.style.backgroundColor = 'transparent'
                var br = document.createElement('br');
                var span = document.createElement('span');
                span.className = 'letter space';
                paper.appendChild(br);
                paper.appendChild(span);
            }

            
        }
        if (e.which == 46) {

        }
    }
});