Author: admin

In there you can only find about angular 2 and angular 4 not angular 1

When did Angular 2 start?
Mid 2014	– Started Development
Sep 19, 2014	– Initial Code Commit
March 14, 2015	– First Alpha Version released
Dec 16, 2015	– First Beta version released
May 3, 2016	– Release Candidate version unveiled.
Sep 14, 2016	– Production Release
Dec 12, 2016	– 2.3.0
When did Angular 4 start?
Dec 14, 2016	– beta 0
Dec 21, 2016	– beta 1
Jan 4, 2017	– beta 2
Jan 11, 2017	– beta 3
Jan 18, 2017	– beta 4
Jan 25, 2017	– beta 5
Feb 1, 2017	– beta 6
Feb 8, 2017	– RC 0
Feb 15, 2017	– RC 1
Feb 22, 2017	– RC 2
March 01, 2017	– 4.0.0

Interview Question in HTML

How to center div vertically and horizontally?

Interview Question in CSS

What is difference between position absolute and relative?

Interview Question in Javascript

What is difference between let and var?

What is closure?

What is function constructor?

How to sum string number in javascript?

Replace and Global Replace in javascript?

Join two or more words in javascript?

Javascript Types?

Something Like that:
let vs var

var will take scoping to the nearest function block.
let will take scoping to the nearest enclosing block.
Only difference is scoping

We will start with create function and block into this.

Var

For that you need to create first html code.

HTML

<p id="demo1"></p>
<p id="demo2"></p>

After that add this JS code.

JS

function forVar(){
  var x = "Google";
  if (x == "Google") {
  var x = "Home2it";
  document.getElementById("demo1").innerHTML = x;
  }
  document.getElementById("demo2").innerHTML = x;
}
forVar();

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”qXQQOW” default_tab=”result” user=”pradeepanvi”]See the Pen Difference between let and var by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see the both x value has been update

Home2it
Home2it

But in the let scope will not.

For that you need to create first html code.

HTML

<p id="demo3"></p>
<p id="demo4"></p>

After that add this JS code.

JS

function forLet(){
  let y = "Google";
  if (y == "Google") {
  let y = "Home2it";
  document.getElementById("demo3").innerHTML = y;
  }
  document.getElementById("demo4").innerHTML = y;
}
forLet();

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”eEQxpE” default_tab=”result” user=”pradeepanvi”]See the Pen Difference between let and var 02 by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see the both y value is not update

Home2it
Google

Something Like that:
$('.owl-carousel').owlCarousel();

First we will make normal owlCarousel

For that you need to create first html code.

HTML

<div class="owl-carousel owl-theme owl-tanants client_list_sec">
  <div class="item">
    <ul>
      <li>Lorem Ipsum is simply dummy text of the printing and</li>
    </ul>
  </div>
  <div class="item">
    <ul>
      <li>Lorem Ipsum is simply dummy text of the printing and</li>
    </ul>
  </div>
  <div class="item">
    <ul>
      <li>Lorem Ipsum is simply dummy text of the printing and</li>
    </ul>
  </div>
  <div class="item">
    <ul>
      <li>Lorem Ipsum is simply dummy text of the printing and</li>
    </ul>
  </div>
  <div class="item">
    <ul>
      <li>Lorem Ipsum is simply dummy text of the printing and</li>
    </ul>
  </div>
  <div class="item">
    <ul>
      <li>Lorem Ipsum is simply dummy text of the printing and</li>
    </ul>
  </div>
</div>

After that add this CSS Library from owlCarousel.
/*Not necessary use.
https://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css
https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css
/*Must be Use.
https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css

Now
Use jQuery Library.
and this
https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js

After that add this JQuery code.

JS

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    items:5
})

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

Now you can see

Something is wrong in responsive view 5 items is showing every time.
For that we will use Responsive Code.

JS

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”brmyaW” default_tab=”html,result” user=”pradeepanvi”]See the Pen owlCarousel responsive jQuery by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

Now Try to destroy owlCarousel.
Just Use One line code below owlCarousel code.

JS

$('.owl-tanants').owlCarousel('destroy');

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”MvPdgv” default_tab=”html,result” user=”pradeepanvi”]See the Pen owlCarousel Destroy jQuery by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see nothing

But If you see from top there is one li code in each ul code, But now I want to 2 li code in each ul, for that use this code.

JS

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})


$('.owl-tanants').owlCarousel('destroy');
$(".client_list_sec .item ul li").unwrap();
$(".client_list_sec .item li").unwrap();
//wrap every 2 li in ul
var ul = $(".client_list_sec li");
for(var i=0; i');
}
$(".client_list_sec ul").wrap('
');
$('.owl-tanants').owlCarousel({
	rtl:true,
    loop:true,
	touchDrag:true,
	autoplay:false,
    autoplayTimeout:2000,
	nav:true,
	items:1
});

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”prOrzy” default_tab=”js,result” user=”pradeepanvi”]See the Pen owlCarousel Destroy and rebuild jQuery by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

Something Like that:
body scroll top jQuery

For that you need to create first html code.

HTML

<span class="scroll_top">Go to Top</span>

After that add this CSS code.

CSS

body {
  height: 900px;
}

.scroll_top {
  width: 50px;
  height: 50px;
  text-align: center;
  color: #fff;
  background: #000;
  display: inline-block;
  position: fixed;
  right: 10px;
  bottom: 10px;
  cursor: pointer;
}

Use jQuery Library.

After that add this JQuery code.

JS

$('.scroll_top').click(function(){ 	$('html, body').animate({ scrollTop:0 },900); });

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

Now you can see

Something Like that:
parallax scrolling jquery

For that you need to create first html code.

HTML

<ul class="gallery_menu">
  <li> <a href="#Home">Home</a></li>
  <li><a href="#About">About</a></li>
  <li><a href="#Cont1">Cont1</a></li>
  <li><a href="#Cont2">Cont2</a></li>
</ul>
<div class="portfolio-filter">
  <div id="Home">Home</div>
  <div id="About">About</div>
  <div id="Cont1">Cont1</div>
  <div id="Cont2">Cont2</div>
</div>

After that add this CSS code.

CSS

.gallery_menu {
  padding: 0;
  position: fixed;
}
.gallery_menu li {
  display: inline-block;
  background: #f5f5f5;
  border: 1px solid #ccc;
}
.gallery_menu li a {
  padding: 10px 15px;
  display: block;
  text-decoration: none;
  color: inherit;
}

.portfolio-filter div {
  width: 100%;
  height: 100vh;
  text-align: center;
  line-height: 200px;
  background: #f5f5f5;
  display: inline-block;
}
.portfolio-filter div:nth-child(2) {
  background: #ccc;
}
.portfolio-filter div:nth-child(3) {
  background: #0ff;
}
.portfolio-filter div:nth-child(4) {
  background: #ff0;
}

Use jQuery Library.

After that add this JQuery code.

JS

$('a[href^="#"]').on('click',function (e) {
	e.preventDefault();

	var target = this.hash,
	$target = $(target);

	$('html, body').stop().animate({
		'scrollTop': $target.offset().top
	}, 900, 'swing', function () {
		window.location.hash = target;
	});
});

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

Now you can see

Something Like that:
Sticky header JQuery

For that you need to create first html code.

HTML

<header>This is my header</header>

After that add this CSS code.

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  height: 900px;
}

header {
  left: 0;
  right: 0;
  padding: 20px 10px;
  background: #ccc;
  text-align: center;
}
header.fixed {
  position: fixed;
}

Use jQuery Library.

After that add this JQuery code.

JS

$(window).bind("scroll", function(){
$(window).scrollTop() > 300 ? $('header').addClass('fixed') : $('header').removeClass('fixed');
});

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

Something Like that:
Show and Hide div jQuery

First we will see normal html code.
For that you need to create first html code.

HTML

<div class="content">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been</p>
  <p class="show_area"> the industry's standard dummy text ever since the 1500 Letraset sheets containing Lorem Ipsum passages, and more recently with desktop</p><span class="show_d">Read More</span><span class="hide_d">Read Less</span>
</div>

After that add this CSS code.

CSS

.content .show_area {
  display: none;
}
.content span {
  display: inline-block;
  background: #ccc;
  padding: 8px 10px;
  cursor: pointer;
}
.content span.hide_d {
  display: none;
}
.content.active .show_area {
  display: block;
}
.content.active span.show_d {
  display: none;
}
.content.active span.hide_d {
  display: inline-block;
}

Use jQuery Library.

After that add this JQuery code.

JS

$('.content span').click(function(){
  $(this).parents('.content').toggleClass('active')
});

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”oeMReb” default_tab=”css,result” user=”pradeepanvi”]See the Pen Show and Hide div jQuery by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

Something Like that:
onclick change Image src

First we will see normal html code.
For that you need to create first html code.

HTML

<div class="product_gallery"><a href="https://cdn3.iconfinder.com/data/icons/picons-social/57/10-html5-128.png">Change Image</a><img src="https://cdn4.iconfinder.com/data/icons/file-names-24/512/38-128.png"/><a href="https://cdn4.iconfinder.com/data/icons/file-names-24/512/38-128.png">Back Again Image</a></div>

Use jQuery Library.

After that add this JQuery code.

JS

$('.product_gallery a').click(function(){
$('.product_gallery img').attr('src',$(this).attr('href'));
return false;
});

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”dzjEby” default_tab=”html,result” user=”pradeepanvi”]See the Pen onclick change Image src jQuery by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

Something Like that:
max height all div

For that you need to create first html code.

HTML

<ul class="download_c">
  <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500 Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
  <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
  <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
  <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
  <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500 Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
  <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
  <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
  <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
</ul>

CSS

*{
  box-sizing:border-box;
}
.download_c{
  list-style:none;
  padding:0;
  display:flex;
  li{
    background:#ccc;
    padding:10px;
    border:1px solid #fff;
    width:30%;
  }
}

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”prZqEe” default_tab=”html,result” user=”pradeepanvi”]See the Pen set max height all div with CSS by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see