Again in my goal to master REACT JS, I have found this challenge that I found very interesting.
I used technologies such as the IPIFY API, to be able to make requests through an IP and obtain relevant information as a result, for example the country, state and city to which that IP belongs.
I also used the Google Maps API, to be able to show the location of the requested IP on the map.
It's interesting what can be achieved with these technologies, I can't wait for my next challenge.
This is my second challenge. This time I made a level jump to Junior.
Personal observations:
If this challenge had been done with html5, css and vanilla javascript, it would not have been complicated for me, however my goal is to practice react js, so I had the following complications:
1 When creating the component for the input, I decided to do a slightly different design than the challenge, but I ran into the problem that for some reason I can't initialize in EventListener("focus"), before I have to use the Input first, this causes the initial animation when focusing on the input to not work.
if(input) {
input.addEventListener("focus", () => {
setActive(true)
if(focus === "front")
frontActive(true)
else
frontActive(false)
})
input.addEventListener("blur", () => {
if(input.value === "") {
setActive(false)
input.parentElement.classList.add("required")
} else {
input.parentElement.classList.remove("required")
}
if(focus === "front")
frontActive(true)
else
frontActive(false)
})
}```
If anyone knows the solution to this problem, you can comment and I will follow the instructions.
Greetings!!.
