FUNCTIONALITIES
We had to create a responsive IP address tracker web application using HTML, CSS, and JavaScript. This assignment focuses on designing a user-friendly interface and implementing functionality to retrieve and display information about IP addresses. We will use JavaScript to interact with an open-source IP geolocation API https://geo.ipify.org/ and show the map with location.
Final Functionalities
- Ensure that the IP address tracker is responsive and works well on different screen sizes, including desktop, tablet, and mobile.
- Include a map displaying the approximate location of the IP address.
- See their own IP Address on the map on the initial page load
- Search for any IP addresses or domains and see the key information like location, ISP, country and state
- Implement error handling for cases such as network errors or API request failures, providing informative messages to the user.
- Implement a dark mode or theme switcher for the app.
- Add a history feature to keep a record of previously tracked IP addresses.
How to Use
- Search for your IP address or domain on the search bar
- After entering track Ip button you will be able to fetch the location, country , state and internet service provider for the given Ip address
- You can the track the Ip address history view the right history section and can see the location on the map
- Lastly by pressing the top left dark mode button on top left you will be able to switch to dark mode
Deploying your project
- Sign up to netlify and go through the onboarding flow, ensuring your GitHub account is connected by using their netflify for GitHub integration.
- Connect your project to Netlify from the "Import project" page, using the "From Git Repository" button and selecting the project you want to deploy.
- Once connected, every time you git push, Netlify will create a new deployment and the deployment URL will be shown on your Dashboard. You will also receive an email for each deployment with the URL.
The url for live deployments is https://ip-address-tracker-mandeep.netlify.app/