Skip to content
OverviewSolutions
11
Comments
18
Ayush Nath
@Beats-Ayush

All comments

  • Ayush Nath•360
    @Beats-AyushPosted over 2 years ago

    Nice attempt at this challenge. Some issues-

    • Use flexbox instead of grid for 1-dimensional layouts.
    • Use linear-gradient for the overlay on the image with appropriate filter.
    • Make it responsive by using media-queries.
    • Try to center the card.

    Hope this helps.

    2
  • Gabi•280
    @GaboczSubmitted over 2 years ago

    Hi! I struggled a lot with the CSS of this project. A couple times I felt like giving up. The custom button was definitely a challenge in terms of styling and functionality. Also, initially github couldn't compile the site, so that's why the different commits. I am not sure what went wrong with that... Anyway, I'm proud that I have finished this project.

    Any suggestions for improvement are appreciated!

    Tip Calculator App with CSS and Javascript

    2
    Ayush Nath•360
    @Beats-AyushPosted over 2 years ago

    Nice job completing this challenge. There are some places where you could improve -

    • The hover state isn't persisting on the normal buttons.
    • Also upon selecting the bill and tip percentage, the error for the number of people is automatically coming up even though I haven't touched the input yet.

    You can have a look at my attempt to see what I meant.

    Marked as helpful
    0
  • Jeff•240
    @njorogejeffSubmitted over 2 years ago

    The challenge was exciting as it was a great example of creating card components with CSS. Also, concepts like box shadows, CSS backgrounds, and positioning are learned while designing/building this challenge. Although it was a simple task, it had its fair share of challenges that I would love for you to help me solve.

    The main challenge I encountered was, "How do I center the card in the middle of the page without using CSS Flexbox?" Although I added margin-top to the card to push it down, this method may not be effective in achieving the desired result. As a result, I pose this question.

    1. How do I center the card in the middle of the page?

    The second issue I encountered was, "How do I position the footnote perfectly at the bottom of the page?" Centering the footnote proved challenging as I tried playing with the 'position' property, but I could not center the footnote. In the mobile screen layout, it even overflows below the screen. Therefore my second question is.

    1. How do I position the footnote perfectly at the bottom of the page and in the center?

    QR Code Card Component challenge

    2
    Ayush Nath•360
    @Beats-AyushPosted over 2 years ago
    1. You can center the card by
    • Using margin: 2.5rem auto;. This is shorthand. 2.5rem is the margin-top and margin-bottom.
    • Using absolute positioning.
    position: absolute;
