Skip to content
OverviewSolutions
2
Comments
3
Abdul Qadeer
@abdulqad33r

All comments

  • Abdul Qadeer•50
    @abdulqad33rPosted over 1 year ago

    What I did was I map over the array and first matched the ID with the main comment, if ID matched, I added the reply in it's reply array, if ID is not found in the main comments then I check the ID in the replies array, if ID is found in the replies array then I just add that new element in that replies array. With matching ID I can also check whom the user is replying to.

    0
  • Arne•1,110
    @DudeldupsSubmitted over 1 year ago

    This took longer than expected 😅

    Issues I faced:

    • Mobile: This was the easiest part, only struggled a bit to get the opacity on the background. Finally got it working with a ::before and putting a background-image on that element, but I'm not sure if this is the way to go.

    • Tablet: The first issue came up to position the blue box's bottom line with the image. I went with a max-height on the .background container (setting it to the image's height). Since the design shows the dotted decorative image on the bottom of the screen, I put it as a bg-image on the body's bottom line.

    • Desktop: With one more media query, I positioned the content in the center and gave it a min-height (again, same value as the desktop-image's height). To get the blue text box aligned with the image's bottom line again, I used flexbox on the container with justify-content: space-between.

    I added clamp()s to have maximum responsiveness 🤠

    I got the Javascript part done without having to look up stuff 🥳

    Let me know what you think or if you see any errors 🙂

    [SCSS] Pod landing page

    1
    Abdul Qadeer•50
    @abdulqad33rPosted over 1 year ago

    It's great. But you should definitely remove horizontal scrolling. And I think there is no need for the vertical scrolling too as this can definitely fit in the height of 100vh.

    1
  • sophie.•150
    @sophie-mc-devSubmitted over 1 year ago

    This is my solution for the Advice Generator App challenge

    • Was able to practice using an API and getting familiar with fetch() functions again!
    • Hoping to continue improving my JS skills and responsive layout.

    I'm happy to hear any feedback and advice to help me improve!

    Advice generator app using the Advice Slip API

    1
    Abdul Qadeer•50
    @abdulqad33rPosted over 1 year ago

    You did a great job building this card. But little tips..... If you want the card's bottom at the center of the button, you should do this:

    button {
--height: 4rem;
width: 4rem;
height: var(--height);
bottom: calc(var(--height) / -2);
/* Your remaining code */
}

    Now when you change button's height, it's bottom will be automatically calculated and put the button at the center. Tip: Since you are using the same width and height because button is circle, do this:

    button {
--size: 4rem;
width: var(--size);
aspect-ratio: 1;
bottom: calc(var(--size) / -2);
/* Your remaining code */
}

    Now, when you change your --size, your height and bottom will be calculated, and you don't have to make any changes to them....

    Also decrease some padding of the card and button size in small screen sizes, maybe screens that are less than 300px, @media (width < 300px) { }

    0