Ip Address Tracker using ipify API with vanilla Javascript.

Community feedback

• 

  Arturo Simon•1,785

  @artimysPosted about 4 years ago

  Hey there, nice job on the challenge. Responds well with a few minor adjustments.

  • when in mobile the zoom controls hover over the white box. Lookup zoomControl option in leaflet docs and set to false to remove.
  • remove cursor: pointer from input box
  • set a min-height to the white floating box so that longer results expand the div down. Might have to play with positioning after.
  • utilize the :last-child pseudo class on your header__ip-info to remove the last right border.

  JS suggestion: I noticed a form.addEventListener is always being attached when the button is clicked. It works but try this. Code below should trigger form when input is keyed ENTER and button is clicked.

  function getGeoLocation(event) {
    event.preventDefault();
    const input = document.querySelector('.header__input');
    
    console.log('form submitted');
    // rest of your code
  }
  
  form.addEventListener('submit', getGeoLocation);
  

  Hope it helps and keep on coding!!

  3

  ---

  

  Washington Campos•195

  @washington299Posted about 4 years ago

  @artimys Wow thank you so much for the help my friend i really like this kind of feedback, i'll explain you some details about the issues.

  1- about the zoom on mobile i find a way easier to resolve the issue, i just remove the .leaflet-top and .leaflet-left classes on css.

  2- i put the cursor: pointer on input because on layout image, it shows a cursor pointer when over on input, you can see the image on the design folder, it's the desktop-preview.jpg image.

  3- i'll try this method like you said and try refactor the white box, thank you for the suggestion.

  4- I already aplied this style and removed the border on the last element.

  Thank you again for the feed back, it helped me a lot and it's always a pleasure read other developers advices :).

  1

  

  Arturo Simon•1,785

  @artimysPosted about 4 years ago

  @washington299

  1- That's totally fair. If ever it seems like you're writing more code to manipulate an existing feature of something. I recommend checking the docs for options. Never know what you'll find

  2 - Ha I never realized that pointer was there

  Glad I could assist

  Happy Coding

  0
• 

  Ayodele Oluwasina•15

  @AyusePosted about 4 years ago

  Really nice, could you code it in react js also, would love to see your solution in react js

  1

  ---

  

  Washington Campos•195

  @washington299Posted about 4 years ago

  @Ayuse of course my friend, it’s very easy to code it in ReactJs, if you want to contact me i can make this project with ReactJs + Styled-Components, thank you so much :)

  0

  

  Ayodele Oluwasina•15

  @AyusePosted about 4 years ago

  @washington299 Wow thanks a lot brother.

  0

  

  Ayodele Oluwasina•15

  @AyusePosted about 4 years ago

  @washington299 I already sent you a message on instagram

  0
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  Hey, Washington Campos! 👋

  Nice job on this challenge! It works well and responds well, too! 👏

  Happy coding! 😁

  1

  ---

  

  Washington Campos•195

  @washington299Posted about 4 years ago

  @ApplePieGiraffe Thank you so much my friend, it's always good to read feedbacks like yours :)

  0