Frontend Mentor - IP address tracker solution

This is a solution to the IP address tracker challenge on Frontend Mentor.

Live view: https://simonemandola.github.io/ip-address-tracker/public

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for each page depending on their device's screen size
• See hover states for all interactive elements on the page
• 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 and location

Screenshot

Links

• Live Site URL: View online

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Vanilla JavaScript
• Gulp
• npm

1. Install npm

Install packaje-lock.json

npm init

2. Gulp

2.1. Install Gulp

The Installation will be global (⚠ If it hasn't been installed yet)

npm install --global gulp-cli

In the project folder, run the command (If it has already been installed globally)

npm install gulp

2.2. Install dependencies

Copy and paste all dependecies

npm i browser-sync gulp-exec gulp-sourcemaps gulp-babel gulp-uglify gulp-rename gulp-concat gulp-dart-sass gulp-htmlmin gulp-iconfont

If you are not using framework you need 'babel/core'

npm install @babel/core --save

also you need 'babel/preset-env'

npm i @babel/preset-env

On Windows

Line 41~ "gulpfile.js"

.pipe(exec('rmdir dist'))

2.3. Create gulpfile.js

In the root directory create gulpfile.js

2.4. Run Gulp

In project folder, run the command (develop mode)

gulp dev

3. Add assets directory

Create 'src' dir in the root of project and add 'assets' dir

assets.rar

4. Add index.html

If you don't use any framework, in root dir add index.html

Basic

5. Add main.js

In src directory add main.js, then import all .js files

6. Add .gitignore

In 'root' dir add .gitignore

Useful resources

• Leafletjs - Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. forward.
• Mapbox - OpenStreetMap.
• IP Geolocation API - IP Geolocation API allows you to locate and identify website visitors by IP address. IP location helps prevent fraud, customize web experiences, and maintain regulatory compliance.

Author

• Website - Simone Mandola
• Frontend Mentor - @simonemandola