Skip to content
OverviewSolutions
59
Comments
15
MichalTrubini
@MichalTrubini

All comments

  • MichalTrubini•1,220
    @MichalTrubiniPosted about 2 years ago

    Hi everyone,

    Could someone please advise me regarding error "Attribute loading not allowed on element img at this point."?

    Is this because the validator is not yet configured to include lazy loading as proper syntax for img tag?

    Cheers

    0
  • Paula Isabel•230
    @paulaxisabelSubmitted over 2 years ago

    Hello everyone ! 👋

    Here is my solution for this challenge. Let me know your thoughts and feedbacks on this. Thanks!

    Calculator App

    1
    MichalTrubini•1,220
    @MichalTrubiniPosted over 2 years ago

    Hi Paula,

    When it comes to functionality, there is a small bug: it is possible to input multiple decimal points.

    I like the transition effect between switching themes. I should include one myself. :-)

    Michal

    0
  • MichalTrubini•1,220
    @MichalTrubiniPosted over 2 years ago

    Hello there,

    Any ideas why the accessibility report says there is an error "Form elements must have labels"? I actually included a label for the input (set it to hidden though).

    Thanks

    0
  • MichalTrubini•1,220
    @MichalTrubiniSubmitted almost 3 years ago

    I managed to use only css/html for this challenge but a cost of an html error. That means, this is not a clean solution. Nevertheless, it works...

    css/html only, no js, BEM, SASS

    2
    MichalTrubini•1,220
    @MichalTrubiniPosted almost 3 years ago

    Thank you Sachin for the feedback. This has been fixed. I will re-generate the screenshot once it is possible because at the moment I am getting message about internal server error when attempting to re-generate.

    0
  • MichalTrubini•1,220
    @MichalTrubiniSubmitted almost 3 years ago

    Hello,

    Could someone advise me why there is an empty space between the hero image and the section below it?

    The wrapping element of the image (picture tag) has a slightly larger height than the image it contains but I don't understand why.

    Thanks

    vanilla js, flexbox, BEM, SASS

    2
    MichalTrubini•1,220
    @MichalTrubiniPosted almost 3 years ago

    Hello there,

    Thanks for the feedback. I don't know what's wrong but when I click on "Preview site", the layout looks the way it should (as per the design figma file). However, the screenshot of the site (generated above these comments) shows the hero image on the left with "Humanizing your insurance" missing. Because the layout is correct when you go to the actual site, right: 12% should not be necessary. Or maybe I misunderstood you?

    What I forgot to mention when writing my original post is that the gap between hero image and the section that follows is visible on mobile devices.

    Michal

    0
  • Rohit•330
    @Rohitgour03Submitted almost 3 years ago

    Here is my solution for this challenge. Please have a look and feel free to give your valuable suggestions and feedback, so that I can improve my development skills as a beginner. Your feedback will be highly appreciated. Thanks in Advance. 🙏

    Huddle landing page with curved section using pure CSS.

    1
    MichalTrubini•1,220
    @MichalTrubiniPosted almost 3 years ago

    Hi Rohit,

    According to the reporting tool, there are some accessibility and HTML issues. Not sure if you know, but prior to submitting the solution you can check for HTML issues using an HTML validator:

    https://validator.w3.org/

    Furthermore, I noticed that your input email field allows submitting when nothing was entered by the user. You can fix this by specifying "required" e.g.

    <input type="email" id ="email" required>

    As per design specs, there should be also an error message displayed on error. This can be added using javascript (I don't think pure CSS can do that job even though the author of the challenge claims only HTML & CSS should be used?).

    Regards,

    Michal

    Marked as helpful
    1
  • MichalTrubini•1,220
    @MichalTrubiniPosted almost 3 years ago

    Hello there,

    I suggest using this tool to change color of svg files. It works perfectly.

    https://codepen.io/sosuke/pen/Pjoqqp

    Marked as helpful
    1
  • MichalTrubini•1,220
    @MichalTrubiniPosted almost 3 years ago

    Hi David,

    Instead of switching between "display:none/display:block", I set the opacity to 0 by default. When a user clicks on the button, the opacity is set to 1 with "transition: opacity 0.5s".

    ;-)

    0
  • MichalTrubini•1,220
    @MichalTrubiniPosted almost 3 years ago

    Hey Mike,

    Thanks for the suggestion! Animation is now there.

    0
  • MichalTrubini•1,220
    @MichalTrubiniSubmitted almost 3 years ago

    Hi there,

    I have used plain javascript, as jQuery is kinda cheating (easy way out). :-)

    I was also thinking about adding a sliding animation when a question is clicked on, however, the height of the answer div is not the same in all the instances, so I am not sure how to animate it. The solutions I found online required to use a specific height in px.

    Thanks for the feedback.

    plain js, SASS, BEM notation

    2
    MichalTrubini•1,220
    @MichalTrubiniPosted almost 3 years ago

    Hi Byron,

    This was a great suggestion. The answer was so simple: instead of height, use max-height!

    I had to add "line-height: 0" to the answer__body class and "line-height:1.8rem" to answer-visible for it to work. Also, added padding to animation so that there was no stutter.

    There is one small bug still which I need to figure out: slide-down is animated, but slide-up is not, even though I added the transition attribute to answer__body.

    Cheers!

    0
  • MichalTrubini•1,220
    @MichalTrubiniPosted about 3 years ago

    For some reason the stats do not update when value submitted. This worked in one of my previous versions of code. Need to check and re-submit...

    0
  • MichalTrubini•1,220
    @MichalTrubiniPosted about 3 years ago

    Hi everyone,

    Could I get feedback on using localStorage for this task? I have used it but is it a best practice? I mean, is it not resource-heavy or overkill to save the input from the user in such a way?

    Thanks

    0