membd

Showing posts with label JavaScript. Show all posts

Monday, April 25, 2016

Basic Text movement using setTimeout (functional programming)

Following code snippet helped me to learn setTimeout more easily specially when you use setTimeout with for loop. One thing have to be remember when you call setTimeout inside for loop time parameter will be (i * time). and i will be (1 , 2, 3, 4, 5 .. this sequence)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this is the basic of setTimeout function</title>
</head>
<body>
<h2 id="subtitle">Hello my name is shibu deb polo...</h2>
<script type="text/javascript" charset="utf-8">
function backlash(id) {
var subtitle = document.getElementById(id);
var text = subtitle.innerHTML;
var time = 50;

for (let i = text.length; i >= 0; i--) {
setTimeout(function () {
subtitle.innerHTML = subtitle.innerHTML.substring(0, i);
}, time + time * (text.length - i))
}
setTimeout(function () {
textAdd('subtitle', text);
}, 2000);
}

function textAdd (id, text) {
var subtitle = document.getElementById(id);
console.log(text ,'text')
for (let i = 0 ; i < text.length ; i++) {
setTimeout(function () {
subtitle.innerHTML += text[i]
console.log(text[i]);
}, 100 * i)
}

setTimeout(function () {
backlash('subtitle');
}, 4000)
}
backlash('subtitle');
</script>
</body>
</html>



    
Hello my name is shibu deb polo...

Tuesday, September 1, 2015

How to remove all childNode by iterating and append it again by iteration - on demand - more modular approach - using switch statement

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
p{
margin-top: 25px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<h1 class="btn btn-success btn-lg" onclick="content_change(1)">Heading</h1><br>
<h1 class="btn btn-warning btn-lg" onclick="content_change(2)">paragraph</h1> <br>
<h1 class="btn btn-danger btn-lg" onclick="content_change(3)">Show all</h1>
</div>
<div class="col-md-8">
<div id="main">
<h1 id="heading">This is heading</h1>
<p id="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aspernatur assumenda at aut dolor doloremque earum inventore, iure magni nesciunt porro quis veritatis voluptate? Assumenda necessitatibus quidem reprehenderit voluptas? Accusantium? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad architecto aut, dicta laudantium nam quam ratione rem sequi ullam vel? Ad animi delectus est libero maxime odit reiciendis, soluta! Harum!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias beatae deleniti dolore excepturi iste iusto maxime nesciunt nihil, nisi obcaecati placeat quae similique sit soluta! Nemo praesentium qui quod!</p>
</div>
</div>
</div>
</div>
<script>
var main = document.getElementById('main');
var all_child = [];
for(var i = 0; i < main.childNodes.length; i++){
all_child.push( main.childNodes[i]);
}
function content_change(arg){
while(main.hasChildNodes()){
main.removeChild(main.firstChild);
}
switch (arg){
case 1:
main.appendChild(all_child[1]);
break;
case 2:
main.appendChild(all_child[3]);
break;
case 3:
for(var j = 0; j < all_child.length; j++){
main.appendChild(all_child[j]);
}
}

}
</script>
</body>
</html>

How to remove all childNode by iterating and append it again by iteration - on demand - more modular approach

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
p{
margin-top: 25px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<h1 class="btn btn-success btn-lg" onclick="content_change('heading')">Heading</h1><br>
<h1 class="btn btn-warning btn-lg" onclick="content_change('paragraph')">paragraph</h1> <br>
<h1 class="btn btn-danger btn-lg" onclick="content_change('all')">Show all</h1>
</div>
<div class="col-md-8">
<div id="main">
<h1 id="heading">This is heading</h1>
<p id="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aspernatur assumenda at aut dolor doloremque earum inventore, iure magni nesciunt porro quis veritatis voluptate? Assumenda necessitatibus quidem reprehenderit voluptas? Accusantium? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad architecto aut, dicta laudantium nam quam ratione rem sequi ullam vel? Ad animi delectus est libero maxime odit reiciendis, soluta! Harum!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias beatae deleniti dolore excepturi iste iusto maxime nesciunt nihil, nisi obcaecati placeat quae similique sit soluta! Nemo praesentium qui quod!</p>
</div>
</div>
</div>
</div>
<script>
var main = document.getElementById('main');
var all_child = [];
for(var i = 0; i < main.childNodes.length; i++){
all_child.push( main.childNodes[i]);
}
function content_change(arg){

while(main.hasChildNodes()){
main.removeChild(main.firstChild);
}
if(arg == 'heading'){
main.appendChild(all_child[1]);
} else if(arg == 'paragraph'){
main.appendChild(all_child[3]);
} else if(arg == "all"){
for(var j = 0; j < all_child.length; j++){
main.appendChild(all_child[j]);
}
}
}
</script>
</body>
</html>

How to remove all childNode by iterating and append it again by iteration on demand

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
p{
margin-top: 25px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<h1 class="btn btn-success btn-lg" onclick="showHeading()">Heading</h1><br>
<h1 class="btn btn-warning btn-lg" onclick="showParagraph()">paragraph</h1> <br>
<h1 class="btn btn-warning btn-lg" onclick="showAll()">Show all</h1>
</div>
<div class="col-md-8">
<div id="main">
<h1 id="heading">This is heading</h1>
<p id="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias beatae deleniti dolore excepturi iste iusto maxime nesciunt nihil, nisi obcaecati placeat quae similique sit soluta! Nemo praesentium qui quod!</p>
</div>
<div id="main2"></div>
</div>
</div>
</div>
<script>
var main = document.getElementById('main');
var main2 = document.getElementById('main2');
var all_child = [];
for(var i = 0; i < main.childNodes.length; i++){
all_child.push( main.childNodes[i]);
}
function removeAll(){
while(main.hasChildNodes()){
main.removeChild(main.firstChild);
}
}
function showAll(){
for(var j = 0; j < all_child.length; j++){
main.appendChild(all_child[j]);
}

}
function showHeading(){
removeAll();
main.appendChild(all_child[1]);

}
function showParagraph(){
removeAll();
main.appendChild(all_child[3]);

}
</script>
</body>
</html>

Friday, August 28, 2015

page portion change in onclick without loading page using pure JavaScript (like bootstrap tabs and pills)

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li><a onclick="event.preventDefault(); profile_function()" href="#">profile</a></li>
<li><a onclick="event.preventDefault(); contact_function()" href="#">contact</a></li>
<li><a onclick="event.preventDefault(); portfolio_function()" href="#">portfolio</a></li>

</ul>
<div id="main">
<div id="profile">
<h1>This is the profile section</h1>
</div>
<div id="contact">
<h1>This is the contact section</h1>
</div>
<div id="portfolio">
<h1>This is the portfolio section</h1>
</div>
<script>
var main = document.getElementById('main');
var profile = document.getElementById('profile');
var contact = document.getElementById('contact');
var portfolio = document.getElementById('portfolio');
main.removeChild(profile);
main.removeChild(contact);
main.removeChild(portfolio);
main.appendChild(profile);
presentNode = "profile";
previousNode = "profile";

function adjust() {
switch (previousNode){
case "profile":
main.removeChild(profile);
break;
case "contact":
main.removeChild(contact);
break;
case "portfolio":
main.removeChild(portfolio);
break;
default :
break;
}
previousNode = presentNode;
switch (presentNode){
case "profile":
main.appendChild(profile);
break;
case "contact":
main.appendChild(contact);
break;
case "portfolio":
main.appendChild(portfolio);
break;
default :
break;
}
}

function profile_function() {
presentNode = "profile";
adjust();
}
function contact_function() {
presentNode = "contact";
adjust();
}
function portfolio_function() {
presentNode = "portfolio";
adjust();
}
</script>
</div>
</body>
</html>

Tuesday, August 25, 2015

Common Document object model traversing

document.createElement() Creates an Element node
document.createTextNode() Creates a Text node

element.appendChild("new node") Adds a new child node, to an element, as the last child node
element.insertBefore("new node", "Which node before") Inserts a new child node before a specified, existing, child node

element.removeChild("existing node") Removes a child node from an element
element.replaceChild("new node", "Which existing node will be replace") Replaces a child node in an element

to learn more: http://www.w3schools.com/jsref/dom_obj_document.asp

Dom Traversing
================================================
element.parentNode Returns the parent node of an element
element.parentElement Returns the parent element node of an element

element.childNodes Returns a collection of an elements child nodes (including text and comment nodes)
element.childNodes[i] Returns an element child nodes (including text and comment nodes)

element.firstChild Returns the first child node of an element
element.firstElementChild Returns the first child element of an element

element.lastChild Returns the last child node of an element
element.lastElementChild Returns the last child element of an element

element.nextSibling Returns the next node at the same node tree level
element.nextElementSibling Returns the next element at the same node tree level

element.previousSibling Returns the previous node at the same node tree level
element.previousElementSibling Returns the previous element at the same node tree level

to learn more: http://www.w3schools.com/jsref/dom_obj_all.asp

Image change on onClick event and slideshow image - basic image slide with minimum effort

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image change using on click method</title>
<style>
#img_div {
height: 400px;
overflow: hidden;
}
.profile img{
height: 100%;
width: auto;
}
</style>
</head>
<body>
<div class="profile">
<div id="img_div"> </div> <br>
<button id="prev" class="btn btn-success" onclick="prev_img()">Prev</button>
<button id="next" class="btn btn-success" onclick="next_img()">Next</button>
<br> <br>
</div>

<script>
// img path variable will define path of individual image;
var img_path = ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg", "images/6.jpg"]
var img_div = document.getElementById('img_div');
var img_tag = document.createElement("img");
img_tag.className = "img-responsive";
img_div.appendChild(img_tag);
var index = 0;
img_tag.src = img_path[index];
var prev = document.getElementById('prev');
var next = document.getElementById('next');
if(index == 0){
prev.disabled = true;
}
function next_img(){
index++;
if(index < img_path.length){
img_tag.src = img_path[index];
prev.disabled = false;
} else{
index = 0;
img_tag.src = img_path[index];
prev.disabled = true;
}
}
setInterval(next_img, 2000);

function prev_img(){
index--;
img_tag.src = img_path[index];
if(index == 0){
prev.disabled = true;
}
}
</script>
</body>
</html>

Monday, August 24, 2015

Creating Pyramid in JavaScript using for loop

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pyramid</title>
</head>
<body>
<input type="text" name="" id="number"> <button onclick="pyramid()">Click to see your number pyramid</button>
<br>
<div id="result"></div>

<script>
function pyramid(){
var number = document.getElementById('number').value;
var div_result = document.getElementById('result');
var result = "";
for(var i = 1; i <= number; i++){
var star = "";
for(var j = 0; j < number - i; j++){
star = star + '  ';
}
for (var k = 0; k < 2 * i -1; k++){
star = star + "*"
}
result += '<br>' + star;
}
div_result.innerHTML = result;
console.log(number);
}

</script>
</body>
</html>

Sunday, August 23, 2015

string matching manual function - result view in console

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Match</title>
</head>
<body>

<script>
var str_one = "hello world";
var str_two = "wor";
function mySearch(str_one, str_two){
for(var i = 0; i < str_one.length; i++){
for (var j = 0; j < str_two.length; j++){
if(str_one.charAt(i+j) == str_two.charAt(j)){
if(j == str_two.length -1){
return i;
}
}else{
break;
}
}
}
}
console.log(mySearch(str_one, str_two));

</script>
</body>
</html>

Saturday, August 22, 2015

How to looping star - increment and decrement from given value

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>star looping</title>
</head>
<body>
<input type="text" name="" id="number">
<button onclick="star_looping()">Click to loop</button>
<br>
<div id="result"></div>

<script>
function star_looping(){
var number = parseInt(document.getElementById('number').value);
var star = "";
for (var i = 0; i <= number; i++){
for (var j = 0; j < i; j++){
star = star + "* ";
}
star = star + "<br>";
}
for(var i = number-1; i > 0; i--){
for (var j = 0; j < i; j++){
star = star + "* ";
}
star = star + "<br>";
}
document.getElementById('result').innerHTML = star;
}
</script>
</body>
</html>

show number of character in given text by javascript

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>show number of character in given text</title>
</head>
<body>
<input type="text" name="" id="given_text">
<button onclick="character_sorting()">Click me</button>
<div id="result"></div>
<script>
function character_sorting (){
var text = document.getElementById('given_text').value;
var alphabet = {
a : 0,
b : 0,
c : 0,
d : 0,
e : 0,
f : 0,
g : 0,
h : 0,
i : 0,
j : 0,
k : 0,
l : 0,
m : 0,
n : 0,
o : 0,
p : 0,
q : 0,
r : 0,
s : 0,
t : 0,
u : 0,
v : 0,
w : 0,
x : 0,
y : 0,
z : 0
};
for(var i = 0; i < text.length; i++){
alphabet[text.charAt(i)] = alphabet[text.charAt(i)] + 1;
}
var result = "";
for (var k in alphabet){
result = result + k + " : " + alphabet[k] + "<br>";
}
document.getElementById('result').innerHTML = result;
}
</script>
</body>
</html>

How to Loop through JavaScript object literal

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js object </title>
</head>
<body>

<script>
std_obj = {
name : "polo",
profession : "Student",
department : "Marketing",
roll : 51,
university : 'National University'
};
var result = "";
for (var k in std_obj){
result = result + k + " : " + std_obj[k] + "<br>";
}
document.write(result);
</script>
</body>
</html>

Explode digit from user input and count character of digit using javascript - Math approach rather than built in function

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Explode 3</title>
</head>
<body>
<input type="text" name="" id="given_digit">
<button onclick="explode()">Click to split</button>
<div id="result"></div>

<script>
function explode(){
var number = document.getElementById('given_digit').value;
number = parseInt(number);
var remainder;
var counter = 0;
if (isNaN(number)){
remainder = "You have to Enter number value";
} else {
while(number > 0){
counter++;
if(remainder == undefined){
remainder = number % 10;
} else {
remainder = (number % 10) +"<br> "+ remainder ;
}
number = parseInt(number / 10);
}

}
remainder = remainder + "<br> Total number of digit you've entered: <br>" + counter;
document.getElementById('result').innerHTML = remainder;
}
</script>
</body>
</html>

Friday, August 21, 2015

How to append new dynamic row in dom

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input looping</title>
</head>
<body>
<div class="container">
<div id="row">
item 1:<input type="text" name="" id="">
quantity 1: <input type="text" name="" id="">
amount 1: <input type="text" name="" id=""><br><br>
<input type="hidden" name="" id="count" value="1">
</div>
<button onclick="add_row()">Add row</button>
<script>

function add_row(){
var count = parseInt(document.getElementById('count').value) + 1;
var row = document.getElementById('row');
var row_innerHTML = row.innerHTML;
var input_html = '<div id="row"> item '+ count +':<input type="text" name="" id=""> quantity '+ count +': <input type="text" name="" id=""> amount '+ count +': <input type="text" name="" id=""><br><br> </div>';
row.innerHTML = row_innerHTML + "<br>" + input_html;
document.getElementById('count').value = count;
}
</script>
</div>
</body>
</html>

Explode digit from user input and count character of digit using javascript

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>explode</title>
</head>
<body>
<input type="text" name="" id="given_value"><br><br>
<button onclick="explod()">Click to explode the digit</button>
<br><br>
Result:
<br>
<div id="result"></div>
<script>
function explod(){
var given_value = parseInt(document.getElementById("given_value").value);
var explode;
var count = 0;
if(isNaN(given_value)){
explode = "You have to enter a positive Number";
}else {
given_value = String(given_value);
for ( var i = 0; i < given_value.length; i++ )
{
if(given_value.charAt(i) == "-"){
explode = "You have to enter a positive Number";
break;
} else if(explode == undefined){
explode = given_value.charAt(i);
}else{
explode = explode +"<br>"+ given_value.charAt(i) ;
count++;
}
}

}
if(count >= 0){
count = count + 1;
document.getElementById("result").innerHTML = explode + "<br>Number of digit you've entered: " + count;
}else{
document.getElementById("result").innerHTML = explode;
}
}
</script>
</body>
</html>

prime Number using another way with javascript(fast)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prime Number in another way</title>
</head>
<body>
<input type="text" name="" id="prime_number">
<button onclick="prime_number()">Click for prime number</button>
<div id="result"></div>
<script>
function is_prime(number){
check = true;
if (number > 1){
var range = parseInt(Math.sqrt(number));
for(var i = 2; i <= range; i++){
if(number % i == 0){
check = false;
break;
}
}
} else{
check = false;
}
return check;
}
function show_prime(given_range){
var prime;
var text;
var count = 1;
if(given_range < 2){
text = "Range should be 2 and afterwords"
} else {
for(var i = 2; i <= given_range; i++){
if(is_prime(i)){
if(prime === undefined){
prime = i;
}else {
prime = prime +", "+ i
count++
}
}
}
text = "Prime Number: <br/>"+ prime + "<br> Number of prime number is <br/>" + count;
}
return text;
}

function prime_number(){
var given_number = parseInt(document.getElementById('prime_number').value);
result = show_prime(given_number);
document.getElementById('result').innerHTML = result;
}
</script>
</body>
</html>

Prime Number Using JavaScript (from user input range)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>prime number</title>
</head>
<body>
<input type="text" name="" id="given_value">
<button onclick="output()">Show prime</button>
<p>Result</p>
<div id="result"></div>
<script>
function is_prime(number){
check = true;
if(number > 1){
var range = parseInt(number/2);
for(var i = 2; i <= range; i++){
if(number % i == 0){
check = false;
break;
}
}
} else {
check = false;
}
return check;
}

function show_prime(given_number){
var count = 0;
var result;
for (var k= 2; k <= given_number; k++){
if(is_prime(k)){
count++;
if(result == undefined){
result = k;
} else {
result = result + "<br> " + k;
}
}
}
result = result + "<br>" + "Total prime number: <br>" + count;
return result;
}

function output(){
var result;
var given_value = parseInt(document.getElementById('given_value').value);
if(isNaN(given_value)){
result = "Your given value must be 2 and afterwords integer";
}else {
result = show_prime(given_value);
}
document.getElementById('result').innerHTML = result;
}
</script>
</body>
</html>

calculator using javascript

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>calculator</title>
</head>
<body>
Number 1: <input type="text" name="" id="number_one"> <br><br>
Number 2: <input type="text" name="" id="number_two"> <br><br>
operator: <input type="text" name="" id="operator"> <br><br>
<button onclick="calculator()">Click for result</button>
<p>Result:</p>
<div id="result"></div>
<script>
function calculator(){
var number_one = Number(document.getElementById('number_one').value);
var number_two = Number(document.getElementById('number_two').value);
var operator = document.getElementById('operator').value;
var result_div = document.getElementById('result');
var result;
if(isNaN(number_one) || isNaN(number_two)){
result = "You have to enter a valid number";
} else {
if(operator == '+'){
result = number_one + number_two;
} else if(operator == '-'){
result = number_one - number_two;
} else if ( operator == '*' ){
result = number_one * number_two;
} else if (operator == "/"){
if(number_two == 0){
result = "In division second number can't be zero";
} else {
result = number_one / number_two;
}
} else {
result = "Currently our calculator only support + - * /";
}
}
result_div.innerHTML = result;
}
</script>
</body>
</html>

Monday, August 10, 2015

How to find out prime number in javaScript

Html part:

 <!doctype html>  
 <html lang="en">  
 <head>  
   <meta charset="UTF-8">  
   <title>Document</title>  
 </head>  
 <body>  
 <script src="script.js"></script>  
 </body>  
 </html>

 JavaScript Part: save as script.js

function is_prime ( number ) {  
   var check = true;  
   if(number > 1 ) {  
     if ( number > 2 ) {  
       var range = parseInt(number / 2) + 2;  
       for ( var i = 2; i < range; i++){  
        if( (number % i) == 0 ){  
          check = false;  
          break;  
         }  
       }  
     }  
   } else {  
     check = false;  
   }  
   return check;  
 }  
 number = 100;  
 for (var i = 1; i <= number; i++ ) {  
   if(is_prime(i)) {  
     console.log(i);  
   }  
 }