I'd like to know how I could have optimized this better I can definitely tell you now that I cut some corners!
Also, how could I use media quires to help make this responsive? I felt like I would have had to rewrite or restructure my code to make it work.
Any feedback is welcome, thank you!
A media query is a CSS technique used to apply different styles to a webpage based on the characteristics of the device or screen it is being viewed on. This allows developers to create responsive web design that adapts to the size, resolution, and orientation of the user's device, ensuring that the page looks and functions optimally on any screen. Media queries are defined using the @media rule in CSS. They consist of a media type (such as screen, print, or handheld), followed by one or more media features that describe the characteristics of the device, such as its width, height, orientation, resolution, and color. You can find about it more here : https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
and use ''alt'' attribute in img tag. It is an important attribute because it serves as a fallback option in case the image cannot be displayed. The text provided in the alt attribute is also useful for people using screen readers or with images disabled in their web browser. Keep Building Projects 👍
Still unsure of best practices when styling input validity. As of now it works but I had a few uncertainties:
The function name checkValidInput is clear and descriptive, which makes it easy to understand its purpose. The use of querySelectorAll and forEach to iterate over each input is efficient and concise. The use of addEventListener to detect input events and invalid events is a good approach to handle user input. The use of CSS classes to visually indicate the validity of the input and to show the warning message is a good practice to separate the concerns of styling and functionality. The code is properly commented, which helps to understand the intention of each section of the code. Overall, the code looks well-structured and easy to read. It uses best practices for handling form input validation, and the code is well-commented. Good job! 👍
It's not responsive for mobile yet, I'm still learning how can I do this.
Fell free to give me some tips
use @media query. A media query is a CSS technique used to apply different styles to a webpage based on the characteristics of the device or screen it is being viewed on. This allows developers to create responsive web design that adapts to the size, resolution, and orientation of the user's device, ensuring that the page looks and functions optimally on any screen. Media queries are defined using the @media rule in CSS. They consist of a media type (such as screen, print, or handheld), followed by one or more media features that describe the characteristics of the device, such as its width, height, orientation, resolution, and color. You can find about it more here : https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
