How to add captcha - to verify user (image or text capatcha) using html, php, javascript

 step 1) go to google recaptcha website create key from here , which is require for third & fourth step.

step 2)add script between head tag- <script src="https://www.google.com/recaptcha/api.js"></script>

step 3)<div class="g-recaptcha brochure__form__captcha" data-sitekey="YOUR SITE KEY"></div>

step 4) just use below php code.

 <?php

function reCaptcha($recaptcha){

  $secret = "YOUR SECRET KEY";

  $ip = $_SERVER['REMOTE_ADDR'];

  $postvars = array("secret"=>$secret, "response"=>$recaptcha, "remoteip"=>$ip);

  $url = "https://www.google.com/recaptcha/api/siteverify";

  $ch = curl_init();

  curl_setopt($ch, CURLOPT_URL, $url);

  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

  curl_setopt($ch, CURLOPT_TIMEOUT, 10);

  curl_setopt($ch, CURLOPT_POSTFIELDS, $postvars);

  $data = curl_exec($ch);

  curl_close($ch);

  return json_decode($data, true);

}

$recaptcha = $_POST['g-recaptcha-response'];

$res = reCaptcha($recaptcha);

if($res['success']){

   // go to page

}

 ?>

 

step 5) test it.

How to create payment billing system project in Javascript?

 Payment billing system maintain product bill & this can be handle using private link , link which is only share within office area or user of this system. 

Logic of system -

1) when open link there are at least two user one is admin and other is normal operator.

2) ask for login - after login success there will be two pages one for admin login and one for normal user login. system checks if correct password enter or not, if it's correct go to page dashboard.

3) dashboard have multiple functionality available like add, update, delete data, print data, create report, sorting, searching, checking.

4) if admin is login then there will be all access like register , block or allow user, update, delete & all. in case user login only option to add , check , print report & give bill customer

language required,

For frontend design - html , css, bootstrap

For backend Design - javascript, php ,mysql , sqlite

Note - ensure link NOT search for SEO, encrypt data, page load in 2-3 second.

Steps

i) Define and Plan

This step includes clarifying the purpose and end goals for the application. define the problem you want to solve with a web application and then gather relevant information about it.

ii) Design and build 

design frontend tool and build all functions. and check with first step if all design function added . if any point fail or pending note down for feature scope & add this for next version.

iii) testing

testing is phase of all functions and module works well, check bugs or error if any, remove unwanted code or anything. check keyboard interface , user- friendly , calculate time.

iv) host on real 

take hosting and add this billing system , as this is online solution, which works on all devices, not restrict for OS .

please comment for more detail about this project and web application.

How to create JavaScript animation - moving image

 in this below example move image from original position to right.

we use setTimeout and clearTimeout to start and stop image animate.

html input button click method handle.

<script type = "text/javascript">

 

var getimage = null;

var animate ;

function init() {

   getimage = document.getElementById('myImage');

   getimage.style.position= 'relative'; 

   getimage.style.left = '0px'; 

}

function move() {

   getimage.style.left = parseInt(getimage.style.left) + 10 + 'px';

   animate = setTimeout(move,60);    // call move in 60msec

}

function stop() {

   clearTimeout(animate);

   getimage.style.left = '0px'; 

}

window.onload = init;

 

</script>

<div>

 <img id = "myImage" src = "hello.png" />

 <p>Click the buttons below to handle animation</p>

 <input type = "button" value = "Start" onclick = "move()" />

 <input type = "button" value = "Stop" onclick = "stop()" />

</div>      

please comment your query.

How to create Image Zooming effect.

 this effect is useful when creating ecommerce website, showing detail view of image.

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

* {box-sizing: border-box;}

.img-zoom-container {

  position: relative;

}

.img-zoom-lens {

  position: absolute;

  border: 1px solid #d4d4d4;

  width: 40px;

  height: 40px;

}

.img-zoom-result {

  border: 1px solid #d4d4d4;

  width: 300px;

  height: 300px;

}

</style>

<script>

function imageZoom(imgID, resultID)

