Skip to content
OverviewSolutions
9
Comments
15
Fayaz
@fayax555

All comments

  • Fayaz•380
    @fayax555Posted over 2 years ago

    Take a look at CSS modules. It creates local CSS instead of global. With this approach, conventions like BEM become unnecessary.

    To use it with React, change the file name to someComponent.module.css. and import it in your files like `import styles from './someComponent.module.css'.

    And use it in your classname. <section className={styles.filterbox}>.

    If you have any more questions reply to this comment.

    Marked as helpful
    1
  • Raymart Pamplona•16,100
    @pikapikamartSubmitted over 2 years ago

    Hello. This is my 24th challenge here and my first premium challenge taken^^

    This challenge was taken around January but took me too long to build it. January and early February was really hectic as again, lots of school activities/projects and even short film animations, those was grouping so that I had to shift my focus for it at the time! Glad that it was over. Phew:>>

    I picked this challenge as a first out of the premium challenges because this challenge was the one that I really want to create when I saw way before the challenges here at fem and i'm really glad that I was able to take this one!!

    This is my first time using styled-component as well. I haven't searched articles about what is the proper approach or convention when using styled-components. That is why for every styled-component that I used, I prefixed it with a "Styled" word like "StyledNavbavList", I was thinking that it is too verbose and kind of felt a bit off at first but I just continued with it. It will be really nice if you share your thoughts about using styled-components, specially naming each styled.

    I added some animations as well on the site and I think I got the functionalities right? Hehe, hoping so. For the create-plan page, I initially thought that there will be no logic in the price computation, the moment when I had to push now the site, I saw a readme on the challenge folder from the challenge.zip, there it was. The logic for the computation :>>> That was close submitting a not fully functional site!!

    Lastly, if you could give me a resource/information on how to render svg dynamically. For example, I have 3 svgs in a folder, how can I just import that and use it without using the svg as a value for src prop in the img. Thanks!

    (The hover for the social media icons was supposed to make it colored paleOrange but never did it because I want to render svg dynamically and not manually adding svg code if there is such a way)

    Overall, I am really happy with this one and hoping that I could not tackle more challenges. Thank you for checking this one out!!

    Coffeeroaster Multi Page | Next.js , Mobile first

    7
    Fayaz•380
    @fayax555Posted over 2 years ago

    You could prefix with an S instead of Styled. So StyledNavbar will become SNavbar.

    1
  • Fayaz•380
    @fayax555Posted almost 3 years ago

    Filter logic is not correct. When you click frontend tag, you should see all jobs that have frontend tag.

    if (filterList.some(tag => filters.includes(tag))) return null; I think if you change some to every, it will work correctly.

    Marked as helpful
    2
  • Karishma Garg•1,010
    @karishma-devSubmitted almost 3 years ago

    Hey Guys, I just finished the IP Address Tracker Challenge. I would like you all to see it and let me know how I can improve it. Let me know my mistakes. Thank you!.

    IP Address Tracker

    1
    Fayaz•380
    @fayax555Posted almost 3 years ago

    According to challenge requirements, users should be able to search for any domain.

    You can do this by changing ipAddress to domain in fetch(`https://geo.ipify.org/api/v2/country,city?apiKey=at_qoJBZrBxMVeTgrJkk7P3vZIbtmb0U&ipAddress=${address}`).

    Other than that, this looks great to me.

    Marked as helpful
    0
  • Fayaz•380
    @fayax555Posted almost 3 years ago

    Really nice solution.

    One thing I would add is, when you switch to 'Yearly Billing', it should not change from '/monthly', to '/yearly'. It should stay '/monthly'.

    Marked as helpful
    0
  • Fayaz•380
    @fayax555Posted almost 3 years ago

    Great Job on the project. There are things you can do to improve your solution even further.

    The clickable area for - and + buttons are tiny. It can be hard for some people to click those icons.

    On smaller screen heights, I'm not able to view lightbox modal's top part (close icon).

    When I open the mobile nav menu and expand the viewport width, the close icon disappears, but the menu still stay open.

    Marked as helpful
    1
  • Maria•200
    @mariapenaaSubmitted almost 3 years ago

    I´m almost out of free api requests for the month so that may stop the website from working. One of the biggest challenges was detecting when a user was writing a domain and when he was writing an IP address, this affects whether dots are automatically added. I would really appreciate some feedback on this project. Thanks!

    Responsive IP and domain tracker

    3
    Fayaz•380
    @fayax555Posted almost 3 years ago

    I only did the &domain=${ip}, and didn't use &ipAddress=. It seems domain accepts ip address as well, not just domains.

    0
  • Fayaz•380
    @fayax555Posted almost 3 years ago

    To center the card both horizontally and vertically, remove margin: 0 auto; width: 1440px; and then put display: grid; height: 100vh; place-content: center; to your body. If you give your body width:1440px;, it can give you a horizontal scrollbar when the screen is below 1440px. Use max-width when you have to give a width to containers. But in this project, you don't have to give any widths to your body, simply do the things I've said at the beginning.

    Marked as helpful
    0
  • Fayaz•380
    @fayax555Posted almost 3 years ago

    https://geo.ipify.org/api/v2/country,city?apiKey=at_RTk0rwxaK8JXPgBj87O7nTL7ug6ZA&domain=8.8.8.8

    I can see your apikey

    0
  • Benja.min•740
    @BenjaDotMinSubmitted almost 3 years ago

    Hi all! Here is an app featuring the NextJS framework (with server sider rendering) and some JS filtering.

    NextJS seems pretty good from building this, and I am excited to get to know more about it, So any tips are welcome!

    Next JS, SSR

    1
    Fayaz•380
    @fayax555Posted almost 3 years ago

    It's better to use getStaticProps when the api data doesn't change often since it is much faster than getServerSideProps. But I guess it doesn't matter much here, since you cleverly hide the loading state with a nice animation.

    Marked as helpful
    1
  • Fayaz•380
    @fayax555Posted almost 3 years ago

    Give height: 100vh; display: grid; align-items: center to your body. To make the image fit the container, give your image max-width: 100%, then give some padding (for all sides) to your div.

    1
  • Fayaz•380
    @fayax555Posted almost 3 years ago

    One way is to move the box out of the card. check these links. I've edited some of your code.

    live
    repo

    1