@KaustubhMaladkar
@Ayodelearog
Submitted
I couldn't implement the error message on submit. And I couldn't prevent my form from submitting empty fields. I'd appreciate tips on how to make these work. And I'd appreciate comments on my work, and where I can improve. Thank you.
@KaustubhMaladkar
Posted
Hi Ayodelearog,
display property is set to none. Upon submission, you can choose to display to these paragraphs.<input type="text" required>. You should also perform a check in JavaScript, like this form.addEventListener("submit", e => {
if (input.value == "") {
e.preventDefault();
input..classList.add("error") //your error class should include the error styles in CSS
}
}
@quangnphan
Submitted
I need help to fix the counting number for items left part. It works on the desktop span, but I couldn't find a way to make it work for the mob-count. Thank you!!
@KaustubhMaladkar
Posted
Nice solution. If you could get the items left counter to work on desktop why would it not work on the mobile? Don't you use the same function for both of the screen types?
@novice-is-me
Submitted
I'm just a newbie in web development , is my solution correct?
What's the best way to create a responsive website?
Is it really good to create a mobile design first?
@KaustubhMaladkar
Posted
Hello R.J. Welcome to the Frontend Mentor community! Congrats on completing your first project! It looks great. Anyway, I have a few suggestions for you
min-width property would suffice.div with the ID "main". Instead of this, the tag <main> could be used itselfNow, answers to your question
min-width and min-heightsrcset attribute on images
And many, many more. I would suggest you watch this video by Kevin Powell, who, I agree 100%, is a CSS wizard.Marked as helpful
@weldersalvador
Submitted
My first project utilizing JavasCript. If you have any suggestions, please comment ^^
@KaustubhMaladkar
Posted
Hi Weldor, Congrats on utilizing JavaScript in your first project. However, this project did not need JavaScript and could be completed using only HTML and CSS.
body:has(#switch:checked) > #value1-checked {
display: initial;
}
body:has(#switch:checked) > #value1-unchecked {
display: initial;
}
display property. Another approach to this could be by using the content property, but this would make the text inaccessible.
Using JavaScript makes the page load slower, and is also bad for responsiveness.
That said, the :has() pseudo-class does not have widespread browser support.
I would suggest that you use SCSS to achieve the aforementioned, because of the amount of nesting involved.div the ID of "second1". Instead of this, an ID like "basic" would be much better<hr> tag is deprecated. It should never be used. To obtain the styling you wanted, the border-bottom property of CSS was a much a better optionfocus and active state.text-transform: capitalize.Marked as helpful
@JustANipple
Submitted
I couldn't find a way to center the container in the page without having the flexbox overflowing vertically
@KaustubhMaladkar
Posted
Hello, great job on completing the project.
Considering the fact your question about centering has already been answered and marked as helpful, I will not be addressing that here.
Although, I would like to highlight a small way to improve the user experience(UX) of your website. When your buttons are hovered over, consider using a transition of ease-in-out to make the color change appear smoother
Marked as helpful
@VarunRele
Submitted
I couldn't add form validation other than default HTML validation. This project took me soo long to get done. It may have some bugs in it. I am still proud of it.
@KaustubhMaladkar
Posted
Hi, great job on completing the project. Don't worry about the bugs, you can always improve the project as you advance your skills.
If I have understood correctly, you mentioned that you were only able to add HTML form validation. There can be quite a bit of problems with this, the most prominent one being cybersecurity. Even though both HTML and JavaScript validation can be easily bypassed, bypassing HTML can turn out to be a piece of cake for anyone skilled even a little bit in web development. Hacking JavaScript is a little bit harder and takes little more time. Note that even after you apply both HTML and JavaScript validation, server side validation is still crucial. The main goal of client side validation is not security, but user experience (UX), as like previously mentioned, it is easy to bypass. Server-side validation remains extremely important as a corrupted file can be submitted to your server which poses the threat of corrupting your entire server The best way to perform JavaScript validation is through using RegEx or Regular Expressions. An example is provided below for an email field
function ValidateEmail(mail)
{
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myForm.emailAddr.value))
{
return (true)
}
alert("You have entered an invalid email address!")
return (false)
}
RegEx is a bit difficult to understand, but you will get the hang of it with enough practice. I found this video really helpful for understanding RegEx
I hope you found this helpful
@mohamedhyssm
Submitted
It was a great challenge in which I used some of the techniques that I needed to practice, such as flex, grid and hover, and I practiced using ts
@KaustubhMaladkar
Posted
Hi, I am not able to view your live site. There may be some problem with the link you entered. Kindly check and fix to acquire feedback from the community
@scoltelli27
Submitted
I used just html for the form validation since its already integrated. I didn't see any particular benefit on doing it through javascript, maybe someone can clarify that for me? What's the point on validating through js if it can be done with html and the browser?
@KaustubhMaladkar
Posted
Hi. JS is used for form validation because of the flexibility and customisations it provides. But, the most important reason is cyber security. HTML code can easily be changed by just changing the code using the inspector. This is not true for javascript. Sending corrupted files to the server can be extremely dangerous. Hope you found this helpful!
@Trianon27
Submitted
Hello, this work was great for me. I learn how to familiarize myself with js but if you have some comments on how I can improve my skills. I will really appreciate it. Thanks.
@KaustubhMaladkar
Posted
Hello, nice solution you built. One suggestion: Instead of putting the inputs in a div, you could have given a display of block.
Marked as helpful
@revin212
Submitted
I'm open to any feedback!
@KaustubhMaladkar
Posted
Hi, nice solution you have got there. I just have one suggestion: when you hover over the shuffle button there is supposed to be a glow around it which spreads. You can use the box-shadow CSS property for this.
You can also checkout ]my solution](https://www.frontendmentor.io/solutions/advice-generator-using-advice-slip-api-JM-FRmxeC6) if you want
@ralindugeeman002
Submitted
I had to take sometime to divide the columns and rows. Also have a question about how accurately have i divide those columns.
@KaustubhMaladkar
Posted
Hi, congratulations on completing your first Frontend Mentor challenge. Great efforts!! I have a few suggestions for you
srcset attribute this timealt attribute to images. The alt attribute helps specify alternative text for an image. Example: <img src="myimage.jpg" alt="An image of me">You can take a look at my solution for a better understanding
Marked as helpful
@Akash13112003
Submitted
@KaustubhMaladkar
Posted
Nice work! I just have some suggestions on how this could be done better-
Accessibility issues (Check your accessibility report for more information):
Code structure:
Don't be discouraged you did a pretty fine job! You can checkout my solution at: https://github.com/KaustubhMaladkar/Tip-Calculator
Marked as helpful
