In our developer workflow, we often encounter challenging problems that might require just a few lines of code to be solved. In this article, I attempted to compile useful snippets that may assist you when working with URLs, DOM, events, dates, user preferences, and so on.

All of the snippets were handpicked from 30 seconds of code. It's an awesome resource, I would highly recommend going to check it out for more stuff.

The main criterion for curating these was practical usability. Hopefully, you will find something valuable, that you can apply in your future codebases.

1. How to get the base URL?

<pre class="highlight javascript">```  
<span class="kd">const</span> <span class="nx">getBaseURL</span> <span class="o">=</span> <span class="nx">url</span> <span class="o">=></span> <span class="nx">url</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/</span><span class="se">[</span><span class="sr">?#</span><span class="se">]</span><span class="sr">.*$/</span><span class="p">,</span> <span class="dl">''</span><span class="p">);</span>

<span class="nx">getBaseURL</span><span class="p">(</span><span class="dl">'</span><span class="s1">http://url.com/page?name=Adam&surname=Smith</span><span class="dl">'</span><span class="p">);</span>  
<span class="c1">// 'http://url.com/page'</span>

###  2. How to check if the URL is absolute? 

```  
const isAbsoluteURL = str => /^[a-z][a-z0-9+.-]*:/.test(str);

isAbsoluteURL('https://google.com'); // true  
isAbsoluteURL('ftp://www.myserver.net'); // true  
isAbsoluteURL('/foo/bar'); // false

```  
```



###  3. How to get URL parameters as object? 

```  
```  
const getURLParameters = url =>  
  (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(  
    (a, v) => (  
      (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a  
    ),  
    {}  
  );

getURLParameters('google.com'); // {}  
getURLParameters('http://url.com/page?name=Adam&surname=Smith');  
// {name: 'Adam', surname: 'Smith'}

```  
```



###  4. How to check if the element contains another element? 

```  
```  
const elementContains = (parent, child) =>  
  parent !== child && parent.contains(child);

elementContains(  
  document.querySelector('head'),  
  document.querySelector('title')  
);  
// true  
elementContains(document.querySelector('body'), document.querySelector('body'));  
// false

```  
```



###  5. How to get all the ancestors of the element? 

```  
```  
const getAncestors = el => {  
  let ancestors = [];  
  while (el) {  
    ancestors.unshift(el);  
    el = el.parentNode;  
  }  
  return ancestors;  
};

getAncestors(document.querySelector('nav'));  
// [document, html, body, header, nav]

```  
```



###  6. How to smooth-scroll element into view? 

```  
```  
const smoothScroll = element =>  
  document.querySelector(element).scrollIntoView({  
    behavior: 'smooth'  
  });

smoothScroll('#fooBar'); // scrolls smoothly to the element with the id fooBar  
smoothScroll('.fooBar');  
// scrolls smoothly to the first element with a class of fooBar

```  
```



###  7. How to handle click outside the element? 

```  
```  
const onClickOutside = (element, callback) => {  
  document.addEventListener('click', e => {  
    if (!element.contains(e.target)) callback();  
  });  
};

onClickOutside('#my-element', () => console.log('Hello'));  
// Will log 'Hello' whenever the user clicks outside of #my-element

```  
```



###  8. How to generate UUID? 

```  
```  
const UUIDGeneratorBrowser = () =>  
  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>  
    (  
      c ^  
      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))  
    ).toString(16)  
  );

UUIDGeneratorBrowser(); // '7982fcfe-5721-4632-bede-6000885be57d'

```  
```



###  9. How to get the selected text? 

```  
```  
const getSelectedText = () => window.getSelection().toString();

getSelectedText(); // 'Lorem ipsum'

```  
```



###  10. How to copy text to the clipboard? 

```  
```  
const copyToClipboard = str => {  
  if (navigator && navigator.clipboard && navigator.clipboard.writeText)  
    return navigator.clipboard.writeText(str);  
  return Promise.reject('The Clipboard API is not available.');  
};

```  
```



###  11. How to add styles to HTML element? 

```  
```  
const addStyles = (el, styles) => Object.assign(el.style, styles);

addStyles(document.getElementById('my-element'), {  
  background: 'red',  
  color: '#ffff00',  
  fontSize: '3rem'  
});

```  
```



###  12. How to toggle full-screen mode? 

```  
```  
const fullscreen = (mode = true, el = 'body') =>  
  mode  
    ? document.querySelector(el).requestFullscreen()  
    : document.exitFullscreen();

fullscreen(); // Opens `body` in fullscreen mode  
fullscreen(false); // Exits fullscreen mode

```  
```



###  13. How to detect if Caps lock is on? 

```  
```  
  
   for="username">Username:  
   id="username" name="username">

   for="password">Password:  
   id="password" name="password" type="password">  
   id="password-message" style="display: none">Caps Lock is on  


```  
```



```  
```  
const el = document.getElementById('password');  
const msg = document.getElementById('password-message');

el.addEventListener('keyup', e => {  
  msg.style = e.getModifierState('CapsLock')  
    ? 'display: block'  
    : 'display: none';  
});

```  
```



###  14. How to check if the Date is valid? 

```  
```  
const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());

isDateValid('December 17, 1995 03:24:00'); // true  
isDateValid('1995-12-17T03:24:00'); // true  
isDateValid('1995-12-17 T03:24:00'); // false  
isDateValid('Duck'); // false  
isDateValid(1995, 11, 17); // true  
isDateValid(1995, 11, 17, 'Duck'); // false  
isDateValid({}); // false

```  
```



###  15. How to get colon time from Date? 

```  
```  
const getColonTimeFromDate = date => date.toTimeString().slice(0, 8);

getColonTimeFromDate(new Date()); // '08:38:00'

```  
```



###  16. How to generate UNIX timestamp from Date? 

```  
```  
const getTimestamp = (date = new Date()) => Math.floor(date.getTime() / 1000);

getTimestamp(); // 1602162242

```  
```



###  17. How to check the preferred language of the current user? 

```  
```  
const detectLanguage = (defaultLang = 'en-US') =>  
  navigator.language ||  
  (Array.isArray(navigator.languages) && navigator.languages[0]) ||  
  defaultLang;

detectLanguage(); // 'nl-NL'

```  
```



###  18. How to check the preferred color scheme of the user? 

```  
```  
const prefersDarkColorScheme = () =>  
  window &&  
  window.matchMedia &&  
  window.matchMedia('(prefers-color-scheme: dark)').matches;

prefersDarkColorScheme(); // true

```  
```



###  19. How to check if the device supports touch events? 

```  
```  
const supportsTouchEvents = () =>  
  window && 'ontouchstart' in window;

supportsTouchEvents(); // true

```  
```



Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

Connect me on [Twitter](https://twitter.com/madzadev), [LinkedIn](https://www.linkedin.com/in/madzadev/) and [GitHub](https://github.com/madzadev)!

Visit my [Blog](https://madza.dev/blog) for more articles like this.