This was actually a lot of fun, and I learned a lot from this project. I learned that...
gap property is.If anyone is reading this, I would like to have some assistance on one thing from this project.
Going to keep updating this calculator, there are a few bugs. Any feedback would be greatly appreciated.
Wow. This one was a real challenge. I had to constantly look up a lot of things especially on the JS part.
Any feedback is always appreciated.
I learned:
Another challenge pushing me to learn more. This was really fun, and I can't wait to go on to the next one!
I struggled a lot with trying to make the page as responsive as possible. Again, the discovery of clamp() has helped me a lot with this, and it is SO useful.
This challenge was surprisingly difficult to me. It took me two days to complete. I also had to take a few breaks during the 48 hours because certain things weren't going the right way for me.
This video by Kevin Powell helped me tremendously with responsiveness.
The video taught me about:
I absolutely love frontendmentor for another challenge that pushes me to teach myself and learn new skills.
Professionally and personally I use the clamp() function for truly responsive typography. This will genuinely take your responsive game up to a professional level.
Check out this video: https://youtu.be/U9VF-4euyRo
Nice job on the submission! Unfortunately the preview image isn't appearing on here, but I looked at your live site and it looks great.
I noticed you were centering the div twice with your body and container. Your body could have been your container in this case, and the container could have been your items. In my opinion it was not necessary to do that.
I would also recommend when you're centering a div to use min-height: 100vh instead of height: 100vh to make responsiveness easier in future projects. Setting a fixed height like that may bring some issues in bigger projects. I would also stray away from setting a fixed width like 100vw, as well, for parent elements. The set width also applies to containers, or cards as well. I would set a max-width instead, which is more responsive friendly, and you can also reassign the dimensions in a media query when the screen gets bigger/smaller.
As you do bigger projects on here, you should also start giving your elements more "meaningful" names. Always think about someone else reviewing your work, and wondering if they would be able to understand what each line is referring to. If it was a bigger project, I would have no idea what p1 and p2 is referencing. Start using naming conventions like BEM early, and maybe start putting comments in your code as well, which will definitely help people in this community when they review your code.
I hope this helped!
Hey! Great submission!!
Instead of having share__options as a child element of your share__section, I would have it as a child element of your main content. That way your position absolute would be within that container, making it easier for you have the same position.
I hope this helps!
Hey! Great submission.
I was wondering why you built the page entirely using flexbox. Did you want to practice flexbox? Are you more comfortable with flexbox? I feel like you could have a lot less lines of HTML and CSS if you use grid.
font-family as well.Regardless, the design looks great, and you did a great job making it responsive!
I forgot to add on... for your JavaScript,
instead of changing the innerHTML, I would create a class that reveals the error text like,
.show-error with display properties,
and add the show-error class to the element with .classList.add('show-error')
changing the innerHTML is not the most correct way to do it, as well as setting the opacity to 1 and 0 does not hide it for people with screen readers so they will still get an error message regardless of if you can see it on the screen or not.
You can take a look at my code here as well.
