IP address tracker solution

       

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

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

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

Extra features:

• Error handling
• Not allow empty request
• Display error messages to the user

Screenshots

Links

• Solution URL: GitHub
• Live Site URL: Vercel

My process

Built with

• Semantic HTML5 markup
• BEM for naming methodology
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• JavaScript

What I learned

I was able to practice and learn more about JavaScript Async functions as well as how to do error handling and display custom messages for specific erros, this is the first time I have ever done somethig like this.

export async function searchIpAddress(searchedIpAddressOrDomain, popupMessage) {
    resetSearchBarErrorState();
    const url = `https://geo.ipify.org/api/v2/country,city?apiKey=${apiKey}&domain=${searchedIpAddressOrDomain}`;

    try {
        const response = await fetch(url);

        if(!response.ok) {
            throw new Error(`${response.status}`);
        }

        const responseJson = await response.json();
        clearSearchBar();
        if(!popupMessage) {
            popupMessage = `This is the location of ${searchedIpAddressOrDomain}`;
        }
        return updatePage(responseJson, popupMessage);
    } catch (error) {
        displayErrorMessage(error);
    }
}

export function displayErrorMessage(error) {
    const searchBar = document.getElementById('search-bar');
    searchBar.classList.add('header__search-bar--erro');
    const message = document.getElementById('error-message');
    
    if (error.message === "422") {
        message.innerHTML = "&#9888 Error: 422 - Unprocessable Entity - this is not an IP address nor a domain.";
    } else if (error.message === "400") {
        message.innerHTML = "&#9888 Error: 400 -  Bad Request - this IP Address or Domain does not exist.";
    } else {
        console.log(error)
        alert(error);
    }
}

Continued development

I would like to keep improving the use of JavaScript and also learn Vue.js 3.

Useful resources

• bobbyhadz's blog - This is an amazing article which helped me understand a propper way of handling exception in JS.
• GETBEM - This helped me understand how to apply the BEM methodology. I'd recommend it to anyone still learning this concept.
• Mozilla Doc - This is the best documentation when you don't know exactly how to search a problem, it always gives a good direction to follow.

Author

Acknowledgments

My husband @filipedanielski who is always supporting and encouraging me.