P
@bra1695Submitted about 2 months ago
Latest solutions
Responsive Accessible Animated Galleria slideshow site
#framer-motion#react#animationSubmitted 25 days agoSpace tourism multi-page website
#framer-motion#react#react-router#accessibilitySubmitted about 1 month agoResponsive TODO App with React and dnd-kit
#reactSubmitted 10 months agoThe dnd-kit sensors (which make the elements draggable) seem to prevent onClick/onChange functionality of the child elements (like delete button and checkbox) that are inside a draggable list element.
I managed to solve this problem for "mouse users" but not for keyboard users. Meaning, when trying to check or delete a list item, it works with mouse click, but not with keyboard (space/enter keys).
This is a problem, as I tempt to make accessible applications... Any Ideas how to make it work properly?
Thanks in advance!
Responsive Accessible In-browser Markdown Editor
Submitted 10 months agoI'm always grateful to get any feedback on eventual bags, code optimisation and especially accessibility issues.
Thanks in advance! 🍭 Ortaly
Responsive accessible password generator app
Submitted 11 months agoDear community,
I'm always happy to get any feedback on eventual bags, code optimisation and especially accessibility issues.
Thanks in advance! 🍭 Ortaly
Latest comments
- @ortalyartsPosted 23 days ago
Good job on completing this challenge!
I have a few suggestions for you:
-
On the gallery page, I think the images (cards) should act like links to the details page of the paintings.
-
Each time a new details page is loaded, the items (Description text, images) appear not simultaneously, but with a little delay one after another. Was it on purpose?
-
At the details page, at the bottom of the screen there is a little confusion: the title of the painting appears the same for all the paintings. And Instead of the name of the artist, appears the title of the painting.
Other then this you did a good job on the development!
I hope you find this helpful! Cheers 🍭
0 -
- P@omarhmitochSubmitted about 1 year ago@ortalyartsPosted 11 months ago
Hey @omarhmitoch!
Congratulations on completing the challenge!
I have a few suggestions for you:
-
The line divider (.partOfSpeech::before) is wider as it's container. You can fix it by setting it's width to
calc(100% - 80px). -
The search icon "jumps" to the bottom when error message appears. It is because you set it's position depending on the parent's height (.inputWrapper) in percentage. When the error message is shown, the parent is higher.
-
For some search terms (like "face") there is horizontal overflow and the horizontal scrollbar appears. The reason is the .synonyms container, when it has too many synonym words inside it and is too wide. You set it to
display:flex;just addflex-wrap: wrap;to fix the case. -
Try using semantic html. For example: include text contents in <p> or <h> elements, div / span elements are non-semantic. Read more about HTML Semantic Elements.
Other then this you did a good job on the development!
I hope you find this helpful! Cheers 🍭
Marked as helpful0 -
- @sergio-cravasSubmitted 12 months agoWhat are you most proud of, and what would you do differently next time?
After researching about the Hexagonal Architecture (also known as Ports and adapters), I'm proud of have been able to implement that pattern into my project and understand the pros and cons of it in a complex framework like NextJS.
What challenges did you encounter, and how did you overcome them?The most difficult part was to create all the context providers to allow the changes of the typography and theme.
What specific areas of your project would you like help with?I would love to receive feedback about the folder structure and usage around the context API part. I think is an area of the code I need to refactor and it is sure there is a lot to improve.
@ortalyartsPosted 11 months agoHey @sergio-cravas, your deployment is for some reason no longer available...
0 - @JamesWallison1Submitted 11 months agoWhat are you most proud of, and what would you do differently next time?
First time doing API challenges and has finished
What challenges did you encounter, and how did you overcome them?I had a lot of problems with api fetch, but thanks to professional ;)
What specific areas of your project would you like help with?I think there maybe a lot so if you have any better solution, please feel free to let me konw!
@ortalyartsPosted 11 months agoHey @JamesWallison1,
Congratulation on comleting the challenge! It looks really good!
I've noticed just a few visual mismatches:
- The word "Advice" should be uppercase.
- Also it should have bigger letter spacing, like:
letter-spacing: 5px. - The quotation is missing it's opening & closing quote signs - " ... "
Other then this - nice solution!
I hope you find this helpful! Cheers 🍭
Marked as helpful0 - @MemeenaSubmitted 12 months agoWhat are you most proud of, and what would you do differently next time?
Have used useReducer hook for the state updates. Have used data attribute for light/dark theme.
What challenges did you encounter, and how did you overcome them?Had good learning experience in understanding the useReducer hook and updating the state variables.
What specific areas of your project would you like help with?I need help in navigating the app through keyboard.
@ortalyartsPosted 11 months agoHey @Memeena!
Congratulations on completing the challenge!
To navigate the page with the keyboard use: Tab / Shift+Tab, Space, Arrows and Enter keys. This navigation is only available through interactive elements (a, button, input etc.).
So the easiest way to make the elements accessible via keyboard is to use the native html interactive elements, like <a> or <button>.
You used <button> elements for the question page, so I could navigate the page using the keyboard. But for the start page (when selecting the subject) you used <div><p> which are non-interactive. Why not changing it to be like the question page?
The other (less preferred!) option is to make a non-interactive element interactive. You can read more here.
Also, for better accessibility, I would suggest to group the buttons in <ul> list.
One more little bug: it looks like the paths to the icons (incorrect / correct answer) are wrong, because they don't show up.
Above this, you did a good job!
I hope you find this helpful! Cheers 🍭
0 - P@kodan96Submitted 11 months ago@ortalyartsPosted 11 months ago
Hey @kodan96!
Congratulations on completing the challenge!
I have spotted one little bug: the app starts to calculate before I added/selected all the required fields, which causes it to show result as NaN. You can prevent it by adding an additional validation that will check if all the required fields are filled/selected and only then proceed to the calculation.
Also, the app should not accept "0" as value for Bill or Number of people, it causes unexpected calculations.
Above all, your solution looks really good!
I hope you find this helpful! Cheers 🍭
Marked as helpful0
