P
@Gwynbleidd222Submitted 23 days ago
Latest solutions
- Submitted about 1 month ago
Responsive Time Tracking Dashboard
- HTML
- CSS
- JS
The challenges mentioned in the previous section.
- Submitted about 1 month ago
Article Preview Component
- HTML
- CSS
- JS
The aforementioned challenge I experienced.
Latest comments
- P@olaide-hokSubmitted about 1 month ago
- @carlosdamotaSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I am most proud of implementing secure DOM manipulation by avoiding innerHTML and instead using document.createElement and append. This approach enhances security and prevents potential XSS vulnerabilities. Additionally, I focused on accessibility improvements, such as using role="alert" and aria-live="assertive" to enhance the user experience for screen readers.
Next time, I would refine focus management even further to ensure a seamless navigation experience, especially for keyboard users. I would also explore implementing a lightweight state management solution to handle form validation and UI updates more efficiently.
What challenges did you encounter, and how did you overcome them?One major challenge was ensuring that the form validation messages were properly announced by screen readers. Initially, they were not being detected, which led me to research ARIA attributes more thoroughly. By adding aria-live="assertive" and structuring the validation messages correctly, I was able to resolve the issue.
Another challenge was managing the dynamic success message while maintaining a smooth user experience. To solve this, I ensured that focus was shifted to the dismiss button when the success message appeared, allowing users to close it easily using the keyboard.
What specific areas of your project would you like help with?I would appreciate feedback on:
Accessibility Enhancements – Are there additional improvements I could make to further enhance the accessibility of the form?
CSS Nesting and Maintainability – I used native CSS nesting to improve readability. Is this approach effective, or would there be a better way to structure my styles?
Performance Optimization – Given that this is a simple form, are there any optimizations I could make to enhance performance, especially regarding JavaScript execution?
Any insights or suggestions on these areas would be greatly appreciated!
- P@PetterTSaatvedtSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
Overall I feel very comfortable with the implementation of responsive design and styling in general, and it was great practice to combine this with some basic javascript. Next time, I will do some more research beforehand, to avoid having to change my approach mid-project as I did this time, due to finding the toggle class option in javascript.
What challenges did you encounter, and how did you overcome them?The main challenge for this project was definitely finding a solution for how to handle the changes in design and layout when clicking the share button. Not only should it adapt in terms of screen size and state, but also for resizing of the window, as this could result in a bugged layout. I ended up using the toggle method for the classList property, which allowed me to toggle classes on and off according to specific scenarios.
What specific areas of your project would you like help with?All feedback is welcome, as I'm always looking to learn. Perhaps there is a more efficient way to handle the toggling?
@broken555wheelPosted about 1 month agoAmazing solution, Petter.
I'm also hoping to see/learn a more efficient way to handle the toggling. I see you used classList while I directly manipulated CSS. Is it more advantageous to use your approach?
0 - @Asem-MamdohSubmitted 3 months ago@broken555wheelPosted about 1 month ago
Center the content by centering the container where you set display to grid.
0 - P@anthony-emmauelSubmitted about 1 month ago@broken555wheelPosted about 1 month ago
You can use
margin-left:auto
to align the images right
0
