DEV Community: Mohammad Mirfatemi

Make Keyboard ShortCut in Javascript

Mohammad Mirfatemi — Tue, 05 Jul 2022 13:35:05 +0000

Creating a shortcut in javascript with 5 lines of code!
To create a shortcut, we must first listen to the pressing of the keyboard keys on the document
Then specify the keys we want to simplify with an if
Finally, we have to eliminate the normal behavior of that shirt with preventDefault

// Listen to keydown event on the document
document.addEventListener("keydown", (e) => {
  if (e.key.toLowerCase() === "s" && e.ctrlKey) {
    // disable the default behavior of the ctrl + s
    e.preventDefault();
    // your code here
    alert("S key pressed with ctrl");
  }
});

can you "AppendChild" same element multiple times in js ? Probably not

Mohammad Mirfatemi — Sun, 03 Jul 2022 07:47:59 +0000

in this case :

var d1 = document.createElement('div');
var d2 = document.createElement('div');
var p = document.createElement('p');

d1.appendChild(p); // d1 has p now
d2.appendChild(p); // d2 has p now
// but where is p in d1 ?

we cannot append "p" multiple times because in the DOM, being a tree of nodes, one node can have only one parent, it cannot have multiple parents.

But solution !

We can use cloneNode() , but I use another way
I want to use a function
like this :

//main function
function appendChildMultiple(parent) {
  //check function argument is an element
  if (parent.nodeType !== undefined) {
    const pTag = document.createElement("p");
    pTag.innerText = "This is the appended element";
    //finally append child to parent
    parent.appendChild(pTag);
  }
}

and use it :

const d1 = document.createElement("div");
const d2 = document.createElement("div");
appendChildMultiple(d1);
appendChildMultiple(d2);

an example on Codepen :

Do you think this method has good performance? Leave a comment below :)

a classic watch , width HTML CSS JS

Mohammad Mirfatemi — Sat, 02 Jul 2022 06:32:03 +0000

This is a simple project with HTML, CSS and Js GitHub repository: https://github.com/kiumad/clock_m