https://github.com/pb2204/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.
https://github.com/pb2204/location-and-ip-display-web-application

ip-address ip-address-geolocation pabitra-banerjee webrtc

Last synced: about 2 months ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/pb2204/location-and-ip-display-web-application
• Owner: PB2204
• Created: 2024-02-28T08:17:13.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-02-28T08:17:19.000Z (11 months ago)
• Last Synced: 2024-12-18T19:06:10.549Z (about 2 months ago)
• Topics: ip-address, ip-address-geolocation, pabitra-banerjee, webrtc
• Language: JavaScript
• Homepage: https://pabitrabanerjee.me/Location-And-IP-Display-Web-Application/
• Size: 1.95 KB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.MD

Awesome Lists containing this project

README

        
# 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 [[email protected]](mailto:[email protected]) for any inquiries or contributions.

## Demo:

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