Any feedback is appreciated 😁
I added "autocomplete="email" autofocus" to my input field and I am not sure if this is bad practice, both for security reasons and for accessibility.
Secondly, whenever you type in an invalid email and try to submit, the button state gets "stuck" as active or focused, and I dont know how to prevent this.
I'm proud that used fetch() and async await.
It was challenging to make possible selecting a timeframe and displaying the appropriate information.
What specific areas of your project would you like help with?I'm up to any suggestions.
Great job on your submission!
I have one suggestion for a minor issue. When you look at your report card your bottom raduises have a very thin line from the parent div. To get rid of this just increase the bottom radius on the ".report__card__back" they will go away.
would use more modern technologies
What challenges did you encounter, and how did you overcome them?lack of a layout, everything had to be done similar, but not exactly
What specific areas of your project would you like help with?not in any
Good job on completing the challenge 😁🎉
I have a suggestion and a recommendation for you!
a tag with an href since the user is not going to email themselves.<p class="popup-description"> A confirmation email has been sent to
<a type="email" href="mailto:ash@loremcompany.com">ash@loremcompany.com.
</a> Please open it and click the button inside to confirm your subscription.
</p>
Could be something like this:
// index.js
const formInput = document.querySelector('.form-input');
const userEmail = document.querySelector('#user-email');
function validateForm() {
// If input passes validation, set userEmail to the value of formInput
userEmail.innerHTML = formInput.value;
...
}
// index.html
<p class="popup-description"> A confirmation email has been sent to
<span id="user-email"></span>. Please open it and click the button inside to
confirm your subscription.
</p>
Here is my submission, and my GitHub repo if you feel like comparing code.
Still, I am not able to create share details perfectly
Good work completing this challenge! 😁
The reason you are having trouble with your social media sharing menu is because you have nested it inside the wrapper for the author information.
This is your code.
// Author information wrapper
<div class="profileBox">
<div id="profileImg">...</div>
<div id="profileContent">...</div>
<div id="shareIcon">...</div>
// Social media sharing menu
<div class="notification">
<span>SHARE</span>
<img src="./images/icon-facebook.svg"/>
<img src="./images/icon-twitter.svg" alt="">
<img src="./images/icon-pinterest.svg"/>
</div>
</div>
What I suggest you do instead is to move the "notification" div outside of the "profileBox" div, directly below it and use CSS position attribute to properly place the element.
Like this.
// Author information wrapper
<div class="profileBox">
<div id="profileImg">...</div>
<div id="profileContent">...</div>
<div id="shareIcon">...</div>
</div>
// Social media sharing menu
<div class="notification">...</div>
Here is my submission, and my GitHub repo if you feel like comparing code.
nothing really
What challenges did you encounter, and how did you overcome them?none that i could think off
What specific areas of your project would you like help with?is there a better way for me to have done the semantic html
is it responsive enough for mobile, if not what changes can i make
Great job completing this challenge! 😁🙌
Suggested to me by @danielmrx-dev using the <picture> tag can help loading the correct image based on screen size, which is better for bandwidth and performance.
This is your code.
<div class="container">
<img src="./images/image-product-desktop.jpg" alt="" class="img |" />
.....
</div>
Here is suggestion on how to apply it.
<div class="container">
<picture class="product-image">
<source media="(min-width: 632px)" srcset="./images/image-product-desktop.jpg">
<img src="./images/image-product-mobile.jpg" alt="perfume bottle among green leaves">
</picture>
.....
</div>
Here is my submission, and my GitHub repo if you feel like comparing code.
doing good
What challenges did you encounter, and how did you overcome them?location of items
What specific areas of your project would you like help with?with grid
Great job completing this challenge! 😁🙌
I like your implementation of named grid areas👍I might refactor my CSS to do the same as it's very readable and maintainable.
There is no reason to statically set the height of each grid item because you are setting the position and span of each item in the grid. Removing the height property on the grid items will make your page look more like the design.
The reason Patrick doesn't align properly on medium screen size, and why the testimonials aren't matching the design, is because you mistakenly made too many columns for both medium and large screen sizes.
This is your code.
@media (min-width: 481px) {
.container {
grid-template-areas:
"daniel daniel jonathan kira"
"jeanette patrick patrick kira";
}
}
@media (min-width: 1440px) {
.container {
grid-template-areas:
"daniel daniel daniel jonathan kira"
"jeanette patrick patrick patrick kira";
}
}
Here is a suggestion on how to fix it.
@media (min-width: 481px) {
.container {
grid-template-areas:
"daniel jonathan kira"
"jeanette patrick kira";
}
}
@media (min-width: 1440px) {
.container {
grid-template-areas:
"daniel daniel jonathan kira"
"jeanette patrick patrick kira";
}
}
Here is my submission, and my GitHub repo if you feel like comparing code.