@media only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3) { }
@media only screen
and (device-width : 375px)
and (device-height : 667px)
and (-webkit-device-pixel-ratio : 2) { }
@media only screen
and (device-width : 414px)
and (device-height : 736px)
and (-webkit-device-pixel-ratio : 3) { }
Promise basically used for async, because other function will execute if before function is fine.
–JS
var fPromise = new Promise(function (resolve, reject){
var isTrue = true;
if(isTrue){
resolve('True');
} else {
reject();
}
});
fPromise.then(function(fromRes){
console.log('this is ' + fromRes);
});
If Promise not completed.
–JS
var fPromise = new Promise(function (resolve, reject){
var isTrue = false;
if(isTrue){
resolve('True');
} else {
reject('Not True');
}
});
fPromise.then(function(fromRes){
console.log('this is ' + fromRes);
}).catch(function(fromRej){
console.log('this is ' + fromRej);
})
Now Promises one by one.
–JS
var fPromise = function(){
return new Promise(function(resolve, reject){
resolve('done fPromise completed.');
})
};
var sPromise = function(msg){
return new Promise(function(resolve, reject){
resolve(msg + ' done sPromise');
})
};
var tPromise = function(msg){
return new Promise(function(resolve, reject){
resolve(msg + ' done tPromise');
})
};
fPromise().then(function(res){
return sPromise(res);
}).then(function(res){
return tPromise(res);
}).then(function(res){
console.log('done by ' + res);
})
Currying in Javascript means use of function expression with new function. We can see function expression could be Closure.
–JS File
var add = function(a){
return function(b){
return a + b;
}
};
var addToFive = add(5);
console.log(addToFive(1));
–Live Demo
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”rZvyZM” default_tab=”js,result” user=”pradeepanvi”]See the Pen Currying in Javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]
Event Capturing means on click event will work top to bottom. Same like falling ball.
–HTML
<div id="wrapper"> <div id="container" class="button"> <div class="button" id="child">Has Event</div> <div class="button" id="other">No Event</div> <p>Nothing</p> </div> </div>
–CSS
.button{
border:1px solid #ccc;
cursor:pointer;
}
–JS
var c = document.querySelector('#container');
c.addEventListener('click', function(){
console.log('container clicked');
}, true);
var b = document.querySelector('#child');
c.addEventListener('click', function(){
console.log('Has clicked');
}, true)
–Live Demo
Check Console.log()
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”OoZpWo” default_tab=”js,result” user=”pradeepanvi”]See the Pen Event Capturing in Javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]
Event Bubbling means on click event will work bottom to top. Same like bubbles goes.
–HTML
<div id="wrapper"> <div id="container" class="button"> <div class="button" id="child">Has Event</div> <div class="button" id="other">No Event</div> <p>Nothing</p> </div> </div>
–CSS
.button{
border:1px solid #ccc;
cursor:pointer;
}
–jQuery
$('#container').click(function(){
console.log('container clicked');
})
$('#child').click(function(){
console.log('Has clicked');
})
–Live Demo
Check Console.log()
[codepen_embed height=”301″ theme_id=”0″ slug_hash=”BOxpMr” default_tab=”js,result” user=”pradeepanvi”]See the Pen Event Bubbling in Javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]
–HTML
<template id="listener">
<style>
.head{
font-size: 25px;
font-weight: bold;
}
</style>
<div class="head">This is shadow DOM text</div>
</template>
<div class="head">This is normal text</div>
<div id="host"></div>
–JS
var host = document.querySelector('#host');
var shadowRoot = host.createShadowRoot();
var listener = document.querySelector('#listener');
var clone = document.importNode(listener.content, true);
shadowRoot.appendChild(clone);
It’s Kind of shadow that will different between effecting CSS to HTML separately.
In Angular we can active it with ViewEncapsulation.Native
Why we use it ?
Because if we can have same name class with more than one div this will allow to all. But with shadow Dom it won’t be.
–HTML
<div class="has">Without Shadow DOM</div> <div id="hasDOM">There is DOM !</div>
–CSS
.has{
color:blue
}
–JS
var host = document.querySelector('#hasDOM');
var shadowRoot = host.createShadowRoot();
var div = document.createElement('div');
div.textContent = "This is text with Shadow DOM";
div.className = "has";
shadowRoot.appendChild(div);
–Live Demo
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”GXdrEr” default_tab=”js,result” user=”pradeepanvi”]See the Pen Shadow DOM by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]
–JS File
function solution(A, K) {
// write your code in JavaScript (Node.js 8.9.4)
var storeArray = A;
for(var i=0; i<K; i++){
var new1 = storeArray.splice(0, storeArray.length-1);
var new2 = storeArray.splice(storeArray.length-1, storeArray.length);
storeArray = new2.concat(new1);
}
return storeArray;
}
Sort an array with position and the rest set as it is.
–JS File
function sortP(a, b){
var unSort = b.slice(0, b.indexOf(a));
var nsort = b.slice(b.indexOf(a), b.length).sort();
return unSort.concat(nsort);
}
sortP(2, [5,2,6,8,3,4,7])
You will see now.
[5, 2, 3, 4, 6, 7, 8]
When typing, use Phone no xxx-xxx-xxx like 123-456-7890
–JS File
var inputKeys = document.querySelectorAll('input[name="your-phone"]');
for(i=0; i<inputKeys.length; i++){
inputKeys[i].onkeypress = function(){
var currentValue = this.value;
console.log('Lengh ' + currentValue);
this.value = currentValue;
if(this.value.toString().length == 3 || this.value.toString().length == 7){
var newVal = this.value.concat('-');
this.value = newVal;
}
}
}
Whenever we pass a anonymous function into a function and pass a value that called Closures.
–JS File
function S(){
var i = '12';
return function(){
console.log(i)
}
}
Now run this code with console.dir()
console.dir(S())