Code Monkey home page Code Monkey logo

vanilla-js-snippets's Introduction

Useful Vanilla JS Snippets

This is a compilation of vanilla js snippets for web developers.

Convert IPv4 to Decimal

/**
 * Convert IPv4 to Decimal
 * @param {String} ip - a String represents an IPv4
 * @returns a decimal if the input is valid. Otherwise, it returns -1.
 */
function convertIPv4toDecimal(ip) {
  // Simply validate input as IPv4
  const ipv4RegEx = /^(\d{1,3}\.){3}(\d{1,3})$/;
  const valid = ipv4RegEx.test(ip);
  if (!valid) {
    return -1;
  }

  let ipDecimal = 0;
  const octets = ip.split('.');

  for (let i = 0; i < 4; i++) {
    const octet = Number(octets[i]);

    // make sure each value is between 0 and 255
    if (octet > 255 || octet < 0) {
      return -1;
    }

    ipDecimal = ipDecimal * 256 + octet;
  }

  return ipDecimal;
}

Example:

  • Calling convertIPv4toDecimal("192.0.2.235") - would return 3221226219.

  • Calling convertIPv4toDecimal("192.0.2.300") - would return -1.

Visit Demo

Convert Decimal to IPv4

/**
 * Convert Decimal to IPv4
 * @param {Number} decimal - a Number represents a Decimal
 * @returns an IPv4 as String if the input is valid. 
 * Otherwise, it returns an empty string ("").
 */
function convertDecimalToIPv4(decimal) {
  if (typeof decimal !== "number" || 
      Number.isInteger(decimal) === false ||
      decimal < 0 || 
      decimal > 4294967295
  ) {
    return "";
  }

  const p1 = decimal >>> 24;
  const p2 = (decimal & 0x00ff0000) >>> 16;
  const p3 = (decimal & 0x0000ff00) >>> 8;
  const p4 = (decimal & 0x000000ff);

  if (p1 > 255 || p2 > 255 || p3 > 255 || p4 > 255) {
     return "";
  }

  return `${p1}.${p2}.${p3}.${p4}`;
}

Example:

  • Calling convertDecimalToIPv4("3221226219") - would return "192.0.2.235".

  • Calling convertDecimalToIPv4("-10000") - would return empty string ("").

Visit Demo

Get URL Variables

/**
 * Get the value corresponding with a variable in the URL's query string.
 * 
 * @param {String} variable - a variable to get in the URL's query string.
 * @returns the value of the variable.
 * 
 * Assume the URL is "http://www.example.com/index.php?id=1&image=awesome.jpg".
 * The query string is the result of calling "window.location.search"
 * So queryString = "?id=1&image=awesome.jpg".
 * 
 * Calling getQueryVariable("id") - would return "1".
 * Calling getQueryVariable(queryString, "image") - would return "awesome.jpg".
 * 
 * Ref: https://css-tricks.com/snippets/javascript/get-url-variables/
 */
function getURLVariable(variable) {
  const query = window.location.search.substring(1);
  const vars = query.split("&");
  const length = vars.length;

  for (let i = 0; i < length; i++) {
    const pair = vars[i].split("=");
    if (pair[0] === variable) { 
      return pair[1]; 
    }
  }

  return (false);
}

Example URL: http://www.example.com/index.php?id=1&image=awesome.jpg

  • Calling getURLVariable("id") - would return "1".
  • Calling getURLVariable("image") - would return "awesome.jpg".

Visit Demo

vanilla-js-snippets's People

Contributors

completejavascript avatar

Stargazers

 avatar

Watchers

 avatar

Forkers

elfhirdev

vanilla-js-snippets's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.