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?