Skip to content
OverviewSolutions
18
Comments
25

Macdeesh

@macdeeshBali610 points

Hello World 🌍 I'm Front-end Junior web developer, here to learn and build connections..

I’m currently learning...

Javascript

Latest solutions

View more solutions

Latest comments

  • Macdeesh•610
    @macdeesh

    Hi Elaine, this looks really nice ! Very good work !! Bravo !!

    In case the amount of the bill is a big number like more than 7 zeros, the result of the calculation in Tip amount/person and total/person is too long and take place over the calculator, to fix this add an overflow-x: scroll on the amount fields.

    You forget to make the error message when the number of people is not added or 0. Or maybe it's by choice ?

    Marked as helpful
  • Macdeesh•610
    @macdeesh

    Hello Kevin, For the header-image, it looks oversized. Try max-width: 100%.

    Marked as helpful
  • Macdeesh•610
    @macdeesh

    Helloo Briuwu,

    Your work looks pretty good !! Well done !! I had a look at your code just to answer to your question about the HTML issues. I'm sure that you know that the id is unique, and we can't use more than one id name's in our HTML. Maybe you couldn't localize the error because the project is bootstrapped with Create React App. The linear gradient is used with the Instagram SVG 3 times with the same id, so you need to change or delete the id of 2 of those 3 SVGs. How I don't know but I found one of the id here :

    <div class="social-each Light Instagram">
  <div class="social-title">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
       <defs>
         <linearGradient id="a" x1="100%" x2="0%" y1="0%" y2="100%">

    I think fixing it is a bit tricky, as I don't have enough knowledge in JS, I can't help you more, but if you want to fix the issue have a look at this repo : https://github.com/exogen/babel-plugin-inline-react-svg/pull/1 Or this one : https://github.com/airbnb/babel-plugin-inline-react-svg/issues/57

    Marked as helpful
  • Macdeesh•610
    @macdeesh

    Hello Obaida, That looks pretty good ! Well done ! Have a look at the report above, it shows a few issues that you can fix. I also have some suggestions for you :

    • I would recommend using pseudo-element ::before and ::after to put the Custom shape dividers inside the CSS. That way, you can remove the decorative elements from the HTML structure.

    • Add obvious focus visible styles to every interactive element. This should be obvious and differ from the hover style, it helps keyboard users know where they are on the page.

    • For the email input, it should be <input type="email" id="email" name="email">, and before that you should add a label : <label for="email">.

    • Don't forget to write a good alt text to your image. Try to not use words like image or hyphenated phrases as if it's code, it is a human-readable description.

    Marked as helpful
  • Macdeesh•610
    @macdeesh

    Hey Obaida, Thank you for your advice, I already saw it in the report as an accessibility issue and to be honest it was intentional to use h2 instead of h1, because normally this card component should exist as a div inside a body of a full web project, and it has no meaning to use a level-one heading in a profile card. Anyway, thank you again, and I hope we keep in touch with constructive feedbacks for our next projects. Happy coding.

  • Macdeesh•610
    @macdeesh

    Hello lilKriT, Just to answer to your question, maybe you can add ".." before the URL of the background image :

    background-image: url("../img/icon-supervisor.svg"); Instead of background-image: url("/img/icon-supervisor.svg");

    In your place, I will also use the pseudo-element ::after with the specific class and add : content: url("../img/icon-supervisor.svg");

    Marked as helpful
View more comments