Web Development Solution

01 February 2018

HTML ,CSS & Javascript Using Simple Popup Box

JAVASCRIPT USING POPUP

What is Popup?

Popup is GUI Component GUI-> Graphical User Interface .Your Website Window suddenly Visible to the Foreground to user ex search

The any website through internet suddenly appears to your foreground

Contact or Register form

Open Your IDE

Write Your Coding and then Open your web browser

Run the html file

<html>

<head>

<style>

#main{

background-color:#A9A9A9;

height:100%;

width:100%;

position:relative;

}

#sub{

background-color:#F0FFFF;

height:10%;

width:20%;

display:none;

}

.spn{

font-size:25px;

float:right;

opacity:0.5;

}

.spn:hover{

cursor: pointer;

}

.fm {

padding-top: 13%;

padding-left: 39%;

}

.fa-soundcloud {

color: #e8822d;

}

.fa-soundcloud:hover,

.fa-soundcloud:focus {

text-decoration: none;

color: #cc6916;

}

.fa-pinterest {

color: #bd091f;

}

.fa-pinterest:hover,

.fa-pinterest:focus {

text-decoration: none;

color: #8c0717;

}

.fa-vimeo {

color: #17b3e8;

}

.fa-vimeo:hover,

.fa-vimeo:focus {

text-decoration: none;

color: #128fba;

}

.fa-behance {

color: #2c98cf;

}

.fa-behance:hover,

.fa-behance:focus {

text-decoration: none;

color: #2379a5;

}

.fa-codepen {

color: #1c1c1c;

}

.fa-codepen:hover,

.fa-codepen:focus {

text-decoration: none;

color: #020202;

}

.fa-foursquare {

color: #fa4778;

}

.fa-foursquare:hover,

.fa-foursquare:focus {

text-decoration: none;

color: #f91554;

}

.fa-facebook {

color: #4b6daa;

}

.fa-facebook:hover,

.fa-facebook:focus {

text-decoration: none;

color: #3b5687;

}

.fa-angellist {

color: #000000;

}

.fa-angellist:hover,

.fa-angellist:focus {

text-decoration: none;

color: #000000;

}

.fa-bitbucket {

color: #205081;

}

.fa-bitbucket:hover,

.fa-bitbucket:focus {

text-decoration: none;

color: #163758;

}

.fa-google-plus {

color: #bf2a1d;

}

.fa {

color: #0594f3;

}

.fa-google-plus:hover,

.fa-google-plus:focus {

text-decoration: none;

color: #932016;

}

.background-card h4 {

font-variant: small-caps;

color: #777777;

border-bottom: 1px solid #eeeeee;

padding-bottom: 1em;

margin-bottom: 1em;

line-height: 1.2;

}

.background-card h4:not(:first-child) {

margin-top: 2em;

}

h4 > .fa,

h4 > .title {

display: inline-block;

vertical-align: baseline;

color: #000000c7;

font-weight: 600;

}

h4 > .fa {

width: 4rem;

}

.content {

line-height: 1.5;

}

.card {

background: #ffffff;

border: 1px solid #e6e6e6;

border-radius: 3px;

padding: 2em 3.5em;

box-shadow: 0px 3px 20px -10px;

}

.card-nested {

padding: 1.5rem 0 1.5rem 4.2rem;

}

.card-wrapper {

padding: 5px;

}

</style>

function sd(){

var inp=document.getElementById('nm').value;

document.getElementById('pa').innerHTML=inp;

document.getElementById('nm').value="";

document.getElementById('sub').setAttribute("style","display:block;position:absolute;top:15px;left:55px;opacity:0.3;transition:display 5s;");

}

function cls(){

document.getElementById('sub').style.display="none";

}

</script>

</head>

<body>

name<input type="text" required id="nm"><br>

</div>

<p id="pa"> Mail send success fullly</p>

</div>

</body>

</html>

14 January 2018

Javascript for beginners and advanced Concepts

JAVASCRIPT

What is Javascript?

Javascript is a Scripting Language and Programming Language JavaScript was introduced in 1995.it’s execute within a browser ,Javascript code is embed in HTML webpage. <script> tag is used to javascript code.

Different type Javascript code embedded in

Using head tag

Using Body tag

Using External script

Head Tag Embed in:

<html>

<head>

</head>

<body>

</body>

</html>

External Script:

<html>

<head>

</head>

<body>

</body>

</html>

Body Tag Embed in:

<html>

<head>

</head>

<body>

</body>

</html>

Javascript Function:

Function is a keyword name of Function . set open and close Parantheses enclose with parameter and without parameter and the curly braces

<html>

<head>

function sum(a,b)

{

return a*b;

}

</script>

</head>

<body>

document.writeln(sum(10,10));

</script>

</body>

</html>

JAVASCRIPT ELEMENTS

Ø Variables

Ø Objects

Ø Operators

Ø Statements

Ø Function and Methods

Variables:

Variable is also called Identifier. Variables are Containers for Storing Data or Information.

Rules for Variables

Starting first letter or Underscore Character

Do not use Numbers

Javascript is a Casesensitive

Variable is a assigned with = operator

Scope of Variables:

Ø Local

Ø Global

Local:

A variables is declared inside a method is called local variables. Only access within function

Ex:

<html>

function sum(){

var a=10;

var b=20;

var c=a+b;

alert(c);

}

</script>

</head>

</html>

Global:

Global variables is access anywhere in the page .once declared global variable

Access with function or without function

Ex:

<html>

Var a,b;

function sum(){

a=10;

b=20;

var c=a+b;

alert(c);

}

</script>

</head>

</html>

DATA TYPES

Numbers => Integer and Floating Points 1 or 1.0

Booleans => Boolean is True or False and 0 0r 1

Strings => String is a Sequence of Character " hello world "

Objects => Represent elements of html page

Null => No values is assigned or empty values

JAVASCRIPT USING GET CURRENT LOCATION

d Reffer This Site To get API key:

https://developer.here.com
Then Go to This Site Create Account and Login , And this website gave a API and Code to use
Example

<script src="https://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script>

var platform = new H.service.Platform({
"app_id": "Your APP ID",
"app_code": "Your APP Code"
});
var geocoder = platform.getGeocodingService();
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position => {
geocoder.reverseGeocode(
{
mode: "retrieveAddresses",
maxresults: 1,
prox: position.coords.latitude + "," + position.coords.longitude
}, data => {
var cty=data.Response.View[0].Result[0].Location.Address.City;

window.location.href='https://localhost/demo/index.php?city='+btoa(cty);
}, error => {
console.error(error);
}
);
},err =>{
let e=err.code;
if(e==1){
;
Swal.fire({
title: 'You Denied The Location',
text: 'Allow the Location',
type: 'error',
confirmButtonText: 'Allow'
}).then((e)=>{
alert('denied location');
});
if(navigator.geolocation){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
navigator.geolocation.getCurrentPosition(showPosition);
}
}
})

);

} else {

console.error("Geolocation is not supported by this browser!");

}

</script>

Web Development Solution

Search This Blog

01 February 2018

HTML ,CSS & Javascript Using Simple Popup Box

14 January 2018

Javascript for beginners and advanced Concepts

JAVASCRIPT USING GET CURRENT LOCATION

d Reffer This Site To get API key:

Jquery or Javascript Start Exam Time