@rehberbey
@TaskinSultana
Submitted
As I'm new to javavscript....I don't know how to make form validation using javascript....so I have used <form> tag required attribute make this sign-in form....Give me some suggestions about how to do form validation using javascript...Though I didn't face any problem , but if I had made made any mistake feel free to point it out....and I'd be grateful if you can give me some feedbacks to improve 🙏
@rehberbey
Posted
Looks great! 🎀
With HTML, you can already validate the form on the client side. You can use attributes like pattern and accept. I suggest you look at input attributes.
You can use the :invalid pseudo-class to change the style of the element when the wrong input is entered.
After that, it will be to submit the form to the server.
If you still want to authenticate with javascript on the client side, you can read this. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#client-side_validation
<form action="" method="post">
<label for="name">Name:</label>
<input type="text" name="name" id="name" required pattern="[a-zA-Z]+" placeholder="John" />
<input type="submit" />
</form>
input:invalid {
border: 2px solid red;
}
@yangxdev
Submitted
[ Problem solved ] -> [ Hi, I'm not done yet with the challenge because I got myself in a very troubling situation which I just can't find a solution for it: The cart-card always appears behind the h1 title of the sneakers or behind the horizontal line (hr) below the top-banner; I tried "skipping" the hr issue by just moving the cart-card away from the hr line, but still no idea how to solve the former issue. Searching on google/stackoverflow gives me just a bunch of threads (like "inner div before outer div"), I tried applying some of their solutions but still no progress.
Is the HTML code structure fine? Can a solution be achieved by not changing it in its entirety, i.e. by working only on CSS (or JS)? Thanks a lot! I hope to get over this annoying problem soon. I'll be working on the other parts of the website in the meanwhile. ]
@rehberbey
Posted
Hey man, nice work, but there are a few glaring things.
div.cart-card, it's currently transparent.<div class="btn top-btn top-cart" onclick="cart()">...</div> is not working.div.attribution. Because they overlap.
position: absolute;
bottom: 15px;
I like your work, I hope you will consider what I have said. 🎆
Marked as helpful
@mapodesta
Submitted
The most difficult challenge in this exercise was the responsive.
Maybe , I will try to improve the css (classnames or how to structure the css)
So this is my question, how improve the css in this exercise or how we can change to improve this
Kind Regards
@rehberbey
Posted
By the way, I'm a new developer too. It is not my intention to embarrass you. I just commented on your request as the end user. There is something for everyone to learn here.
If you want to take a look at my work, I leave a link here. 😛 https://rehberbey.github.io/Frontend-Mentor-Challenges/
@Prakhar-99
Submitted
how i make svg img fit in my content at all screen size
@rehberbey
Posted
I checked your codes and I noticed that you have backgrounded something using svg in html. This is bad practice, both from an accessibility standpoint and from a caching standpoint. My advice to you is to use the background property. Other than that, I found your work pretty good. Congratulations. 🎊
Marked as helpful
@L1n456
Submitted
@rehberbey
Posted
If I were you, I'd look into what responsive design is. 😐
@NickTalvy
Submitted
I found it difficult to get my padding correct for the text. Also, I attempted MQ for tablet and desktop. I feel like I made it harder or more complicated then it needed to be.
I tried to keep accessibility in mind. Please tell me what I could do better, or any best practices I missed.
@rehberbey
Posted
Hello, I like your work. But when playing with my screen width, your typography is not correct (check 590px) and your image may shrink as the screen width grows. Also, I recommend removing the query "(max-width: 1900px)" from media queries.
It would be much better if you fix them. ✨
Marked as helpful
