Skip to content
OverviewSolutions
19
Comments
34

Ayobami Ikuewumi

@Ikuewumi850 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • P
    Wannika123•890
    @Wannika123Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm glad that I finish another challenge.

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

    When fetching the data, what is the difference between:

    try {
...
} catch { ... }

    and

    fetch(...)
  .then(...)
  .then(...)
  .catch(...)

    And which situation to use it?

    P.S. As the advice #117 is no longer the same as in the design file, I made it generate random quote when loaded. And I think that's how it's supposed to be.

    Practice using API.

    1
    Ayobami Ikuewumi•850
    @IkuewumiPosted about 1 year ago

    Hi 👋 @Wannika123, Great project, really well done

    About your question, the try...catch...finally block was the first one made, it is just another tool for control flow, like an if , or switch statement.

    The fetch().then().catch().finally() was a way to bring the try...catch functionality into fetch calls

    So, they do the same thing, provide functions for code to run if it fails, preventing the error from spilling out into the outer scope

    Happy Coding, Ayobami

    Marked as helpful
    3
  • ParthUON•100
    @ParthUONSubmitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I take pride in implementing the clamp() function to achieve responsive typography. Looking forward, I would enhance my approach by exploring additional techniques for even more versatile and dynamic designs.

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

    I faced challenges adapting images for mobile and desktop, but I overcame them by utilizing CSS's content feature within img tags, ensuring a responsive solution.

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

    animation and parallax effect

    Responsive Product Card

    2
    Ayobami Ikuewumi•850
    @IkuewumiPosted about 1 year ago

    Hi @ParthUON. Awesome Project 👏

    About your question, I was impressed by the use of the content property, I always thought it was only used in pseudo-elements. But the answer here would be to use the picture element,

    This is an example

    <picture>
    <source srcset="...desktop.jpg" media="(min-width: 40rem)">
    <img src="...mobile.jpg" alt="">
</picture>

    picture {
    display: contents;
}

picture img {
    width: xrem;
    // more
}

    What happens is that the browser switches out the src of the image when it hits a specified media query

    A caveat though is that the content that is shown is only the image tag, so I would suggest, putting any styles on the image tag

    You can learn more about the picture tag on the MDN docs

    And btw what do you need parallax for?

    Happy Coding, Ayobami

    Marked as helpful
    1
  • Sara•460
    @saranatour1Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I got more comfortable in using grid in css, its a neat little thing, and I still could learn more.

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

    at first, I used the picture tag to put the assets within, but that made a few issues on resizing, and I didn't want to use 'position' property to fix that, but I ended up adding the images to my local tailwind config file, and adding a div with a background-image.

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

    In general, what do you think I should do to make this a better solution?

    Product preview card using vue ,tailiwndcss

    #tailwind-css#vue
    1
    Ayobami Ikuewumi•850
    @IkuewumiPosted about 1 year ago

    👋 Hi Sara.

    Unfortunately, the project isn't on GitHub anymore

    0
  • Ayobami Ikuewumi•850
    @IkuewumiPosted about 1 year ago

    Hi Nadda. Great Project 👌.

    About a better way to do dark mode, I checked your site out and saw you used the css :has selector on the .app wrapper. This is good, but a better way could be to define custom properties on your main element directly and just toggle that with the class change. This means your code is more maintainable and you can add more themes in the future.

    Also, right now the :has selector isn't the safest for production, although the major browsers all support it, a lot of users aren't running on the most up-to-date version of their browser. So, I would suggest you use it just for progressive enhancement.

    This is how my suggestion might look in code

    main {
   --bg-img: url(...path-light-mode.jpg);
   --clr-bg: ...;
   --clr-text: ...;
   // and so-on
}


main.dark {
    --bg-img: url(...path-dark-mode.jpg);
    --clr-bg: ...;
    --clr-text: ...;
}

    You can read more about how CSS custom properties work in the MDN docs. Hope this suggestion helps.

    Happy Coding, Ayobami

    Marked as helpful
    0
  • Ayobami Ikuewumi•850
    @IkuewumiPosted about 1 year ago

    Hi @IAMVICTHECG. Changing the color of an SVG can only be done if the vector is inline in the html, and doesn't work with an SVG linked in a <img> tag.

    If the SVG is in your markup, you can target it with a CSS selector and change its color with the fill css property:

    For example

    HTML

    <svg></svg>

    CSS

    svg {
    fill: blue;
}
    0
  • Ayobami Ikuewumi•850
    @IkuewumiPosted over 1 year ago

    Hi! Good project, About your question, you can put quotes in strings by prefixing them with the backslash, Like this:

    const str = "\"Be a good lover\""
console.log(str) // "Be a good lover"

    And use interpolation for easier concatenation of strings, like this

    const str = "World"
const str2 = `Hello ${str}`
console.log(str2) // Hello World

    One more thing, please avoid mutating the innerHtml of an element directly if you can,new elements should be added via document.createElement('span') or templates

    Overall, good project. Hope these tips help. Happy coding, Ayobami

    Marked as helpful
    0
View more comments