Skip to content
OverviewSolutions
19
Comments
34
Ayobami Ikuewumi
@Ikuewumi

All comments

  • Wannika123•650
    @Wannika123Submitted 8 months 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 8 months 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 9 months 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 9 months 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•440
    @saranatour1Submitted 9 months 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

    1
    Ayobami Ikuewumi•850
    @IkuewumiPosted 9 months ago

    👋 Hi Sara.

    Unfortunately, the project isn't on GitHub anymore

    0
  • Ayobami Ikuewumi•850
    @IkuewumiPosted 9 months 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
  • IamVictheCG•190
    @IamVictheCGSubmitted 9 months ago

    Does anyone know to change the color of SVG elements??

    Sunny Side

    1
    Ayobami Ikuewumi•850
    @IkuewumiPosted 9 months 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
  • Poonamkothawade25•30
    @Poonamkothawade25Submitted 12 months ago

    I had difficulty integrating API in my project. I am not very familiar with asynchronous javascript. I was confused as to which method to use to integrate API. Would it be better to use Asynchronous javascript? Also, since the text length is variable, what can I use to make sure that the end double quotes will be appended exactly after end of the sentence?

    Responsive advice generator app using API - fetch method

    1
    Ayobami Ikuewumi•850
    @IkuewumiPosted 12 months 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
  • Ayobami Ikuewumi•850
    @IkuewumiPosted 12 months ago

    Sorry, I didn't see this before, but I noticed you used predefined heights on the cards, it leads to the UK cark breaking, please try to avoid setting heights in general, they're kinda evil, and I think the cards would work even without a set height in this case

    Marked as helpful
    0
  • Ayobami Ikuewumi•850
    @IkuewumiSubmitted 12 months ago

    Hi. It's been quite a while since I posted solutions here. I've been busy with med school, but now with the holidays, I can restart programming.

    So, this project, I did most of it by hand including the routing and state management. I did use a tiny library called nanostores though, to give me stores to work with. It was mostly ok, and I tried being cognizant of a11y.

    I also ended up adding a few features like system theme and a to top button,

    Anyway, if you can, check the project out, and all comments are welcome, even appreciated. Happy Coding,

    Ayobami

    Countries and their Bio

    2
    Ayobami Ikuewumi•850
    @IkuewumiPosted 12 months ago

    Hey guys, one more question, how do you handle loading all the images, I thought it would place way too much strain on the page performance, so I tried lazy-loading them, but some problems came up, How did y'all handle it?

    0
  • Ayobami Ikuewumi•850
    @IkuewumiPosted 12 months ago

    Hi Ivan! Great project, I did notice somethings though:

    • The link on each country exists on only the image. This is maybe just my preference, but I think people might have problems finding that link as they would most likely just check the countries' name first, but this is just my experience, so take it with a grain of salt

    • More worryingly, the search functionality seems to have a bug, where it searches the input as it was before a change(eg. Searching for "a" when the user has typed in "ar"). I checked the code and there you used an onChange event(which should work, but for some reason doesn't), maybe look into the onInput event instead? Seems to work for this exact use case

    Anyhow, this is a good project. Well done and happy coding, Ayobami

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

    Hi Jary👋. Really cool solution. Here are my suggestions on improving this:

    This page generates an error about: Links must have discernible text. In this case the link's content is an icon, and you could fix this issue by adding a title attribute to the <i> element like -

    <a href="#">
  <i title="twitter" class="fa-brands fa-twitter"></i>
</a>

    Also, I saw you didn't add the decorative shape on the hero section. The shape is just a rectangle / square with a curved side. You could add it like so:

    hero {
   position: relative
}

hero::before {
   content: "";
   position: absolute;
   inset: auto 0 0 auto; //shorthand for the top, right, bottom, left properties
   width: 300px;//arbitrary number
   height: 300px; //arbitrary number
   background: blue;
   border-bottom-left-radius: 4vmax;//arbitrary number
}

    Anyways, I hope this helps. Again, this solution is really cool. Don't hesitate to ask more questions and keep coding👍,

    Ayobami

    Marked as helpful
    1
  • Orton Bright•310
    @ortonb110Submitted over 1 year ago

    Hi there 👋, I’m Orton and this is my solution for this challenge.

    Built With:

    TailwindCSS npm - prettier React.js I couldn't get the sidebar to have a dark backdrop and I humbly ask for help. Any suggestions on how I can improve are welcome!

    Thank you. 😊✌️

    Loopstudios landing page

    1
    Ayobami Ikuewumi•850
    @IkuewumiPosted over 1 year ago

    Hi Orton 👋. Great solution. And about your question on the backdrop. I think the best way to achieve this is using a pseudo-element on the header element and giving it a background color of your backdrop so that it is on top of everything, except the text, like say: #00000020.

    I hope this helps. Again, great solution. Keep coding 👍,

    Ayobami

    Marked as helpful
    0
  • Aghla Abdo•340
    @AghlaAbdoSubmitted over 1 year ago

    Hi guys, I just finished Product preview card component challenge.

    One thing I struggled with is how to make the image fit in the div without scratching it. But the only solution I found for that is to make the width and height of the image 100%.

    Tell me guys if there is any other way make the image adjust automatically to fit in the div.

    Product preview card component

    2
    Ayobami Ikuewumi•850
    @IkuewumiPosted over 1 year ago

    Hi 👋. Cool solution. About your question, I think the aforementioned picture element is the best way. But css could somehow end up squishing the image to fit it in the declared dimensions. To fix this issue, you could check out the object-fit css property. You can read more about it on the MDN docs but a basic use would be as follows:

    selector {
    ....
    object-fit: cover;
}

    Anyway, I hope this helps. Feel free to ask any questions, and keep coding 👍,

    Ayobami

    Marked as helpful
    0