{

  var img, lens, result, bx, by;

  img = $('#imgID');

  result = $('resultID');

  lens = $("div");

  $(lens).attr("class", "img-zoom-lens");

  img.parentElement.insertBefore(lens, img);

  bx = result.offsetWidth;

  by = result.offsetHeight;

  result.style.backgroundImage = "url('" + img.src + "')";

  result.style.backgroundSize = (img.width * bx) + "px " + (img.height * by) + "px";

  lens.addEventListener("mousemove", moveLens);

  img.addEventListener("mousemove", moveLens);

  lens.addEventListener("touchmove", moveLens);

  img.addEventListener("touchmove", moveLens);

  function moveLens(e) {

    var pos, x, y;

    e.preventDefault();

    pos = getCursorPos(e);

    x = pos.x - (lens.offsetWidth / 2);

    y = pos.y - (lens.offsetHeight / 2);

    if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}

    if (x < 0) {x = 0;}

    if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}

    if (y < 0) {y = 0;}

    lens.style.left = x + "px";

    lens.style.top = y + "px";

    result.style.backgroundPosition = "-" + (x * bx) + "px -" + (y * by) + "px";

  }

  function getCursorPos(e) {

    var a, x = 0, y = 0;

    e = e || window.event;

    a = img.getBoundingClientRect();

    x = e.pageX - a.left;

    y = e.pageY - a.top;

    x = x - window.pageXOffset;

    y = y - window.pageYOffset;

    return {x : x, y : y};

  }

}

imageZoom("trialimage", "trialresult");

</script>

</head>

<body>

<h1>Image Zooming effect</h1>

<p>Mouse over the image:</p>

<div class="img-zoom-container">

  <img id="trialimage" src="img_girl.jpg" width="300" height="240">

  <div id="trialresult" class="img-zoom-result"></div>

</div>

</body>

</html>

in above zoom effect details, 

1)define two container one is original image, second zoom preview.

2) get offsetWidth and offsetHeight using javascript.

3) set cursor and lens position

4) lens set to absolute position on image so that get exact zoom part from image.

5) main image from first container setting to other container background image.

How to create vertical tabs using CSS and JAVASCRIPT

 <html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* {box-sizing: border-box}

body {font-family: "Lato", sans-serif;}

/* Style the mytab */

.mytab {

  float: left;

  border: 1px solid #ccc;

  background-color: #f1f1f1;

  width: 30%;

  height: 300px;

}

/* Style the buttons inside the mytab */

.mytab button {

  display: block;

  background-color: inherit;

  color: black;

  padding: 22px 16px;

  width: 100%;

  border: none;

  outline: none;

  text-align: left;

  cursor: pointer;

  transition: 0.3s;

  font-size: 17px;

}

/* Change background color of buttons on hover */

.mytab button:hover {

  background-color: #ddd;

}

/* Create an active/current "mytab button" class */

.mytab button.active {

  background-color: #ccc;

}

/* Style the mytab content */

.mytabcontent {

  float: left;

  padding: 0px 12px;

  border: 1px solid #ccc;

  width: 70%;

  border-left: none;

  height: 300px;

}

</style>

</head>

<body>

<h2>Vertical mytabs</h2>

<p>Click on the buttons inside the mytabbed menu:</p>

<div class="mytab">

  <button class="mytablinks" onclick="openCity(event, 'India')" id="defaultOpen">India</button>

  <button class="mytablinks" onclick="openCity(event, 'America')">America</button>

  <button class="mytablinks" onclick="openCity(event, 'Africa')">Africa</button>

</div>

<div id="India" class="mytabcontent">

  <h3>India</h3>

  <p>India is the capital city of England.</p>

</div>

<div id="America" class="mytabcontent">

  <h3>America</h3>

  <p>America is the capital of France.</p> 

</div>

<div id="Africa" class="mytabcontent">

  <h3>Africa</h3>

  <p>Africa is the capital of Japan.</p>

</div>

<script>

