JS Snippets
Tags: javascript, webdev, refrence
Published: 2021-10-14 23:30:14

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


## mouse cursor

```javascript
//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'
```

## sound
```javascript
audio.play(new Audio('audio_file.mp3'));
```

## download
``` javascript
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()}
```

## user-highlighted text
```javascript
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}
``` 

## copy
```javascript
function copy(copytext){navigator.clipboard.writeText(copytext)};
```

## random
```javascript
function random(min,max){return min+Math.random()*(max-min)};
```

## distance
```javascript
const distance = (x1,y1,x2,y2) => Math.hypot(x1 - x2, y1 - y2);
```

## angle
```javascript
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}
```

## wait
```javascript
wait=(ms)=>{forever();refresh();let now=Date.now(),end=now+ms;while(now<end){now=Date.now()}};
```
> This is not recommended, because it stops the entire JS engine.

## repeat
```javascript
repeat=(times,what)=>{for(i=0;i<times;i+=1){what()}}
```
## make editable
```javascript
document.getElementById('el').contentEditable = 'true'
```

### keyboard
```javascript
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()});
```

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
```javascript
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});
```

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!