Get Your Geo Location

-

 



HTML + CSS + JavaScript 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Geo Location</title>

    <style>
        body {
            font-family: 'Courier New', Courier, monospace;
        }

        button {
            font-size: 18px;
            padding: 10px 5px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div>
        <h3>Click the button to get your coordinates.</h3>

        <button onclick="getLocation()">Know Your Geo Location...</button>

        <h1>Latitude : <span id="lan"></span></h1>
        <h1>Longitude : <span id="lon"></span></h1>
    </div>

    <!-- ################################################# -->
    <!-- ################## JavaScript ################### --> 
    <!-- ################################################# -->

    <script>
        var lan = document.getElementById("lan");
        var lon = document.getElementById("lon");

        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
            } else {
                x.innerHTML = "Geolocation is not supported by this browser.";
            }
        }

        function showPosition(position) {
            lan.innerText = position.coords.latitude;
            lon.innerText = position.coords.longitude;
        }
    </script>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Stack

-
Data-Structure | Linear Category Stack Code Example  // BluePrint || Static Thing class Stack { // LIFO = Last In Fast Out | (Linear) Data-Structure constructor() { // empty stack this.stack = []; } // add new data in stack, one by one add(data) { this.stack.push(data); } // remove data from stack remove() { // for checking, is stack empty or not... if (this.stack.length) { return this.stack.pop(); } } } // ######################################################## // ######################################################## // ######################################################## // Object Creating || Dynamic Thing // Create an object of Stack class const person = new Stack(); person.add('Sam'); person.add('Jon'); person.add('Ken'); person.add('Lee'); // total object calling [its not a good approach] c
Read more

React | State Toggling

-
Image
  if you are wondering How to toggle Boolean   state in react component, then maybe this little code snippet for you... Ingredients :  HTML CSS React *** Dependency :  Bootstrap (Only for button) command: npm start   import React, { useState } from 'react'; import 'bootstrap/dist/css/bootstrap.min.css'; const App = () => { const [isLoggedIn, setIsLoggedIn] = useState(true); //let isLoggedIn = true; <<<|<<< this approach not work... // Element Variable const buttonText = isLoggedIn ? 'Log Out' : 'Log In'; const classNameChange = isLoggedIn ? 'danger' : 'success' const toggleFunction = () => { //isLoggedIn = !isLoggedIn; <<<|<<< this approach not work... setIsLoggedIn(!isLoggedIn); } const style = { textAlign: 'center', marginTop: '20px', lineHeight: 5 }; return ( <div style={style}>
Read more