in

JS Snippets – DEV Community


I often find myself on stackoverflow looking for these snippets of code, so I put it all in one place.



key input

key={pressed:false,up:function(){},down:function(){},name:"",code:null};keyList={num8:"backspace",num9:"tab",num13:"enter",num16:"shift",num17:"ctrl",num18:"alt",num19:"pause",num20:"caps",num27:"exit",num32:" ",num33:"pgup",num34:"pgdn",num35:"end",num36:"home",num37:"left",num38:"up",num39:"right",num40:"down",num45:"insert",num46:"del",num48:0,num49:1,num50:2,num51:3,num52:4,num53:5,num54:6,num55:7,num56:8,num57:9,num65:"a",num66:"b",num67:"c",num68:"d",num69:"e",num70:"f",num71:"g",num72:"h",num73:"i",num74:"j",num75:"k",num76:"l",num77:"m",num78:"n",num79:"o",num80:"p",num81:"q",num82:"r",num83:"s",num84:"t",num85:"u",num86:"v",num87:"w",num88:"x",num89:"y",num90:"z",num91:"win",num92:"win",num93:"select",num96:0,num97:1,num98:2,num99:3,num100:4,num101:5,num102:6,num103:7,num104:8,num105:9,num106:"*",num107:"+",num109:"-",num110:".",num111:"/",num112:"F1",num113:"F2",num114:"F3",num115:"F4",num116:"F5",num117:"F6",num118:"F7",num119:"F8",num120:"F9",num121:"F10",num122:"F11",num123:"F12",num144:"numlock",num145:"scroll lock",num186:";",num187:"=",num188:",",num189:"-",num190:".",num191:"/",num192:"`",num219:"[",num219:"-",num220:"",num221:"]",num222:"'"};window.addEventListener("keypress",(keyIsPressed)=>{key.name=eval("keyList.num"+keyIsPressed.keyCode);if(key.name===undefined){key.code=""}key.pressed=true;key.down()});window.addEventListener("keyup",(event)=>{key.pressed=false;key.up()});
Enter fullscreen mode

Exit fullscreen mode

This creates a key object that holds keyboard info.

name type value
name str name of last key pressed
pressed bool whether key up or down
up func function triggered on keyup
down func function triggered on keydown
num int JS keycode



Mouse input

mouse={x:0,y:0,scroll:function(){},scrollX:0,scrollY:0,down:function(){},up:function(){},moved:function(){},pressed:false,button:undefined};window.addEventListener("mousedown",(event)=>{mouse.pressed=true;mouse.down();mouse.button=event.button});document.addEventListener('mousemove',(event)=>{mouse.moved();mouse.px=mouse.x;mouse.px=mouse.x;mouse.x=event.clientX+mouse.scrollX;mouse.y=event.clientY+mouse.scrollY});window.addEventListener('touchstart',function(e){mouse.pressed=true;mouse.x=e.changedTouches[0].pageX;mouse.y=e.changedTouches[0].pageY},false);window.addEventListener('touchmove',function(e){mouse.x=e.changedTouches[0].pageX;mouse.y=e.changedTouches[0].pageY;},false);window.addEventListener('touchend',function(e){mouse.pressed=false},false);window.addEventListener("mouseup",(event)=>{mouse.pressed=false;mouse.up()});window.addEventListener("scroll",function(){mouse.scroll();mouse.x+=window.scrollX-mouse.scrollX;mouse.y+=window.scrollY-mouse.scrollY;mouse.scrollX=window.scrollX;mouse.scrollY=window.scrollY});
Enter fullscreen mode

Exit fullscreen mode

This creates a mouse object that holds mouse info.

name type value
x int horizontal mouse position
y int vertical mouse position
scrollX int horizontal scroll position
scrollY int vertical scroll position
up func function triggered on mouseup
down func function triggered on mousedown
up func function triggered on keyup
scroll func function triggered on scroll
button int button number pressed



mouse cursor

//This code is required for Firefox.
document.documentElement.style='height:100%;width:100%;padding:0';
//use this to change the CSS cursor
document.documentElement.style.cursor = 'pointer'
Enter fullscreen mode

Exit fullscreen mode



sound

audio.play(new Audio('audio_file.mp3'));
Enter fullscreen mode

Exit fullscreen mode



download

function download(name,contents){var c=document.createElement("a");c.download=name;var t=new Blob([contents],{type:"text/plain"});c.href=window.URL.createObjectURL(t);c.click()}
Enter fullscreen mode

Exit fullscreen mode



user-highlighted text

function highlightedText(){var text="";if(window.getSelection){text=window.getSelection().toString()}else if(document.selection&&document.selection.type!="Control"){text=document.selection.createRange().text}return text}
Enter fullscreen mode

Exit fullscreen mode



copy

function copy(copytext){navigator.clipboard.writeText(copytext)};
Enter fullscreen mode

Exit fullscreen mode



random

function random(min,max){return min+Math.random()*(max-min)};
Enter fullscreen mode

Exit fullscreen mode



distance

const distance = (x1,y1,x2,y2) => Math.hypot(x1 - x2, y1 - y2);
Enter fullscreen mode

Exit fullscreen mode



angle

function angle(x1,y1,x2,y2){var theta=Math.atan2((y2-y1),(x2-x1))*(180/Math.PI);if(theta<0){theta=360+theta}return theta}
Enter fullscreen mode

Exit fullscreen mode



wait

wait=(ms)=>{forever();refresh();let now=Date.now(),end=now+ms;while(now<end){now=Date.now()}};
Enter fullscreen mode

Exit fullscreen mode

This is not recommended, because it stops the entire JS engine.



repeat

repeat=(times,what)=>{for(i=0;i<times;i+=1){what()}}
Enter fullscreen mode

Exit fullscreen mode



make editable

document.getElementById('el').contentEditable = 'true'
Enter fullscreen mode

Exit fullscreen mode

I hope this was somewhat helpful!



Source: https://dev.to/coolprofessor/js-snippets-31lf

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

Prompt-Based Learning for Dialogue Systems

An example project using communication between services with gRPC and React