Skip to content

Latest commit

 

History

History
51 lines (27 loc) · 2.73 KB

README.MD

File metadata and controls

51 lines (27 loc) · 2.73 KB

Location and IP Display Web Application

This web application allows users to fetch and display their current location (latitude and longitude) and, optionally, their IPv4 address. It provides a simple and intuitive interface for users to interact with.

Features:

  • Fetch Location: Users can click the "Display Location" button to retrieve their current latitude and longitude coordinates using the browser's geolocation API.

  • Fetch Location and IP: Users can also click the "Display IP With Location" button to fetch both their location and IPv4 address. The IPv4 address is obtained using WebRTC technology.

  • Clear Information: The application provides a "Clear" button to reset and clear all displayed information.

Technologies Used:

  • HTML: Markup language for structuring the webpage.

  • CSS: Stylesheet language for styling the webpage elements.

  • JavaScript: Programming language for adding interactivity to the webpage.

JavaScript Code Overview:

The JavaScript code in this project primarily handles fetching the user's location and IPv4 address and updating the webpage accordingly. Here's a detailed explanation of its functionality:

Fetching Location:

When the "Display Location" button is clicked, the code checks if the browser supports geolocation. If supported, it uses the navigator.geolocation.getCurrentPosition() method to get the user's current position (latitude and longitude). The retrieved coordinates are then displayed on the webpage.

Fetching Location and IPv4 Address:

When the "Display IP With Location" button is clicked, the code first fetches the user's location similar to the previous scenario. Additionally, it utilizes WebRTC (Web Real-Time Communication) to obtain the user's IPv4 address.

Here's how WebRTC is working to fetch the IPv4 address:

  1. A new RTCPeerConnection object is created.
  2. An ICE (Interactive Connectivity Establishment) candidate is generated by calling pc.createDataChannel("") and pc.createOffer(). This triggers the gathering of network information including the local IP address.
  3. The pc.onicecandidate event is triggered when an ICE candidate is found.
  4. The IPv4 address is extracted from the ICE candidate information and displayed on the webpage along with the location.

Clearing Information:

The "Clear" button resets and clears all displayed information (latitude, longitude, and IPv4 address) from the webpage.

Credits:

This project was created by Pabitra Banerjee. You can contact Pabitra Banerjee via rockstarpabitra2204@gmail.com for any inquiries or contributions.

Demo:

[Location And IP Display Web Application] (https://pabitrabanerjee.me/Location-And-IP-Display-Web-Application)