@MichalTrubini
Submitted
@MichalTrubini
@MichalTrubini
Submitted
@MichalTrubini
Posted
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
@paulaxisabel
Submitted
Hello everyone ! 👋
Here is my solution for this challenge. Let me know your thoughts and feedbacks on this. Thanks!
@MichalTrubini
Posted
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
@MichalTrubini
Submitted
@MichalTrubini
Posted
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
@MichalTrubini
Submitted
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...
@MichalTrubini
Posted
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.
@MichalTrubini
Submitted
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
@MichalTrubini
Posted
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
@Rohitgour03
Submitted
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. 🙏
@MichalTrubini
Posted
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
@Rohitgour03
Submitted
Here is my solution to this Challenge, Please have a look. Your little suggestion or tip can help me improve as a newbie in the front-end.
@MichalTrubini
Posted
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
@MichalTrubini
Submitted
@MichalTrubini
Posted
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".
;-)
@MichalTrubini
Submitted
@MichalTrubini
Posted
Hey Mike,
Thanks for the suggestion! Animation is now there.
@MichalTrubini
Submitted
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.
@MichalTrubini
Posted
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!
@MichalTrubini
Submitted
@MichalTrubini
Posted
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...
@MichalTrubini
Submitted
@MichalTrubini
Posted
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