Author: admin

Something Like that:
reverse age in Javascript

add this JS code.

JS

function reverseAge(para){
	para = para + '';
	return para.split('').reverse().join('');
}

document.write(reverseAge(23));

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

You can check console.

---

Something Like that:
add comma in number automatically in Javascript

add this HTML code.

HTML

<input type="text" class="number">

add this JS code.

JS

var inputKeys = document.querySelectorAll('input.number');

for(i=0; i<inputKeys.length; i++){
	inputKeys[i].onkeyup = function(){
			var currentValue = this.value.split(',').join('');
			console.log('current:-' + currentValue);
			this.value = currentValue;
			var newVal = this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
			console.log('new:-' + newVal);
			this.value = newVal;
    }
}

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”wmaRjG” default_tab=”js,result” user=”pradeepanvi”]See the Pen add comma in number automatically in Javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

You can check console.

Something Like that:
Smiley Range Slider

For that you need to create first html code.

HTML

<div class="range_container">
<img src="http://home2it.com/wp-content/uploads/2018/02/smile-5.png" alt="manage smile" class="slider_smile">
<input type="range" min="1" max="5" value="5" class="slider" id="myRange">
</div>

After that add this CSS code.

CSS

.range_container {
  width: 300px;
  max-width: 90%;
  margin: 0 auto;
  display: block;
}
.range_container .slider_smile {
  width: 100px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 3px;
  padding-right: 3px;
  background: #333;
  background: -moz-linear-gradient(left, rgba(51, 51, 51, 0) 0%, #333333 93%, rgba(51, 51, 51, 0) 99%, rgba(51, 51, 51, 0) 100%);
  background: -webkit-linear-gradient(left, rgba(51, 51, 51, 0) 0%, #333333 93%, rgba(51, 51, 51, 0) 99%, rgba(51, 51, 51, 0) 100%);
  background: linear-gradient(to right, rgba(51, 51, 51, 0) 0%, #333333 93%, rgba(51, 51, 51, 0) 99%, rgba(51, 51, 51, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00333333', endColorstr='#00333333', GradientType=1);
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
.slider:hover {
  opacity: 1;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: 0px 0px 8px #999;
  background: #fff;
  cursor: pointer;
}
.slider::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: 0px 0px 8px #999;
  background: #fff;
  cursor: pointer;
}

Use jQuery Library.

After that add this JQuery code.

JS

var slider = document.getElementById("myRange");
var output = $('.slider_smile');
//range slider
slider.oninput = function(){
	if(this.value == 1){
		output.attr('src','http://home2it.com/wp-content/uploads/2018/02/smile-1.png');
	} else if(this.value == 2){
		output.attr('src','http://home2it.com/wp-content/uploads/2018/02/smile-2.png'); 
	} else if(this.value == 3){
		output.attr('src','http://home2it.com/wp-content/uploads/2018/02/smile-3.png'); 
	} else if(this.value == 4){
		output.attr('src','http://home2it.com/wp-content/uploads/2018/02/smile-4.png'); 
	} else if(this.value == 5){
		output.attr('src','http://home2it.com/wp-content/uploads/2018/02/smile-5.png'); 
	}
}

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”MQzBME” default_tab=”css,result” user=”pradeepanvi”]See the Pen smiley range slider in jQuery by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Something Like that:
Find the missing number in Array

add this JS code.

JS

var myArray = [1,2,3,6,1];
//var myArray = [-1,-3];
var missingA;

for(var i=1;i<=myArray.length;i++)
{    
   if(myArray[i-1] != i){
        missingA = i;
        console.log(missingA)
        //alert(missing);
        break;
   }
}

[codepen_embed height="265" theme_id="0" slug_hash="goJPXR" default_tab="js,result" user="pradeepanvi"]See the Pen Find the missing number in Array by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

You can check console.

Something Like that:
span to a

Change Tag Name

For that you need to create first html code.

HTML

<span class="fusion-imageframe imageframe-none imageframe-5 hover-type-none fancybox" id="gallery-0"><img src="http://www.olizki.com/wp-content/uploads/2016/09/6C041B61-e1513840805408.jpg"></span>

Use jQuery Library.

After that add this JQuery code.

JS

(function($){
  $('span.fancybox').each(function(){
    $(this).replaceWith(function() {
      return $('', {
        class: this.classList.value,
        rel: this.attributes.id.value,
        href: this.children[0].attributes.src.value,
        html: this.innerHTML
      })        
      });
  });
})(jQuery)

rel:
rel there I am adding attribute but get ID value of span

href:
href adding attribute but href taking src of child element IMG

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”opLKxo” default_tab=”js,result” user=”pradeepanvi”]See the Pen Change Tag Name in jQuery by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Something Like that:
sort()

add this JS code.

JS

var oldStr = "tima";
var newArr = oldStr.split('');
var newStr = newArr.sort();
var JoinStr = newStr.join('');

console.log(oldStr);
console.log(newArr);
console.log(newStr);
console.log(JoinStr);

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”NwVerW” default_tab=”js,result” user=”pradeepanvi”]See the Pen Sort string in Javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