function openCity(evt, cityName) {

  var i, mytabcontent, mytablinks;

  mytabcontent = document.getElementsByClassName("mytabcontent");

  for (i = 0; i < mytabcontent.length; i++) {

    mytabcontent[i].style.display = "none";

  }

  mytablinks = document.getElementsByClassName("mytablinks");

  for (i = 0; i < mytablinks.length; i++) {

    mytablinks[i].className = mytablinks[i].className.replace(" active", "");

  }

  document.getElementById(cityName).style.display = "block";

  evt.currentTarget.className += " active";

}

// Get the element with id="defaultOpen" and click on it

document.getElementById("defaultOpen").click();

</script>

   

</body>

</html> 

How to add marker to google map for webpage, mobile page

 This tutorial shows you how to add a simple Google map with a marker to a web page. 

You should knowledge of HTML and CSS, and a little knowledge of JavaScript.

Sample Example for google map

• Create Html

<!DOCTYPE html>

<html>

  <head>

    <title>Add Map</title>

    <script

      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIwzALxUPNbatRBj3Xi1Uhp0fFzwWNBkE&callback=initMap&libraries=&v=weekly"

      defer

    ></script>

    

  </head>

  <body>

    <h3>Sample Google Maps Demo</h3>

    <!--The div element for the map -->

    <div id="map"></div>

  </body>

</html>

• Create CSS

#map {

  height: 400px;

  /* The height is 400 pixels */

  width: 100%;

  /* The width is the width of the web page */

}

• Create Javascript

// Initialize and add the map

function initMap() {

  // The location 

  const uluru = { lat: -25.344, lng: 131.036 };

  const map = new google.maps.Map(document.getElementById("map"), {

    zoom: 4,

    center: uluru,

  });

   const marker = new google.maps.Marker({

    position: uluru,

    map: map,

  });

}

• Follow these steps to get an API key:

1. Go to the Google Cloud Console.

2. Create or select a project.

3. Click Continue to enable the API and any related services.

4. On the Credentials page, get an API key (and set the API key restrictions).  

5. To prevent quota theft and secure your API key, see Using API Keys.

6. (Optional) Enable billing. 

7. Copy the entire code of this tutorial from this page, to your text editor.

8. Replace the value of the key parameter in the URL with your own API key (that's the API key that you've just obtained). 

      <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">

   </script>

Simple Steps - 1) create api 2) add above html, javascript 3) check it on webpage.

still if any issue please comment.

Disable a div on selecting an option from a drop down menu in HTML

1. make simple dropdown menu
<select id="selelctme">
<option>AABC</option>
<option>BDIV</option>
<option>CDFG</option>
</select>

2. add script
<script>
 $(document).ready(function(){
 $('#selectme').change(function(){
 if($(this:selected).val()=='BDIV')
{
 $('.BDIV').attr('disabled','true');
}
else
{
}

});

});

</script>

in  above simplly use change function this also can be add using javascript onchange function.

Print with preview window using javascript

print preview area using simple jquery.

no need any extra api or script .

just use below code to print form or DIV part 

$('#printA').click(function(){  
 
    var content = document.getElementById('printcontent').innerHTML; 
  var mywindow = window.open('', 'Print', 'height=600,width=800');
    mywindow.document.write('<html><head><title>Print Content</title>');
    mywindow.document.write('</head><body >');
    mywindow.document.write(content);
    mywindow.document.write('</body></html>');
    mywindow.document.close();
    mywindow.focus();
    mywindow.print();
    mywindow.close();
    
    return true;
 
});

to use above code do simple steps.

1. ensure jquery.min.js is use or simple use above to javascript

2. print button

3. onclick of this button above code will paste

4. simplly open print window 

5. suppose after filling form or displaying data print function is needed then use above print function

JavaScript function define & ways use of it.

Today we are going to start new session,
Html & JavaScript function.
In this session following points are explain.
1.what is function.
2. How to called function within function.
3. How define global variable & use in function .
4. Use function within jQuery.
5. Calling ways of functions.

An function is set of code that use to solve specific problems, it defines all detail of point.

