Skip to content
OverviewSolutions
35
Comments
26

Diagne Makha

@mbd89France570 points

Don't forget to click the like on all challenges. Thanks in advance :)

I’m currently learning...

Javascript

Latest solutions

View more solutions

Latest comments

  • Jolijn Rosendaal•340
    @Jolijn0101
    What are you most proud of, and what would you do differently next time?

    I am proud that this form could be navigated with the mouse and the keyboard. The form wil be read out loud by screen readers and give information to blind people that they needed to send this form. I am also happy with the little animation at the end that op-ups a message that the form was send correctly.

    What challenges did you encounter, and how did you overcome them?

    In the design the focus and active state would be only changing the border color. It was very difficult to see. I can inmagine that someone with bad sight would not see it. I decided to make the border thicker. Making de form work for people that wil navigate it with the mouse and have good sight wasn't a big problem. Making it accessible with the screen reader is a whole other story. With voiche over on the mac I tested if the code was working for screen readers. I changed the error messages so they were also clear if you only would hear them being read out. Only stars at the end of the input labels wasn't working for people without sight. I used aria-label to turn the message in the name of the field and that it is required.

    What specific areas of your project would you like help with?

    If you have any suggestions to make this form even more accessible I would love to hear it. After trying a lot out it made de code a bit messy in the HTML and CSS do you have tips to make it more organized?

    accessible form

    #accessibility#animation
    1
    Diagne Makha•570
    @mbd89

    it looks pretty good. accessible and everything. looks good on all devices.

    but why is the form empty after we submit it ? and i see that after if I try so submit the form without filling in the required fields, error messages appear, but after I fill in all fields the error messages are still there and the success message pops up.

    Marked as helpful
  • Abel Muro•1,890
    @AbelMuro
    What are you most proud of, and what would you do differently next time?

    I am most proud of refactoring my code in such a way that I was able to prevent any unnecessary re-renders in the app. Updating the global state in redux was causing a lot of re-renders that I wasn't aware of. But I took the time to refactor, and now the app is fully optimized.

    What challenges did you encounter, and how did you overcome them?

    The biggest challenge was preventing the unnecessary re-renders in the app. Alot of my components were subscribed to the global store, and because of this, these components were rendered at least 4 or 5 times when they should've been rendered at least once. I memoized most of my components to solve this issue, and I did a bit of refactoring as well

    What specific areas of your project would you like help with?

    The area I would like help with is finding different ways to prevent unnecessary renders in my react app. I tried my very best to optimize the app by memoizing and refactoring, but if you think there is a better way to do this, please let me know.

    Product list with cart

    #react#redux
    1
    Diagne Makha•570
    @mbd89

    this looks flawless!

  • P
    Anton Vasilache•580
    @Antonvasilache
    What are you most proud of, and what would you do differently next time?

    Creating the overlay and the mobile menu.

    What challenges did you encounter, and how did you overcome them?

    Not much, it was relatively easy.

    What specific areas of your project would you like help with?

    How to make the page more accessible.

    Responsive News Homepage using CSS Grid, JS

    1
    Diagne Makha•570
    @mbd89

    This looks awesome. you forgot to add cursor:pointer; on the hamburger menu on mobile.

  • P
    Anton Vasilache•580
    @Antonvasilache
    What are you most proud of, and what would you do differently next time?
    • I've used some complex selectors to create custom input elements
    • I've tried to make the form accessible as best as I could
    What challenges did you encounter, and how did you overcome them?

    Creating custom input elements proved to be somewhat challenging - I've looked up various methods online and managed to do it through some trial and error. Refactoring the JavaScript code was somewhat tricky, due to the way the CSS selectors were set up in the beginning.

    What specific areas of your project would you like help with?

    I'm not sure if I have combined the accessibility elements properly.

    Responsive contact form using CSS Flex, JavaScript

    3
    Diagne Makha•570
    @mbd89

    Put this in your html above script js tag to enable jquery

    script src="https://code.jquery.com/jquery-3.7.1.min.js">

  • P
    Anton Vasilache•580
    @Antonvasilache
    What are you most proud of, and what would you do differently next time?
    • I've used some complex selectors to create custom input elements
    • I've tried to make the form accessible as best as I could
    What challenges did you encounter, and how did you overcome them?

    Creating custom input elements proved to be somewhat challenging - I've looked up various methods online and managed to do it through some trial and error. Refactoring the JavaScript code was somewhat tricky, due to the way the CSS selectors were set up in the beginning.

    What specific areas of your project would you like help with?

    I'm not sure if I have combined the accessibility elements properly.

    Responsive contact form using CSS Flex, JavaScript

    3
    Diagne Makha•570
    @mbd89

    If you look in the design, when you select a query type and then click elsewhere the background of the selected query type stays light green., i struggled to make it happen; i finally found a solution to that with jquery. $('.enquiry').click(function () { $(this).find('input:radio')[0].checked = true; $('.focused').toggleClass('focused'); $(this).toggleClass('focused'); });

  • P
    Anton Vasilache•580
    @Antonvasilache
    What are you most proud of, and what would you do differently next time?
    • I've used some complex selectors to create custom input elements
    • I've tried to make the form accessible as best as I could
    What challenges did you encounter, and how did you overcome them?

    Creating custom input elements proved to be somewhat challenging - I've looked up various methods online and managed to do it through some trial and error. Refactoring the JavaScript code was somewhat tricky, due to the way the CSS selectors were set up in the beginning.

    What specific areas of your project would you like help with?

    I'm not sure if I have combined the accessibility elements properly.

    Responsive contact form using CSS Flex, JavaScript

    3
    Diagne Makha•570
    @mbd89

    this looks pretty good

View more comments