edpau
@edpauAll solutions
- Submitted 20 days ago
Contact Form with React/ React Hook Form/ Typescript
- HTML
- CSS
- JS
What I want to do
- I am trying to use SVG to replace the default radio button to give my webpage a consistent look across different browser.
- I want the SVG outer circle to grey out when it is not clicked
- when the radio button is clicked (in my case, it is the label, I wrapped the label around the radio button), then colored when it is clicked
SVG I used has separate into parts for better control (please see in README)
What I read and try
-
I read Inclusively Hiding & Styling Checkboxes and Radio Buttons and learn to use opacity 0 over visibility for better accessibility.
- using opacity 0 over sr-only can improve accessibility for users navigating by touch
- Both display: none and visibility: hidden remove the element they hide from the DOM and accessibility tree
-
I learnt from this two code pen, using Vanilla CSS to style the SVG when the checkbox/ Radio button is clicked. Their SVG has separate into parts for better control using class name
-
SVG example (please see in README)
-
using Vanilla CSS to style the SVG when it is checked
input:checked + svg { .radioDot, .radioOutline { opacity: 1; } } -
I also learn from this example, Custom Radio Buttons with only Tailwind CSS, this example taught me to use Tailwind peer.
- In Tailwind CSS, the peer-checked class can style elements that are siblings of the peer element when the peer element is checked.
Problem I have
- I cannot control individual parts of the SVG using Tailwind
- The peer-checked class will not work in my case because the element is not a direct sibling of the input element.
- In Tailwind CSS, I cannot directly target sibling elements with complex selectors like input:checked + svg .radioDot because Tailwind CSS is a utility-first CSS framework that generates utility classes for individual elements.
input:checked + svg { .radioDot, .radioOutline { opacity: 1; } }How I solve it
- I used a similar approach as https://marek-rozmus.medium.com/styling-checkbox-with-tailwind-46a92c157e2d
- I put two SVG on top of each other and change their opacity.
Please suggest a better solution.
- Submitted about 1 month ago
Tip Calculator with TS and Grid
- HTML
- CSS
- JS
Please kindly review how I make the radio button, please advise how I can improve accessibility.
- Submitted about 1 month ago
Time Tracking Dashboard with typescript and grid
- HTML
- CSS
- JS
Please comment on my typescript and code logic.
- Submitted about 1 month ago
Newsletter sign-up form with TS
- HTML
- CSS
- JS
I am trying to improve my TS and JS skills, please kindly comment on my code.
I am also looking into how to set explicit width and height on the SVG to reduce layout shifts and improve CLS, while making the SVG responsive, please advise the best practice.
- Submitted about 2 months ago
Responsive article preview component
- HTML
- CSS
- JS
I tried to use aria-expanded, aria-controls and aria-haspopup to improve accessibility for the share menu, to inform assistive technologies about the current state of the expandable share menu. Please comment on my approach.
improving accessibility has turned to be more challenging than I expected. For the mobile version, I need to hide the author content from screen readers, while for the desktop version, it doesn't need to be hidden. There are many factors to consider.
Please advise how I can improve the accessibility.
Please also share any good articles on accessibility for beginner.
- Submitted about 2 months ago
Testimonials grid section with React and Tailwind
- HTML
- CSS
I aimed to make the TestimonialCard component reusable, but each card has slightly different styles. To handle this, I added conditional Tailwind classes like ${bgColor} to match each card's unique style.
However, this increased the complexity of the component, reducing its readability and maintainability. It became harder to follow the logic, as the dynamic classes added clutter to the code. Balancing reusability with clarity is hard.
Please advise how I can improve.
- Submitted 3 months ago
Product-preview-card with React and Tailwind
- HTML
- CSS
Please kindly comment on my semantic Tailwind CSS setup.
Please also comment on my code, please help me to improve.
Many thx.
- Submitted 3 months ago
Advice generator with REST API
- HTML
- CSS
- JS
- API
I structured the JavaScript code with modularity and future testing in mind. I implemented:
- Error Handling: i.e.4xx-5xx HTTP Status
- Handle Edge Cases: validate Api Response
- Provide Feedback to Users: Loading Indicator and Error Feedback
- Debouncing the Button Click
- Accessibility Considerations,
aria-busy,aria-live="polite” - Use init()
Please comment on my JavaScript code design on fetching and display the advice from the Advice Slip API.
What area should I look into for improvement? Any good link?
- Submitted 3 months ago
Responsive Recipe Page
- HTML
- CSS
In mobile size, the image at the top will have a full width, and not having a padding just like the sections below it. But in the desktop size, it will have a padding the same as the sections below it.
I started off with giving overall padding to the white card, but it will give padding to the image padding in mobile size. So my approach is give padding to each sections individually. It is time consuming and not elegant.
I tried to keep the html as semantic as possible, I didn't want to div the sections into a big div and have an overall padding to it.
Please advise how I can do better.
- Submitted 3 months ago
Responsive QR code component
- HTML
- CSS
I tried to match the design of the card description, I want the last line of text to show "the next level" instead of "next level" , just like the Figma design, so I put a width 256px in the p tag, it forces the "the" to go to the last line.
Please advise is there any better way to achieve the same result. Thx
- Submitted 3 months ago
Responsive social links profile using flexbox
- HTML
- CSS
- Please comment on the semantic html structure I used.
- Please suggest accessibility features I should explore.
