DEV Community: Sadiq Shah

Find your Location With Javascript

Sadiq Shah — Tue, 05 Nov 2024 05:57:40 +0000

In this blog post, we demonstrate how to retrieve the current location from the browser, then use the longitude and latitude coordinates to determine the exact location. We’ll use a free API from Maps.co to perform reverse geocoding, which converts coordinates into a human-readable

Steps to Implement:

Get Current Location: We access the user’s current location, which the browser provides (with user permission). This will give us the latitude and longitude values.
Reverse Geocode API: With these coordinates, we make an API call to Maps.co’s Reverse Geocoding API to get the full address. You can get an API key for free by signing up on their platform.
API Endpoint: The endpoint for reverse geocoding is:

https://geocode.maps.co/reverse?lat=latitude&lon=longitude&api_key=YOUR_API_KEY

Replace latitude and longitude with the actual values, and YOUR_API_KEY with your personal API key.

`const api_key = "you key";

const currentLocation = () => {
    navigator.geolocation.getCurrentPosition((position) => {
        fetchLocation(position.coords.longitude, position.coords.latitude)
    }, (error) => {
         console.error("Current Location", error);
    })

}
const fetchLocation = async (lon, lat) => {
    try {
           const location = await fetch(`https://geocode.maps.co/reverse?lat=${lat}&lon=${lon}&api_key=${api_key}`)
     const response = await location.json();
     console.log(response?.display_name);
    }
    catch (error) {
         console.error("Error fetching location:", error);
    }

}

currentLocation();`

How JavaScript Works?

Sadiq Shah — Wed, 04 Jan 2023 07:39:09 +0000

Working on the JavaScript is good but should also know the execution of the JavaScript.

So let discussed How JavaScript works?

JavaScript works on browser with the help of execution context means the execution context is the box where your all java scripts are render.

But there are two components

Memory Component (Variable Environment)
Code Component (Thread of Execution)

memory and code are linked together because code are stored into memory then execute.

Memory Component:

It is stored all variable and function as key paired value.
Example:
{
a = "sadiq"
function : sum(n,a)
}

Code Component:

In code component your all code render line by line or run 1 line at a time and also know as thread of execution.

JavaScript is synchronous single threading language.

Single Threading : Run one line of code at a time.
Synchronous Single Threading : Run one line of code at a time with

That Why JavaScript know as Synchronous Scripting Language .
specific order.

JavaScript Events

Sadiq Shah — Tue, 15 Nov 2022 08:15:18 +0000

JavaScript Events:

An event is a signal that something happened.
All DOM generated signals.

Types of Events

There are many Events in JavaScript but some events discuss in this article.

- Mouse Events

Click : Its performed when mouse click on any element. and touchscreen user can tabs to perform this event.
contextmenu : Its performed when mouse right click on any element.
mouseover : Its performed when mouseover the element.
mouseout : Its performed when mouseout the element.
mouseup : Its performed when mouse pressed.
mousedown: Its performed when mouse released over an element.

- Keyboard Events

1.keydown and keyup – when a keyboard key is pressed and released.

- Form Element Events

submit: when the visitor submits a
focus: when the visitor focuses on an element, e.g. on an

- Document Events:

DOMContentLoaded: when the HTML is loaded and processed, DOM is fully built.

- CSS events:

transitionend: when a CSS-animation finishes.

Introduction to JavaScript

Sadiq Shah — Sun, 23 Oct 2022 05:48:39 +0000

What is JavaScript ?

JavaScript was initially created to “make web pages alive”.

JavaScript is Scripting language and programs write in this language called as Script.

Scripts are provided and executed as plain text. They don’t need special preparation or compilation to run.

What is Variable? How to declare? and Legal and Illegal variables declaration in JavaScript?

Sadiq Shah — Sun, 22 May 2022 14:13:07 +0000

What is variable ?

Variables is the placeholder or the box, container that contains the values i.e. Letter(Strings), Number(integers, decimal), Characters(Special Symbol), Boolean(true and false), Object etc.

Data type :

Data type which defines the variable type or what kind of value can be store in the variable.(integer, string, number, symbol, Boolean, Object etc.)

How you can declare the variable in JavaScript

keyword specifier/Identifier = value (Data type)

Example :

var name = "Sadiq Shah";
var age = 23;

(I pass the value string to the variable named as name and age into number)

What is Legal and Illegal variable in JS?

Legal Variables : Can be declare

  var myname = "Sadiq Shah";
    var myName = "Sadiq Shah";
    var my_name = "sadiq shah";
    var _my_name = "sadiq shah";
    var $my_name = "sadiq shah";

Illegal Variables : Can not be declare

  var @myname = "Sadiq Shah";
    var 123myName = "Sadiq Shah";
    var my name = "sadiq shah";
    var month&year = "saadiq shah";
    var birth-year = "1990";

What is ECMA and what is the latest version of it ?

Sadiq Shah — Sat, 21 May 2022 15:49:34 +0000

ECMA International is a nonprofit standards organization for information and communication systems.

JavaScript introduce 1996
ECMA Script: when JavaScript introduce into the ECMA International Company then It’s called by ECMA + Script and introduce by 1997

Version of ECMA Script :

ECMA-262 5.1 edition, June 2011.
ECMA-262, 6th edition, June 2015.
ECMA-262, 7th edition, June 2016.
ECMA-262, 8th edition, June 2017.
ECMA-262, 9th edition, June 2018.
ECMA-262, 10th edition, June 2019.
ECMA-262, 11th edition, June 2020.