Skip to content
OverviewSolutions
27
Comments
41

solitary_coder

@kabir-afkindia1,000 points

learning new things and exploring stuff...

I’m currently learning...

JS

Latest solutions

View more solutions

Latest comments

  • Zup•1,370
    @xup60521
    What are you most proud of, and what would you do differently next time?

    drop down animation GSAP conveniently provides a way to animate the height change, which is not trivial when it comes to vanilla js & css keyframes.

    if (mobileNavCompanyAccordian.style.height === "1.5rem") {
        arrowImg.src = ArrowUpImg
        gsap.to(mobileNavCompanyAccordian, {height: "auto", duration: 0.5, ease: "power2.out"})
    } else {
        arrowImg.src = ArrowDownImg
        gsap.to(mobileNavCompanyAccordian, {height: "1.5rem", duration: 0.5, ease: "power2.out"})

    }

    html + tailwindcss + typescript + gsap animation

    #gsap#typescript#vite#tailwind-css
    1
    solitary_coder•1,000
    @kabir-afk

    Hey !! Congrats on clearing the challenge! Great page. I had some concerns regarding your code and thought I should address them.

    • Reducing verbosity : Instead of making separate functions for opening and closing each accordion element , you could have declared classes inside your custom CSS and then later used classlist.toggle to add/remove them depending on the state of your variable, which you could have changed when user clicks the particular element. It reduces verbosity and makes for an efficient code. Then, based on the conditions of your state, you could have integrated gsap accordingly.

    • Breakpoint too high : You could have settled for a lower breakpoint , somewhere around 748px , instead of 1024px. I mean, it still looks good, but when you open the sidebar menu, it feels too wide. You can ignore this point if you wish. I guess it's subjective.

    Everything else feels top notch . . .hope this helps you. Cheers !! 🥂

  • P
    Kamran Kiani•2,780
    @kaamiik
    What are you most proud of, and what would you do differently next time?

    Start to using more and more preprocessors. Please give me feedbacks about BEM and SASS styling.

    What challenges did you encounter, and how did you overcome them?
    • I've used a lot absolute positioning on this challenge. It was tough for me.
    • There is some difference on mobile and desktop view when you click the share icon. This was really challenging.
    What specific areas of your project would you like help with?
    • Is my css on main image is true. It is not as same as the design.
    • Is my html structure true? how can I improve it?
    • For mobile view when I click the share icon I've used visually hidden class to disappear a default div and appear another div. For desktop I've used absolute positioning to show the div at the top of the share icon. Do you think It is a right approach?
    • Any comments on my JS?
    • Is there any accessibility classes that I should use here? I mean aria attributes.

    Article Preview Component

    #bem#sass/scss
    2
    solitary_coder•1,000
    @kabir-afk

    Uploaded , you can check my soln out through my profile...feeel free to ask any question that comes to your mind , or any advice as well , I'll clear them if I can

  • solitary_coder•1,000
    @kabir-afk

    Heyyy, its been a while , you wrote some amazing css btw , like it flew over my head since I havent used those practices in a while, altho I did want to comment on your JS.

    1. Font-family inside input tags : Your input.target.value dont seem to inherit the font-family as rest of the elements making it look awkward wrt rest of the page...you must've forgotten , nvm , a simple font-family:inherit would have accounted for that easily.

    2.User Form Validation: Nothing happens when we click on Send Message btn , like you could have added a success page as an indicator to make sure the message has been submitted . Even if it is not given in the design , some form of indication would have been nice . . . would have made for a good UX. You could have simply reset the state values and added a toast notification with a message Message Sent when the user submits the form , instead of hanging user in the middle.

    I AM SURE YOU ARE AWARE OF THINGS I AM GOING TO SAY DOWN BELOW,BUT IF NOT THEN . . .

    3. Validation Logic : I am not really good in regex , but I'd still recommend that if you find it difficult to write valid regex , just copy it from the net , its ABSOLUTELY FINE. Because there will always be cases you didn't account for/ escaped your mind at the moment. For example in

    function validateName(name) {
    return name.length > 0;
}

    you are just checking the length of name , when you should have accounted for other cases as well like the user's name doesn't contain numbers/special characters . . . or simply saying it contains only letters. Something like /[a-zA-Z]/ would have been better . . . this is not the exact regex , but I hope that you get my point .Also it's not like these things came in my mind when I first did them , but the exp I gained after googling what a valid name/email regex should look like allowed me to use it later in the future as well . . .google/GPT the regex when you can.

    function validateEmail(email) {
    const re = /\S+@\S+\.\S+/;
    return re.test(email);
}

    Here as well , you are not checking whether the extension is correct or not, so something like a@g.commmmmmmmmmmmmmmmmmmmmmmm turns out to be a valid email address. For extension you should have limited to 2-3 characters.

    Disclaimer: This might not be right , since I have forgotten as well

    Something like : /\S+@\S+\.\S+{2,3}/ would have been appropriate . . .again google it

    Why should we do all this? Because it allows us to validate user in a better way and also makes for a good user experience. Everything else was great , again great CSS, seemed reusable , also you avoided use of unnecessary declaration of classNames . . . . cheers 🥂🥂

  • P
    Kamran Kiani•2,780
    @kaamiik
    What are you most proud of, and what would you do differently next time?

    Start to using more and more preprocessors. Please give me feedbacks about BEM and SASS styling.

    What challenges did you encounter, and how did you overcome them?
    • I've used a lot absolute positioning on this challenge. It was tough for me.
    • There is some difference on mobile and desktop view when you click the share icon. This was really challenging.
    What specific areas of your project would you like help with?
    • Is my css on main image is true. It is not as same as the design.
    • Is my html structure true? how can I improve it?
    • For mobile view when I click the share icon I've used visually hidden class to disappear a default div and appear another div. For desktop I've used absolute positioning to show the div at the top of the share icon. Do you think It is a right approach?
    • Any comments on my JS?
    • Is there any accessibility classes that I should use here? I mean aria attributes.

    Article Preview Component

    #bem#sass/scss
    2
    solitary_coder•1,000
    @kabir-afk

    hey , I came up across your query on discord . . . the challenge only required of you to use javascript to toggle share button, but you went on to over-engineer it by adding and removing classes that could have been easily executed with css..there is nothing wrong with using js . but why make it complicated when it can be achieved with css alone...read up on responsive layout. You should have used media queries differently, like using flex-diection:row in desktop layout and flex-diection:column in mobile layout.So to answer your question For mobile view when I click the share icon I've used visually hidden class to disappear a default div and appear another div. For desktop I've used absolute positioning to show the div at the top of the share icon. Do you think It is a right approach? NO it wasn't the right approach . Your BEM nomeclature was great as well as the way you wrote scss was also top notch , but still felt overdone at some places....the hover states have not been taken care of as well.

  • solitary_coder•1,000
    @kabir-afk

    Hey man , great site , but there seems to be an issue with cart functionality., the state isn't resetting itself whenever the user is adding or removing something from the cart .. I don't know anything about Vue otherwise I'd have been able to help . . . hope you look into this issue

  • solitary_coder•1,000
    @kabir-afk

    Hey, can't really help with testing the site since it doesn't open at first place ,but you can try changing the repo name to something diff since interactive-card-details in the URL does make it look like a phishing site....rename it to something diff like details-form and then maybe we can work on your so called potential hiccups

View more comments