DEV Community

coolprofessor
coolprofessor

Posted on • Edited on

JS Snippets

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

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

keyboard

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

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

I hope this was helpful!

Top comments (0)