left:50%;
transform: translateX(-50%);
    1. I think the footnote is fine its place. No such biggie. If you don't want it wrapping, give it a min-width.

    Search on stackOverflow and MDN for these queries. They have explanations in great detail.

    Marked as helpful
    1
  • Ayush Nath•360
    @Beats-AyushPosted over 2 years ago

    Great job completing this challenge. JS looks good to me. Some issues with the css-

    • You can use multiple backgrounds with css.
    • You can cut the overlapping box-shadow using clip-path.

    Hope this helps.

    Marked as helpful
    0
  • Minh Nhựt•60
    @minhnhut170701Submitted over 2 years ago

    I have been difficult to set the name for components and pass state to components. Looking forward to your advice so I can improve my skills. Have a good day

    reactjs and tailwindcss

    1
    Ayush Nath•360
    @Beats-AyushPosted over 2 years ago

    Great job completing the challenge. Some issues -

    • border-radius is missing at some places.
    • Use background: no-repeat and background-size: cover to avoid repetition of background-image.
    • Try to make it a bit more responsive using media-queries.
    • JS has some flaws. When I choose some reward and submit my pledge, the modal-overlay comes up again.
    • Pledge with no reward doesn't have a pledge and continue button placed there.
    Marked as helpful
    0
  • kirty•380
    @kirtymeenaSubmitted over 2 years ago

    Hi, I am learning Sass. I would like to have feedback on best practices and on design and code. This will help me learn sass and react.

    Column Preview Card using Sass + React

    2
    Ayush Nath•360
    @Beats-AyushPosted over 2 years ago

    Nice job completing this challenge. Some issues:

    • Background-color of body is missing.
    • The text is the buttons is leaning towards the top. You can fix that by display: flex; align-items: center;.
    0
  • Ayush Nath•360
    @Beats-AyushSubmitted over 2 years ago

    Hardest challenge I faced so far. This really pushed me to the edge. Spent like 3days figuring out to achieve all the active states. Learnt a ton of new things like global state management, modal-overlays, effective component structuring. Would appreciate feedback on any missing JavaScript feature or site responsiveness. Feel free to criticize.

    Crowdfunding Product Page using React, SASS, FlexBox, Grid.

    1
    Ayush Nath•360
    @Beats-AyushPosted over 2 years ago

    Damn like so many HTML Errors.

    0
  • Gareth•410
    @Gareth-MooreSubmitted over 2 years ago

    Hello fellow front enders!

    This project was a bit tedious at the end but the beginning was quite fun. I fine tuned the project with Pixel Perfect Pro (free Firefox extension to overlay the preview image over your site for to-the-pixel fine tuning)

    I have a detailed, and hopefully not verbose, README you may want to read. Otherwise any helpful advice, tips and tricks would be much appreciated!

    Thanks a ton! Gareth

    Stats Preview Page with the technique of limitless patience

    1
    Ayush Nath•360
    @Beats-AyushPosted over 2 years ago

    That's actually a very good extension. Thank you for sharing.

    I just found a slight error which you may want to rectify. It's not significant but still caught my eye.In the mobile layout the border-radius is not being applied to the top-left and top-right corners of your main card. You can enforce that using overflow: hidden. Hope this helps.

    Marked as helpful
    1
  • Ayush Nath•360
    @Beats-AyushPosted over 2 years ago

    Hello nice attempt at this challenge. Some points where there can be improvement -

    • Instead of setting <input type='number' />, maybe use <input type='text' /> or simply remove the spinner arrows to improve the UI.
    • Upon Reset, the custom input is not being cleaned up.
    • Look out for the NaN values which are coming up whenever the custom input gets cleared up and then focused again.
    0
  • Alvaro•70
    @BrazilianMemeMasterSubmitted over 2 years ago

    This is my third challenge and by far the most difficult for me, specially because it involves deeper javascript logic. The CSS part was ok, but not easy like the other challenges I did, the most difficult part of this challenge was definitely the JS part. I tried to use Classes, but it didn't go well, so I just used a bunch of function, and it worked!

    I would like to know if there's a quicker/more effective way of getting the same result, maybe using class? I don't know, my solution looked like I did too much of unnecessary work at some points, but I don't know where.

    Anyway, I had a lot of fun doing this, even tho' I took like 2 days to finish it :^)

    Responsive Tip Calculator

    2
    Ayush Nath•360
    @Beats-AyushPosted over 2 years ago

    Definitely agree that the Javascript was the most difficult part. Some points -

    • Vanilla JS will definitely require a lot of functions.
    • I used React as a means to counter that.
    • Other than that the window is reloading each time you reset. Instead use state to do that for you.
    • Instead of setting <input type='number' />, maybe use <input type='text' /> or simply remove the spinner arrows to improve the UI.
    Marked as helpful
    0
  • Ayush Nath•360
    @Beats-AyushPosted over 2 years ago

    @jrmydix I like the JS here. The only feature which might cause some trouble is the responsiveness. For the tip percentage buttons instead of using flexbox you can use grid which will allow more control over the width and not collapse the buttons into a single column below 374px. Just my humble opinion.

    Marked as helpful
    0
  • Ayush Nath•360
    @Beats-AyushSubmitted over 2 years ago

    Would like some valuable feedback on the responsive-ness of the site and where I can improve.

    Spent a lot of time on the javascript part and added some states for the inputs. Any inputs on how I can improve the javascript will be highly appreciated.

    Also facing a lot of trouble in styling in React. Any resources for learning how to manage that?

    Responsive Tip Calculator using React JS and SASS

    3
    Ayush Nath•360
    @Beats-AyushPosted over 2 years ago

    I don't know how the white space is appearing to the right and the bottom. It looks alright on live site.

    0