Frontend Mentor - IP address tracker solution

This is a solution to the IP address tracker challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
  • Built with
  • What I learned
  • Continued development
• 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

• Solution URL: Code Source
• Live Site URL: Demo

Built with

• Angular
• CSS custom properties
• Flexbox
• Angular Material
• Type Script
• Leaflet - JS library
• Ipify - map API

What I learned

I've so many things such as creating a responsive design using Angular, Converting JavaScript codes into TypeScript, using Leaflet js in ts and controlling data using life cycles

  ngOnChanges(changes: SimpleChanges): void {
    if (
      changes['data'].currentValue.lat != 0.0 &&
      changes['data'].currentValue.lng != 0
    ) {
      this.data.lat = changes['data'].currentValue.lat;
      this.data.lng = changes['data'].currentValue.lng;
      console.log(this.data);
      var map1 = this.initMap(this.data.lat, this.data.lng);
      var container = L.DomUtil.get('map');
      if (container != null) {
        container['_leaflet_id'] = null;
      }
      if (container['_leaflet_id'] == null) {
        console.log(map1);
        this.initMap(this.data.lat, this.data.lng);
        console.log(map1);
      }
    }
  }

.cardComponent {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}
.map-container {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}

Continued development

I'm thinking of working more on the responsive design so i can improve it more

Useful resources

• Stack Overflow - This helped me a lot for resolving problems and bugs i faced

Author

• Frontend Mentor - @AbderrahimDahmani
• Linkedin - @AbderrahimDahmani