Skip to content
OverviewSolutions
22
Comments
15

Andy

@AndyAshleyNorthern New York520 points

I'm a Senior Front-end Developer trying to learn all that I can. - Html/CSS/Javascript - React - NextJs - Typescript - GO - Rust - PostgreSQL

I’m currently learning...

Java

Latest solutions

View more solutions

Latest comments

  • Andy•520
    @AndyAshley

    hey f5rcbh, Good job on completing the challenge! As for your question, there are a few ways to do something like this. you can define a const with your element in it like:

    const myElement = document.getElementById("my-id"); or const myElement = document.querySelector("my-class");

    then you can do something like myElement.classList.add("another-class"); or myElement.classList.remove("another-class");

    if you have a css class with a toggle you can also play with that.

    .my-class.active {
color: white;
}

    then you can do myElement.classList.toggle("active"); theres all sorts of ways you can select and toggle classes and styles, even data attributes.

    theres also stuff like myElement.style.display = "none"; to change a style directly.

    hope that helps a bit, sorry for the long crazy comment haha. Happy Coding!

    Marked as helpful
  • Andy•520
    @AndyAshley

    Hey Jennifer! Great job on the challenge! I did notice that when I click on the fetch button it actually throws 2 requests for some reason, and displays one really quick before updating to the next one. The slip # doesn't change either. You could try putting the entire data.slip in a const and then mapping the data with id and advice. Do your call for the entire data.slip and then store the data.slip.id in one const, and the data.slip.advice in another const, then just throw them in where they go like you did with {quote} . Hope that helps! Awesome job and happy coding!

    Marked as helpful
  • Andy•520
    @AndyAshley

    Hey Zack! Good job on the challenge! I would suggest a few things for you. Using vw or vh on text isn't a great idea. It does scale, but it gets so tiny that no one could read it. Also if you made your body or main container have a display: flex with justify-content: center and align-items: center and remove position: absolute on the id="base" container, it wouldn't squish like that and it would also remain centered to the page.

    for the html errors, the lang one can be fixed in nextJS by adding this to your next.config.js:

    
module.exports = {
  i18n: {
    locales: ["en"],
    defaultLocale: "en",
  },
};

    then just make sure all your images have alt tags. :)

    you could also give the card container a max-width to prevent it from getting larger than intended. that way it can only get so big, but can scale smaller if needed.

    I hope that helps! feel free to ask me any questions if ya need to, Happy Coding!

    Marked as helpful
  • Andy•520
    @AndyAshley

    After reading your issue with the H1 and looking at the code, I just realized I never added the Logo to mine.. I must have overlooked it lol! I did it like this: <h1>SPLI<br />TTER</h1> . Never even realized it until now. Maybe that will work for ya as well? lol. There are other ways to get around it though, like what Fazza mentioned.

  • Andy•520
    @AndyAshley

    Hey Adrianna, Good job on the challenge! I do see what you're talking about after the mobile breakpoint where it kind of squishes together until it gets wider. What you could do is give your main container a max-width until a mid way breakpoint where the content has enough room to do its 4 way layout. That way it doesn't stretch out too far while its waiting for enough room fully expand.

    Also I noticed at your 400px breakpoint you put a . before your main selector making it look for a main class instead of the actual main tag. The centering gets thrown off above 1440px. That can be fixed by simply adding display: flex with a justify-content: center on the body.

    I don't think it really matters what units you choose for your sizing of elements as long as they're consistent. percentages can act in weird ways sometimes so I would stick with something like px, rem, or ch (with text). em can change based on the parent containers text size.

    Hope that helps! if you have any questions feel free to ask me here :) Good job and happy coding!

    Marked as helpful
  • Andy•520
    @AndyAshley

    Hey Marta! That loading animation is awesome! Great job on the site! As for your question, you could try adding your own image in an open graph image meta tag.

    <meta property="og:image" content="/link-to-my-image.png"/>

    You can find out more about it here open graph protocol .

    I do see you have an og:title and a twitter card on there, but I couldn't find an og:image when looking through the code. That might work for ya, hope it helps! Happy coding :)

    Marked as helpful
View more comments