Skip to content
Submitted 3 months ago

Responsive landing page using CSS grid, JavaScript MVC architect,

maziarja•290
@maziarja
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...IP Address Tracker
  • HTML
  • CSS
  • JS
  • API
3intermediate

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I use Promise.race with setTimeout so If a request takes more than 5 seconds you get an Error, I handle errors if you enter the wrong IP-Address or have a low internet connection it shows on the container for user-friendly purposes.

What challenges did you encounter, and how did you overcome them?

there is nothing on this project to challenge me, the only issue is about ipify API, they give you just 1000 requests, and my request limit is 680 right now, so it's not going to work very soon probably.

What specific areas of your project would you like help with?

I am looking forward to hearing your opinion about this project, please comment it out

Community feedback

  • Teodor Jenkler•3,760
    @TedJenklerPosted 3 months ago

    Hi @maziarja,

    Great job on the project! I like the work you’ve done. I did notice a couple of issues:

    There seems to be a bug with the background in your project on my laptop but when I inspect in Chrome dev tools it works.

    The + and - buttons in the top-left corner might be unnecessary and break ur responsiveness, so consider removing them.

    The zoom functionality feels a bit too sensitive; adjusting it could improve the user experience.

    I tried to find the code on GitHub, but it looks like the repository isn’t available at the moment. Despite that, the overall project is impressive. I hope this feedback helps!

    Best regards, Teodor

    Marked as helpful
    1
    maziarja•290
    @maziarjaPosted 3 months ago

    @TedJenkler thank you for your helpful comment, because of the API key I had to private this project on Git Hub. Also, I removed the + and - buttons, hope it works better,

    1
    Teodor Jenkler•3,760
    @TedJenklerPosted 3 months ago

    @maziarja

    *(https://www.dotenv.org/docs/)

    It’s definitely working better now! For future projects, especially if you work on something more advanced like the flag project, I recommend using .env files and .gitignore to manage and hide your API keys. Deploying on Netlify with environment variables is usually easier to configure compared to GitHub Pages, where setting up environment variables can be quite complex(For me at least).

    I hope this tip helps!

    Marked as helpful
    1
    maziarja•290
    @maziarjaPosted 3 months ago

    @TedJenkler thank you for letting me know about dotenv, I hide my API_KEY using .env and gitignore. The project is public on GitHub now.

    1

Please log in to post a comment

Log in with GitHub

Join 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