Ex. Today I am going to school.
Answer:
Function school ()
{
Var auto= "charges of auto";
Var ready = "dress wearing & all prepared";
If (auto=='not ')
{
Alert ("you should try again");
}
Else
{
Alert ("go fast auto ready");
}
}

In above function if you see details of function variable passes auto position.
After checking an condition system display message whether you are go to school or not.

Suppose another example

Function abc()
{
If(var a== 'hello')
{
alert ("good morning");
}
Else
{
Function status ()
{
Var after = ' afternoon ';
}
}

abc();

Above function execute & if you alert variable after it displays message
About status is afternoon.

If you define variable before start function.
It says to be global or use global variables name.

If you are using jQuery simply called function.

$(document).ready(function()
{
Abc();
});

In this way function use within jQuery.
There are different ways to call function,
Onclick like html event.

Specific of function:
1.easy of use
2. One function call number of times
3. Is form short code
4. Reduce web loading time.

View more details on next session
Don't forget share.

LEARN SESSION 8 -- HTML & JAVASCRIPT MORE DETAILS

hi every one today i am going to start session 8 .

let us see more exmple to know detail connectivity of html & javascript

example 1:
<!DOCTYPE html>
<html>

   <head>
      <title>JavaScript & html connectivity</title>
    
    
      <script type = "text/JavaScript">
         function Hello() {
            alert("Hello, MAYUR");
         }
      </script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
   </body>

</html>

above exmple is alert message when user click on button it shows message of hello mayur.


let see another example

<!DOCTYPE html>
<html>
<body>

<p id="abc"></p>

<script>
var currentdate, somedate, output;
currentdate = new Date();
somedate = new Date();
someday.setFullYear(2018, 4, 18);

if somedate > currentdate) {
    output = "Today is not may 18, 2018.";
} else {
    output = "yes today is 18 may, 2018.";
  alert('oops!! ok try again for next time');
}
document.getElementById("abc").innerHTML = output;
</script>

</body>
</html>

in above example checking how current date is cheking for entered date if match then show certain result otherwise go to else condition it show message about try next time.

in below i use this script in which check if enter data is date below script get data from abc id tag & display result

<script>
var date1 = new Date();
document.getElementById("abc").innerHTML = isDate(date1);

function isDate(date1) {
    return date1.constructor.toString().indexOf("Date") > -1;
}
</script>

thanks for watching...please dont forget to share ..

Session 6 HTML & CSS & JAVASCRIPT CONNECTION

hi every one today i am going to start session 6 .
let us know more example of html with css

LET US see how to define & effect of css on html

<html>
<style>
.body
{
width:100;
padding:0;
margin:0;
}
.abc
{
width:100%;
color:red;
background:#eaeaea;
}
<style>
<body>
<div class="abc">hello this is an example</div>
<br/>
<span>here text sample</span>
<h2>Welocome Here</h2>

</body>
</html>

in the above exmple declare css that define style for div in which apply background color & color to div . text is looking in red color.

now write this code in any editor & save as html or htm extension.

and open this file in browser you see output.


now let us see another exmple.

<html>
<style>
.body
{
width:100;
padding:0;
margin:0;
}
#abc
{
width:100%;
color:red;
background:#eaeaea;
}
.xy
{
font-size:18px;
font-weight:bold;
box-shadow:1px 1px 1px rgba(0,0,0,0.2);
}

<style>
<body>
<div id="abc">hello this is an example</div>
<br/>
<p>hello this is just example</p>
<span>here text sample</span>
<h2>Welocome Here</h2>
<div class="xy">hi here you can learn web programing</div>
</body>
</html>


<!doctype html>
<html>
<head>
<script>
function adding(){
var a,b,c;
a=Number(document.getElementById("firstinput").value);
b=Number(document.getElementById("secondinput").value);
c= a + b;
document.getElementById("result").value= c;
}
</script>
</head>
<body>
<input id="firstinput">
<input id="secondinput">
<button onclick="add()">Add</button>
<input id="result">
</body>
</html>

please share with your friends & all . thanks for viewing this blog. will see more detail in next session.