Skip to content
OverviewSolutions
4
Comments
3

Zhxixin

@Zhxixin80 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • P
    Trần Thành Danh•1,500
    @TranDanh1122Submitted 3 months ago
    What specific areas of your project would you like help with?

    input state is veryhard to manage, i try my best, but it look so bad, pls help

    Repayment Caculator

    #react#tailwind-css
    1
    Zhxixin•80
    @ZhxixinPosted 3 months ago

    It is recommended not to write CSS to HTML:

        className={clsx("w-full text-3 text-Slate_900 border-solid border-[1px] py-3 px-4 flex flex-nowrap items-center justify-start gap-4 cursor-pointer",
                {
                    "border-Slate_500": !(checked == `${value}`) && !status.hover && !status.invalid && !status.valid,
                    "border-Lime bg-Lime/15": checked == `${value}`,
                    "border-Lime": !(checked == `${value}`) && status.hover

                }
            )}>
    0
  • Zhxixin•80
    @ZhxixinPosted 3 months ago

    Too many parameters in function such as：

    const Product = ({ id, name, image, category, price, thumbnail }) => {
    let [addToCart, isAdd] = useState(false)
....
}
Modified to：
const Product = ( product:ProductEntity ) => {
    let [addToCart, isAdd] = useState(false);
   const [image, setImage] = useState<String>('');
    useEffect(() => {
        const handleResize = () => {
            setImage(window.innerWidth >= 768?product.image.desktop:product.image.mobile);
        }
        handleResize();
        window.addEventListener('resize', handleResize);
        return () => {
            window.removeEventListener('resize', handleResize);
        }
    }, []);

....
}
export interface ProductEntity {
    price: number;
    name: string;
    category: string;
    productId: string;
    selectQuantity?: number | null;
    image: {
        thumbnail: string;
        mobile: string;
        tablet: string;
        desktop: string;
    };
}
    Marked as helpful
    1
  • Zhxixin•80
    @ZhxixinPosted 4 months ago

    Add a <title> or aria-label to important icons. For example：

     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20"><path  stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25" d="M7.5 10h5M10 18.333A8.333 8.333 0 1 0 1.667 10c0 1.518.406 2.942 1.115 4.167l-.699 3.75 3.75-.699A8.295 8.295 0 0 0 10 18.333Z"/></svg>

    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
  <title>Reaction Icon</title>
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25" d="M10.833 8.333V2.5l-6.666 9.167h5V17.5l6.666-9.167h-5Z"/>
</svg>
    0