Slice in javascript

Something Like that:
slice

slice() extracts a part of a string and returns the extracted part in a new string.
The method takes 2 parameters: the starting index (position), and the ending index (position).
This example slices out a portion of a string from position 7 to position 13

For example I want to written Banana.

For that you need to create first html code.

HTML

<p id="demo"></p>

After that add this JS code.

JS

var str = "Apple, Banana, Kiwi";
var res = str.slice(7, 13);
document.getElementById("demo").innerHTML = res;

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”GvgaJM” default_tab=”js,result” user=”pradeepanvi”]See the Pen Slice in javascript 01 by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

If a parameter is negative, the position is counted from the end of the string.
This example slices out a portion of a string from position -12 to position -6

JS

var str = "Apple, Banana, Kiwi";
var res = str.slice(-12, -6);
document.getElementById("demo").innerHTML = res;

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”RZNmaZ” default_tab=”result” user=”pradeepanvi”]See the Pen Slice in javascript 02 by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see Banana

Now I want there should be Banana, Kiwi

If you omit the second parameter, the method will slice out the rest of the string

JS

var str = "Apple, Banana, Kiwi";
var res = str.slice(7);
document.getElementById("demo").innerHTML = res;

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”EvazZV” default_tab=”result” user=”pradeepanvi”]See the Pen Slice in javascript 03 by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

or, counting from the end

JS

var str = "Apple, Banana, Kiwi";
var res = str.slice(-12);
document.getElementById("demo").innerHTML = res;

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”mMyYWp” default_tab=”result” user=”pradeepanvi”]See the Pen Slice in javascript 04 by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see Banana, Kiwi

String Length in javascript

Something Like that:
length

For that you need to create first html code.

HTML

<p id="demo"></p>

After that add this JS code.

JS

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
document.getElementById("demo").innerHTML = sln;

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”NvPmoY” default_tab=”js,result” user=”pradeepanvi”]See the Pen String Length in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see string length 26

get current date in javascript

Something Like that:
get date like 24/07/2017

For that you need to create first html code.

HTML

<p id="demo"></p>

After that add this JS code.

JS

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!

var yyyy = today.getFullYear();
if(dd<10){
    dd='0'+dd;
} 
if(mm<10){
    mm='0'+mm;
} 
var today = dd+'/'+mm+'/'+yyyy;
document.getElementById("demo").innerHTML = today;

[codepen_embed height="265" theme_id="0" slug_hash="KvKWax" default_tab="js,result" user="pradeepanvi"]See the Pen get date like 24/07/2017 by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Get current date with timezone in javascript

Something Like that:
Mon Jul 24 2017 12:24:49 GMT+0530 (India Standard Time)

For that you need to create first html code.

HTML

<p id="demo"></p>

After that add this JS code.

JS

document.getElementById("demo").innerHTML = Date();

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”MvWpjZ” default_tab=”js,result” user=”pradeepanvi”]See the Pen Get current date with timezone in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

How to sum string number in javascript

var num1 = '20',
num2 = '30.5';

Whenever you see the value into ” sign. So this is not number, this is string.

JS

var num1 = '20',
    num2 = '30.5';

var sumN = num1 + num2;

document.getElementById("demo").innerHTML = sumN

HTML

<div id="demo"></div>

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”gxYyJK” default_tab=”result” user=”pradeepanvi”]See the Pen sum string in javascript test by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

So the answer will be like 2030.5, and we want that should be 50.5, For we need to convert string into number.
There is many options.

First is the unary plus operator to convert them to numbers first. Just add + sign before variable.
Second ParseInt Method.

var num1 = '20',
    num2 = '30.5';

var sumN = +num1 + +num2;
var sumN2 = parseInt(num1 + num2);
//unary plus operator
document.getElementById("demo").innerHTML = sumN;
//parseInt method
document.getElementById("demo2").innerHTML = sumN;

HTML

<div id="demo"></div>
<div id="demo2"></div>

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”wqwbwR” default_tab=”result” user=”pradeepanvi”]See the Pen sum string in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

