Skip to content
OverviewSolutions
7
Comments
26
teamie
@tea-scripts

All comments

  • Alice Won•20
    @alicewonSubmitted over 2 years ago

    My updated code has cleaner usage of the advice state and includes a setTimeout to handle the 2 second caching from the API. Thanks for the comments!

    There was something I couldn't quite figure out with my state , the dice button doesn't seem to update if you click on it too fast consecutively... almost like you have to wait 1 second before being able to see a new string. I tried to use prevState to prevent batching re-renders but I don't think that helped. I would love if this was smoothly/quickly updating the advice data each time I clicked the button.

    The glowing hover state looks a little odd to me so any tips on how to make it more nuanced/pretty would be great!

    I improvised a bit of a title page/homepage because when my default state (an empty advice object) would render on refresh, I'd have just quotation marks and "advice #..." without any data yet. I ended up tinkering with conditional rendering and template literals to achieve somewhat of a homepage based on if the dice button had fetched the data for my object in state yet (for example, was advice undefined? if so, render "Welcome" string", etc). Could I have done this another way that's maybe more efficient?

    It was also my first time using Vercel and it was super easy to set up and get going.

    Advice Generator using API and React

    3
    teamie•470
    @tea-scriptsPosted over 2 years ago

    Hello there Alice.

    When fetching data from an external API no matter how you set up your app there will be a request and this usually happens over time, could be in a few seconds or in ms. Clicking on the button repeatedly would send multiple request to the server and if your network is fast you might get immediate responses but with a short delay either in seconds or ms. You can refer to your network tab in your dev tools in your browser to see how it works.

    I tried your app and sent 20 immediate request and I was able to get the strings but had to wait a few ms after the first 2 request because we're fetching from an external source. If your data was local, perhaps it might be different.

    For me I think your app works fine. An alternative to fast response would be building your apps using Gatsby.

    0
  • Pedro Verde•60
    @verdepedroSubmitted over 2 years ago

    Hi everyone!

    I am submitting this challenge where I found real difficulties placing the elements in the correct place. Please do not hesitate to check out the code if you have any feedback or suggestion, I will really appreciate it! I wish you all a wonderful day!

    Stats preview card component

    2
    teamie•470
    @tea-scriptsPosted over 2 years ago

    I'd say you did a great job completing the challenge and it was a good thing you struggled with it cause now you've got a hang of dealing with similar situations if the need be. Some tips:

    • Consider using HTML semantics like article in your markup. You can learn more about HTML Semantics here. It's considered best practice and also makes web pages more informative and adaptable, allowing browsers and search engines to better interpret contents in our pages.
    • Also you can place your entire markup in a landmark like main. This also helps take care of the accessibility issue of landmarks.

    Great job so far mate, happy coding 👍.

    Marked as helpful
    1
  • Евгений•50
    @rahunakSubmitted over 2 years ago

    How can i block the button after sending request? If i disable cache in browser, all works right. How can i fix it?

    js html css

    2
    teamie•470
    @tea-scriptsPosted over 2 years ago

    Hey there rahunak, great work completing the challenge! Care to elaborate on what you're trying to achieve?

    Marked as helpful
    0
  • jackzorola•40
    @jackzorola10Submitted over 2 years ago

    I found myself in the problem that the screen sizes indicated that I should create the screens for Mobile: 375px & Desktop: 1440px, but those differentiations in the media queries simpky did not made the job for me, it made some of the cards look too crammed, so I ended up cutting the screens at 672px, which it seems like it worked much better.

    I was not able to make the buttons align in every screen size, I'm not particularly sure what to do about this. Screenshot.

    Thank you so much!

    3 Column Preview Card Component

    1
    teamie•470
    @tea-scriptsPosted over 2 years ago

    Great work completing the challenge. Some points:

    • Ideally each of these cards should be wrapped in article instead of a section so you might want to take a look at that. To learn more about HTML Semantic Tags click here.
    • Try switching the display property to inline-block or block. This should help to align the buttons on every screen size.
    • Nice work making the switch at 672px in real world cases you'd be designing for Mobile, Tablet and Desktop Layouts.
    • For the accessibility issue, you can wrap your entire markup in the main tag including the <div class="attribution">.

    Great effort so far mate. Happy coding 👍!

    Marked as helpful
    0
  • teamie•470
    @tea-scriptsPosted over 2 years ago

    Great job completing the challenge. Some points

    • You might want to consider using an article instead of a section. This is somewhat a card and not an entire section. an article can be placed inside of a section and also vice-versa.
    • Another thing missing is a transition on your buttons. You want the :hover to take effect over time and not instantly. This makes your design more pleasing to the user and gives better experience.

    You did an amazing job. Happy coding 👍!

    Marked as helpful
    1
  • Shamil ussain c•70
    @shamilussaincSubmitted over 2 years ago

    Hey guys, here is my 4th frontendmentor project. I am enjoying the journey. Please take a look at my solution. Where i am using two separate image tags for mobile and desktop view. And showing corresponding image based of the screen width. is that the right way to do it ? Or any better solution? your feedback is important. Thank you.

    Responsive Stats Preview Card Component Using CSS Grid

    2
    teamie•470
    @tea-scriptsPosted over 2 years ago

    Great job completing the challenge. Just some points:

    • Nesting is one of the beautiful features of SASS but try as much as possible not to always nest too deep. Might become hard to find things.
    • Also try not to nest in the body. Keep only default styles in the body. Default styles like line-height, default color, default font-family etc. should be the styles in your body then you can overwrite them later outside of the body wherever you'd need to.
    • You might also want to consider using sematic HTML like article in place of the divs. For instance your card is considered an article in semantic HTML. Learn more about HTML Semantics here.

    Overall you did an impressive job. Keep pushing and happy coding 👍!

    1
  • Chey•70
    @cheytesSubmitted over 2 years ago

    Hii,

    The sizing is off and the image just won't work with me. Any feedback is appreciated !

    Stats Preview Card

    2
    teamie•470
    @tea-scriptsPosted over 2 years ago

    Great work completing the challenge. Some help:

    • You can set the display property for the image to block and also object-fit to cover. This would make your image fill up the entire space dedicated for it also don't forget to take off/add the border-radius where necessary.
    • Having a max-width property on your card/container would help you maintain the perfect size you want and puts you in control of the maximum width you want that card/container to have.
    • You should consider using CSS Grid or Flexbox for your .content div to have a more aligned display. To learn more about CSS Grid and Flexbox
    • If you look at the color of "insight" it is similar to the overlay you want to achieve on the image and you can use the linear-gradient as an alternative approach and just play around with the opacity.
    • For the accessibility issue, you can replace your h3 with h2 in your stats. Just like the warning states, heading levels should be incremental.

    You've done a great job so far, happy coding 👍!

    1
  • teamie•470
    @tea-scriptsPosted over 2 years ago

    Great work mate! Additional help:

    • Try as much as possible not to have your CSS styles internally. You should consider creating a .css file then place all your styling there. Helps w/ separation of concerns and maintain clean code and file structure.
    • You should also consider using semantic HTML instead of having divs all over your markup. For example your entire card is considered an article in HTML semantic.
    • You seem to also be missing the mobile layout which should have been your first approach(not compulsory).
    • You can place the "plan" in a container and try using the CSS Grid or Flexbox to style however you want.

    To achieve the pattern background, there are a couple of approaches you might want to consider but the easiest one which I can recommend i:

    • background-image: url(" ");
    • background-color: hsl();
    • background-position: and lastly
    • background-repeat:

    These properties would help you set up a default background image and also a default background color stacked on one another. You can learn more about Background Properties using this link.

    Keep up the effort and happy coding 👍!

    Marked as helpful
    2
  • teamie•470
    @tea-scriptsPosted over 2 years ago

    Great effort completing the challenge. Some few points:

    • I'd advice trying to use some semantic HTML tags like section or article and also landmarks like main.
    • Great job having your variables set up.
    • You might want to add a transition property to your buttons and links you would want the hover effect to happen over time and not instantly.
    • Also I learnt about using the background-image along side the background-color from your solution so thanks for that mate! Keep up the effort and happy coding 👍!
    0
  • teamie•470
    @tea-scriptsPosted over 2 years ago

    Great effort completing the challenge. Some few points:

    • You can try having a max-width property on your container on the smaller screen and also on your h1 in the card so it doesn't have to span all across the container.
    • For the stats header the preferred color should be "white".
    • You might also want to look into using semantic HTML tags like section or article. Would have been a much better option compared to having div all over your entire markup.
    • To be honest you did a good job completing the project. Keep up the effort, happy coding 👍!
    Marked as helpful
    1
  • teamie•470
    @tea-scriptsPosted over 2 years ago

    Great effort completing the challenge. Some few points:

    • You can also have your <a> inside of your <li>. You can't place it directly as a child of the ul or ol.
    • Try placing your entire markup (from the start of your body till the end of same) in a landmark like <main>.
    • Although it's not important when working alone but keeping a clean and organized code is considered best practice if other developers would be taking a look or working with your code.
    • You do not need to use a <span> to style the text content of a button you can apply all those style directly on the button using the selector or adding a class to the button. If you have different buttons on the same project you can add an additional class or Id to overwrite some generic styles.
    • In the challenge the "cancel order" should not have a background and also you might want to add that background to your ul where you have your "plan".
    • Lastly you might want to look into box-shadow CSS property. In simple terms this helps makes your design look like a card. Great job so far, happy coding 👍!
    Marked as helpful
    1
  • teamie•470
    @tea-scriptsPosted over 2 years ago

    Good luck completing the project! Some things to put into consideration would be:

    • Ensure to place your entire markup in a landmark like the main.
    • When using section tags, you should stick to using h2 - h6 in place of h1
    • You should also consider adding a min-height on your cards especially for small screens. Good effort using HTML Semantics. Great work, happy coding 👍!
    0