@fargada2356Submitted about 1 month ago
Latest solutions
Conference ticket generator using React, html2canvas and Github API
#accessibility#bem#fetch#react#viteSubmitted 2 months agoI would like to receive advice about JavaScript code and what I can do to improve it.
Product list with cart using React and Motion
#accessibility#framer-motion#bemSubmitted 5 months agoShould I use the Context API or some library to handle the state?
What is the best way to download components after others are downloaded/rendered? (I use states like loadCart, productsFetched... etc.)
Would like to receive feedback about the way I use the lazy loading technique and how to organize the components.
If you find any bugs in the challenge, please let me know and I'll fix them!
Advice Generator App, This is my first time working with an API.
#accessibility#bem#pure-cssSubmitted 11 months agoAny feedback will be appreciated! I'd like to know if the way I got the data from the API is correct or how could improve it.
Contact Form using basic HTML, CSS, JS and ValidityState Web API.
#accessibility#bemSubmitted 11 months agoI would appreciate help with input validations, should I use validityState or should I use regular expressions and other types of validations?
Latest comments
- @Grego14Posted about 1 month ago
Hello!
The image doesn't load because you don't have the
assets/imagesfolder in your GitHub repo.You must upload the image to the GitHub repository and update the links.
I recommend using GitHub Pages or Netlify to host the website and thus avoid tiiny.site adding that footer.
Marked as helpful1 - P@amancalledkiddSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
I am most proud of using the picture element to responsively change the image depending on page size. This was the first time I have used it, it seems a more efficent way of dealing with responsive pages that require multiple images.
<picture> <source srcset="./images/image-product-desktop.jpg" media="(min-width:610px)" /> <source srcset="./images/image-product-mobile.jpg" /> <img src="./images/image-product-mobile.jpg" alt="Product image" /> </picture>Next time I will give better class names to my code.
What challenges did you encounter, and how did you overcome them?I found getting the images to fit the container to be the most difficult. Eventually I found object-fit which helped solved the issue. Will need to look more into styling images in the future
What specific areas of your project would you like help with?Did I use the picture element correctly?
Also is the scss structure correct?
Any suggestions on improving code?
@Grego14Posted about 2 months agoHello! Congratulations on completing the challenge. 🎉
You made a correct use of the picture element and I wanted to tell you that it is not necessary to place the
<source>of the image that you place as fallback because if no<source>complies with the media-query the fallback will be used.This example will do the same as yours:
<picture> <source srcset="./images/image-product-desktop.jpg" media="(min-width:610px)" /> <img src="./images/image-product-mobile.jpg" alt="Product image" /> </picture>To remove the space created below the image you can use vertical-align: middle; on the
<img>element.I suggest you use min-height: 100vh; Instead of height: 100vh; since on mobile devices the content is cut off, and it's impossible to see the full button.
I hope this helps! 😁
Marked as helpful0 - @AhmedHamada12354Submitted about 2 months ago@Grego14Posted about 2 months ago
Hello! Congratulations on completing the challenge. 🎉
I saw that you are using
<br>tags to create line breaks, that is considered a bad practice, and you should use CSS to do what you want to achieve there.I realized you're adding a not class, and you don't use it at all.
It's hard to see the results on mobile devices, I think you should decrease the size of the elements or try the mobile first approach.
Hide non-semantic images or icons from screen readers using the aria-hidden attribute with the true value.
I hope this helps! 😁
0 - @Abdelrahman-AlmansorySubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
First time looping through classes using getQuerySelectorAll, its still difficult but i managed to pull it. I like the end result and waiting for feedback.
What challenges did you encounter, and how did you overcome them?removing minus class for buttons of a section when another sections open
@Grego14Posted about 2 months agoHello! Congratulations on completing the challenge. 🎉
I recommend using buttons instead of a
<div>for the icon elements and clicking on the text next to the icon also expands the accordion, as this would improve the user experience.I see that you're using multiple loops to do things that one would do. You can add an ID to the parent element of all accordions, the accordions-section, then get that element using:
const accordionParent = document.getElementById('accordion-parent-id')Doing this would no longer require the icons or the text, as you could easily obtain it using the accordionParent variable. And you can use the event delegation technique to improve your code:
accordionParent.addEventListener('click', (event) => { const target = event.target // if the clicked element is not an icon or a accordion text do nothing if(!target.classList.contains('icon') || !target.classList.contains('accordion-header')) return })To avoid using a loop and removing the minus class from each element, you can simply get the current element that contains the class, remove it, and add it to the currently clicked element:
// inside the accordionParent click event after the **if** // get last open accordion and accordion text const lastOpenAccordion = accordionParent.querySelector('.accordion:has(.minus)') const lastOpenAccordionText = lastOpenAccordion.querySelector('.accordion-content') // get next open accordion and accordion text const clickedAccordion = target.closest('.accordion') const clickedAccordionText = clickedAccordion.querySelector('.accordion-content') lastOpenAccordion.classList.remove('minus') lastOpenAccordionText.classList.remove('open') clickedAccordion.classList.add('minus') clickedAccordionText.classList.add('open') // Handle adding and removing heights ...The closest method will look up for any first parent element that matches that selector.
When an image is an icon or non-semantic, hide it from screen readers using the aria-hidden attribute with the value true, also remember to add width and height attributes in images to prevent CLS.
<img src="assets/images/icon-star.svg" alt="star SVG" aria-hidden="true" width="40" height="40">I hope this helps! 😁
0 - @lutfiismail52Submitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
I want to try using the HTML <picture> tag to display different images for different screen widths.
What specific areas of your project would you like help with?Is my approach of displaying different images for different screen sizes by using two different image elements and then setting which one to display for a given screen width correct? Or is there a better and more efficient way. Here is the code:
<div class="container"> <img class="image1" src="images/image-product-mobile.jpg" alt="a parfume" /> <img class="image2" src="images/image-product-desktop.jpg" alt="a parfume" /> <div class="wrapper"> </div> </div>@media screen and (min-width: 768px) { .image1 { display: none; } .image2 { display: block; width: 50%; border-top-left-radius: 8px; border-bottom-left-radius: 8px; } }Thank you very much for your answer and explanation. I really appreciate your time and effort in helping me! 😊
@Grego14Posted about 2 months agoHello! Congratulations on completing the challenge! 🎉
You are using the image image-product-desktop two times!
Example of use of the picture element:
<picture> <source srcset='images/image-product-desktop.jpg' media='(min-width: 768px)'/> <img src='THE-MOBILE-IMAGE-URL' width='300' height='300' alt='a Gabrielle chanel perfume'/> </picture>If the viewport width is 768px or more, it will use the image-product-desktop.
Do not jump headings! You should use the
<h1>first instead of the<h2>!When an image is decorative or non-semantic, I recommend hiding it for screen readers using the aria-hidden attribute with the value true. An example of use could be in the add to cart button icon.
I hope this helps! 😁
Marked as helpful0 - @percydocomoSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
Using CSS to achieve the active/focus and hover states of the project. The :has() pseudo-class is used to target elements with a more specific condition (e.g. input[type="radio"]:focus ). With the use of :has() pseudo-class, I could apply all the different style changes in this project with only CSS. If I use JavaScript to change the style, it may override the original styles initially applied so I wished not to use JavaScript to change the styles to begin with and I'm happy that it is possible.
What challenges did you encounter, and how did you overcome them?Targeting elements with very specific conditions as mentioned above. Using the :has() pseudo-class helped solved the problem. This project helps me getting familiar with this selector and the usage of it.
I had problem to have the success message and contact form page stay after submit. It seems to work after applying onsubmit="return false" in the html file, hope this is the way to solve it.
What specific areas of your project would you like help with?All feedback is welcome.
@Grego14Posted about 2 months agoHello! 😁 Congratulations on completing the challenge.🎉
To prevent the form from being submitted, you can do what you did onsubmit="return false" or you could also add an event to the form and use event.preventDefault() at the start of the handler to prevent the submission.
I would recommend not increasing the border size when doing a hover/focus state, as it results in a layout jump.
To validate if the value of an input is empty, you don't need to use input.value == "" you could simply use !input.value and if the value is an empty String this expression returns true and the code inside the if is executed, since you would be invalidating a falsy value.
I saw that you get a lot of elements to avoid having so many variables with elements, you could not call the spans and call them inside the validateInputValue function:
function validateInputValue(input) { const errorSpan = input.parentElement.querySelector('span.error') if (!input.value) { // ... } else { // ... } }
You're repeating the use of the same ID "error-text" remember that IDs must be unique!
I hope this helps!
1