What does mean * into css

*

All CSS not showing in online page, but show on view source with css link.
In HTML every tag takes global css margin and padding. If we don’t give any css.

  <h1>Heading</h1>
  <p>Hello</p>

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”QMLQeG” default_tab=”html,result” user=”pradeepanvi”]See the Pen HTML by default Global CSS by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

We can give there manual css margin and padding

body{margin:0;padding:0;}
h1{margin:0;padding:0;}
p{margin:0;padding:0;}

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”mMboNO” default_tab=”css,result” user=”pradeepanvi”]See the Pen manual css by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now with * css

*{margin:0;padding:0;}

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”eEOXoQ” default_tab=”css,result” user=”pradeepanvi”]See the Pen What does * css by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

What is * css

* css means target global. If we need to give more than one selector css, just simply use * css.

How to remove unnecessary blue outline from everywhere with css

All CSS not showing in online page, but show on view source with css link.

*{
outline:none;
}

How to use font face in css

@font-face {}

All CSS not showing in online page, but show on view source with css link.

@font-face {
	font-family: "opensanshebrew";
	src: url("../fonts/opensanshebrew-regular.eot");
	src: url("../fonts/opensanshebrew-regular.woff") format("woff"),
	url("../fonts/opensanshebrew-regular.ttf") format("truetype"),
	url("../fonts/opensanshebrew-regular.svg") format("svg");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "opensanshebrew";
	src: url("../fonts/opensanshebrew-bold.eot");
	src: url("../fonts/opensanshebrew-bold.woff") format("woff"),
	url("../fonts/opensanshebrew-bold.ttf") format("truetype"),
	url("../fonts/opensanshebrew-bold.svg") format("svg");
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: "opensanshebrew";
	src: url("../fonts/opensanshebrew-bolditalic.eot");
	src: url("../fonts/opensanshebrew-bolditalic.woff") format("woff"),
	url("../fonts/opensanshebrew-bolditalic.ttf") format("truetype"),
	url("../fonts/opensanshebrew-bolditalic.svg") format("svg");
	font-weight: bold;
	font-style: italic;
}
@font-face {
	font-family: "opensanshebrew";
	src: url("../fonts/opensanshebrew-italic.eot");
	src: url("../fonts/opensanshebrew-italic.woff") format("woff"),
	url("../fonts/opensanshebrew-italic.ttf") format("truetype"),
	url("../fonts/opensanshebrew-italic.svg") format("svg");
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: "opensanshebrew";
	src: url("../fonts/opensanshebrew-light.eot");
	src: url("../fonts/opensanshebrew-light.woff") format("woff"),
	url("../fonts/opensanshebrew-light.ttf") format("truetype"),
	url("../fonts/opensanshebrew-light.svg") format("svg");
	font-weight: 300;
	font-style: normal;}

body{font-family: "opensanshebrew"; font-weight: normal;}
.h1{font-weight: bold;}

Also you can import font-family from google into css file.

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');
body{font-family: 'Open Sans', sans-serif; font-weight: normal;}
.h1{font-weight: bold;}

Font face also use with HTML
Copy this code into the of your HTML document.
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">

body{font-family: 'Open Sans', sans-serif; font-weight: normal;}
.h1{font-weight: bold;}

How to use wbr tag


<wbr>

All Tags not showing in online page, but show on view source.

<p>This familiar with the XML<wbr>Http</wbr>Request Object.</p>

Code show like this:

This familiar with the XMLHttpRequest Object.

Browser Support

The <wbr> tag is not supported in Internet Explorer.

What is wbr tag

wbr tag is means Word Break Opportunity. wbr tag is used to where in a text it would be ok to add a line-break.

How to use video tag


<video>

All Tags not showing in online page, but show on view source.

<video width="320" height="240" controls>
  <source src="img/video.mp4" type="video/mp4">
  <source src="img/video.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Code show like this:

Browser Support

The <video> tag is not supported in Internet Explorer 8 and earlier versions.

What is video tag

video tag is used to for a video.

HTML5

video tag is new in html5.