Skip to content
OverviewSolutions
22
Comments
15
Andy
@AndyAshley

All 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
  • Andy•520
    @AndyAshley

    Hey Allyson, great job on the challenge! It looks/ works great! To keep your submit button from “submitting” or auto refreshing the page by default you can add a function to handle the click. A lot of people do something like a custom handleSubmit() function followed by a prevent default, or add an even listener tied to the button that prevents the default

    yourSelector.addEventListener(“click”, (e) => {e.preventDefault()
})

    Then they add what they want the button to do in an on click for handleSubmit() .

    I think I may have used some transparency in mine as well. But I’ve noticed the screenshots may have been taken in Firefox, and chrome can display things a bit different.

    As for centering the text within its background, if you’re using display: flex make sure the parent element has enough room(sometimes need to add a height or width) and use justify-content: center and align-items: center for most cases. Can also pull out the align-self or justify-self . Hope that helps! Great job and happy coding ! 😀

    Marked as helpful
  • Andy•520
    @AndyAshley

    Hey Kenzar, good job on the challenge! I found your issue with the image. When I go to inspect the page and add a . in front of your image path everything works fine :) .

    You have /images/image-qr-code.png . Just change it to ./images/image-qr-code.png , or remove the / altogether, and it will pop right up. It couldnt find the path within the folder hierarchy. Check out w3 Schools HTML File Paths

    You can also clear up the Accessibility issues by wrapping your content within the body in a <main> tag or other appropriate landmark tag. For the <h1> issue, throw your main header text into an <h1> instead of an <h2> tag. You can style this to reduce the font size if you need to. Happy coding and hope that helps!

    Marked as helpful
  • Andy•520
    @AndyAshley

    Awesome Job on the challenge! It looks/functions great! One thing you might want to do is add a max width on sections 2 and 3 after 1440px. On 2K screens and up the content inside looks a little farther apart. Everything else flows nicely and is spaced perfectly. Overall great job and happy coding!

  • Andy•520
    @AndyAshley

    Hey Yoyo-Ka. Great job on the challenge, it looks awesome! As for your question- with the layout of your code you could make the .layer class have a transparent background, and then hsl(178, 100%, 50%) on hover. Also the <time> tag you used isn't in the correct format, that's why its giving that error. I would just give it a regular class :) . Wrapping everything up in the body with a <main> tag will clear the other error of not having a landmark for your content. Hope that helps and happy coding!

    Marked as helpful
  • Andy•520
    @AndyAshley

    Hey Adenike, great job on the challenge! As for your question, I'm using a 2k screen (2560x1440), and when I view your page it has a scrollbar down. I see in your code that you have the body width set to 100% and a height commented out. Try using min-width: 100vw; and min-height: 100vh; to make it more responsive to displays, and then adjust your positioning of the content within the main. If you remove the background-size rules (auto and contain) from your body, it will also kick them into the right place and size on larger screens. hope this helped! Happy coding :)

    Marked as helpful
  • Andy•520
    @AndyAshley

    Looks good! I would decrease the padding of the card itself a little bit, and then increase the padding of your contents class to adjust- if you wanted to get it a little closer to the design. You could also add some padding-top to the attribute element for a little cleaner look :) Either way it looks great. Good job and happy coding!

    Marked as helpful
  • Andy•520
    @AndyAshley

    Awesome job completing the challenge! It looks great. If you find yourself writing things multiple times you can use custom utility classes like:

    .font-primary { color: #FFF; }

    Then anytime you want something that font color fast just add it to the class.

    <h1 class="font-primary"> My Heading </h1>

    Also you can use :root {} to set up variables for everything from colors to numbers.

    :root { --font-primary: #FFF; }

    then call it with var().

    .div p { color: var(--font-primary); }

    that way you can change your entire primary color if you wanted with one line in the root.

    for the HTML and Accessibility errors, simply wrap your content inside the body in a <main> landmark tag, and make sure you use the alt attribute on images. This gives screen readers something to read, and displays text if the image fails to load. Happy Coding!

    Marked as helpful
  • Andy•520
    @AndyAshley

    you got that sizing on POINT! haha. Looks great! like Raven said, that HTML issue is coming from not having alt attribute on the image (<img src="/link" alt="image description" />). this provides text (if the image fails to load) and something for screen readers to read. the other issues can be resolved by simply wrapping your component in a <main> tag. Good job!

  • Andy•520
    @AndyAshley

    I agree with what Paula said. It looks really good. The padding is most likely the issue going on. you can wrap the text in a div and give it some padding on the left and right. You could do something like:

    padding-inline: 15px;

    you can check my code to see how I dealt with the layout. Mine isn't as tall either.

    Marked as helpful