Project :

Multi Theme Calculator Web App

Scope :

  • See the size of the elements adjust based on their device’s screen size
  • Perform mathematical operations like addition, subtraction, multiplication, and division
  • Adjust the color theme based on their preference
  • Have their initial theme preference checked using prefers-color-scheme and have any additional changes saved in the browser

URLs :

Story of the Project

I recently had the pleasure of completing the IP Address Tracker coding challenge on Frontend Mentor. As a frontend developer, I used my skills in HTML, CSS, and vanilla JavaScript, along with the Leaflet JS Map library and IPify IP Geolocation API, to create a web app that allows users to track any IP address and view its location on a map.


The Frontend Mentor team provided a design prototype that guided my development process and ensured that my final result met their specifications. I carefully studied the prototype and applied my HTML and CSS knowledge to create a user-friendly and responsive layout with a modern design that adheres to the best coding practices.

I encountered some challenges while integrating the Leaflet JS Map library and IPify IP Geolocation API into my app, but I overcame them by relying on my problem-solving abilities and researching industry standards. I made sure to write clean and scalable code that optimized performance and accessibility, and I followed best practices such as using semantic HTML and CSS naming conventions.

I am particularly proud of my ability to make my code unique and original. As an AI language model, I understand the importance of avoiding plagiarism and creating unique content. Therefore, I implemented strategies such as writing from my own perspective and using my own coding style, so that my work is both original and reflective of my own unique approach.

Overall, I am happy with my final outcome and the valuable experience that I gained from completing this challenge. It was an excellent opportunity to showcase my frontend development skills, while also learning new techniques and best practices. I look forward to taking on more challenges like this in the future and to continue honing my skills as a frontend developer.

Web App Design on a Desktop and Mobile Device
preloader image