You can check console.

Sort string function in javascript

add this JS code.

JS

function sortStr(txt){
  return txt.split('').sort().join('');
}

console.log(sortStr('timedbaz'))

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

You can check console.

Something Like that:
split()

add this JS code.

JS

var newStr = "Amit";
var newArr = newStr.split();

console.log(newStr);
console.log(newArr);

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”Bmevjg” default_tab=”js,result” user=”pradeepanvi”]See the Pen Convert string to array in Javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

You can check console.

Something Like that:
Find Number or Value

add this JS code.

JS

function findNumber(arr, k){
	if(arr.includes(k) == true){
		console.log("YES")
    } else {
		console.log("NO")
    }
}
findNumber([1,2,3],5)

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”QOPeVv” default_tab=”js,result” user=”pradeepanvi”]See the Pen Find Number or Value in Array or String in Javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

You can check console.

Something Like that:
Odd Number

add this JS code.

JS

var newArray = [];
var odd = function(num){
		return num % 2 !== 0;
}
function oddNumber(st, end){
	for(var i=st; i<=end; i++){
      newArray.push(i);
    }
}

oddNumber(15,25);
console.log(newArray.filter(odd));

[codepen_embed height="265" theme_id="0" slug_hash="XzQQXe" default_tab="js,result" user="pradeepanvi"]See the Pen Odd Number function in Javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

You can check console.

Something Like that:
Popup form

Popup form in jQuery with close functionality onclick outside form and Esc key.

For that you need to create first html code.

HTML

<span class="target_f">Target Form</span>

<div class="popup" id="popup">
  <i>x</i>
  <h2>Form</h2>
</div>

After that add this CSS code.

CSS

.target_f{
  background:#ddd;
  display:inline-block;
  padding:5px 10px;
  cursor:pointer;
}

.popup{
  top:30px;
  left:100px;
  position:absolute;
  width:300px;
  margin-top:20px;
  background:#ccc;
  visibility:hidden;
  opacity:0;
}
.popup.active{
  visibility:visible;
  opacity:1;
}
.popup i{
  width:20px;
  height:20px;
  display:block;
  text-align:center;
  cursor:pointer;
  border-radius:50%;
  color:#fff;
  background:#000;
  border:1px solid #fff;
}

Use jQuery Library.

After that add this JQuery code.

JS

$('.target_f').click(function(){
    $('.popup').addClass('active');
});	
$('.popup i').click(function(){
    $('.popup').removeClass('active');
});	

  $(document).keydown(function(e) {
	  if (e.which== 27) {  // ESC
      $('.popup').removeClass('active');
	  }   
	});
	
	
	$('body').click(function(evt){    
		   if(evt.target.id == "popup" )
		   {
          $('.popup').removeClass('active');
			 }
		   //For descendants of menu_content being clicked, remove this check if you do not want to put constraint on descendants.
		   if($(evt.target).closest('#popup').length)
		    {
			 console.log('hii')
			  return;   
			}
	
		  //Do processing of click event here for every element except with id menu_content
	
	});

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