Ip Address Tracker using ipify API with vanilla Javascript.
Design comparison
Solution retrospective
Feedbacks are always welcome, please if you see something that can be improved let me know :)
Community feedback
- @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 tofalse
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 yourheader__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@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 thedesktop-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@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 - when in mobile the zoom controls hover over the white box. Lookup
- @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@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@AyusePosted about 4 years ago@washington299 I already sent you a message on instagram
0 - @ApplePieGiraffePosted about 4 years ago
Hey, Washington Campos! 👋
Nice job on this challenge! It works well and responds well, too! 👏
Happy coding! 😁
1@washington299Posted about 4 years ago@ApplePieGiraffe Thank you so much my friend, it's always good to read feedbacks like yours :)
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord