Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • P
    Srijan Manandharā€¢ 440

    @srijanss

    Submitted

    What are you most proud of, and what would you do differently next time?

    • I learned about the css to hide the spin button of input type number in different browsers
    • I also learned how to apply different border radius to the div element. This was the result of many hit and trials
    • I also learned about how to apply multiple linear gradients to create the background effect like the design

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

    • Creating the border radius of the result div was challenging. As per design it should be 16px on left corners and 999px on right corners. But when 999px is applied it removes the border radius of left corners. So, it was many hit and trials. And finally found out that 100 to 150 px works for right corners.

    • Also creating the background gradient of the top element was also challenging, finally figured out that we can lay one gradient on top of other to create the effect

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

    • feedbacks are welcome, especially regarding the accessibility

    BMI Calculator app with focus on a11y

    1

    P
    Sam Hookerā€¢ 410

    @35degrees

    Posted

    Great job, and your a11y code is thoughtful and impressive. I will review your forms for your a11y use best practices. Nothing but minor comments, like adding .toFixed() to limit the number of decimal places when you toggle radio buttons. Impressive!

    1
  • P
    Srijan Manandharā€¢ 440

    @srijanss

    Submitted

    What are you most proud of, and what would you do differently next time?

    • I learned about different aria attributes which will make screen readers aware about the state changes within the app
    • aria-live, role="alert", role="status" were helpful to let screen readers know what is happening when they click button or there is an error submitting a form
    • another important thing I learned regarding the popup within the app is to trap focus within the opened dialog box, so that keyboard users and screen readers have an idea on where the current active element is
    • using the calc method was really helpful to figure out how to place the on hover border on nav links
    • I learned a lot about how to build image slider
    • I learned how to duplicate first and last item in the image list to create infinite slider
    • And building the lightbox using the clone of image gallery was really fun

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

    There were many items , popups and image slider to be included in the app. Making this app with a11y concerns were bit challenging. So, I divided the app into smaller components and worked on them individually and applied a11y related features on smaller components first. Then applied those same to the image sliders, light box modals etc.

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

    • Any feedback specially regarding the a11y are welcome
    • I am learning on how to make web apps accessible to all users, so feedbacks are welcome

    Ecommerce product page with focus on a11y

    1

    P
    Sam Hookerā€¢ 410

    @35degrees

    Posted

    I'm not familiar with JS constructors yet so I can't really review your code but it looks good. The a11y was tough for me as well and breaking it into smaller components is a smart way to do it. The mobile drop down menu appears and then disappears when sliding into mobile width, that would be my only feedback to check out but otherwise looks awesome!

    1
  • Konradā€¢ 370

    @konradbaczyk

    Submitted

    What are you most proud of, and what would you do differently next time?

    I trained import/exports JS and split SCSS files into a few smaller files for easier work.

    News homepage

    1

    P
    Sam Hookerā€¢ 410

    @35degrees

    Posted

    Great job. Nice use of semantic HTML. The nav menu isn't keyboard navigation-friendly, I'm not sure why not. The hamburger menu disappears after the first use and the mobile menu has a ghost effect at first before I use the hamburger menu, maybe initialize it with display: none to remove that effect? Well written, clean code!

    0
  • P
    Srijan Manandharā€¢ 440

    @srijanss

    Submitted

    What are you most proud of, and what would you do differently next time?

    I have learnt how to make accessible forms by

    • making the form accessible using keyboard
    • using autocomplete attribute and different tokens for different input types
    • use of different aria-describedby attribute to describe more on what the input field is about and how to input values
    • hiding redundant data from screen readers using aria-hidden attribute
    • use of aria-invalid attribute to announce field is invalid and the error message based on aria-describedby
    • how to make the toast message or modal accessible to the screen readers
    • the use of aria-live, role="alert" and aria-atomic attributes help annouce the success message of toast in the solution

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

    I had some issues using aria-invalid attribute and removing error messages when user starts filling forms

    • I set the aria-invalid="false" on load in all the input elements, and when there is an error on submit then I changed attribute aria-invalid="true" so that screen-readers announce the input is invalid and error message is read out
    • similarly when user starts typing on the input field which has error message, then the error-message disappears

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

    Is my solution accessible? How can I improve the a11y of the solution.

    Accessible Contact form

    2

    P
    Sam Hookerā€¢ 410

    @35degrees

    Posted

    great validation, modal and keyboard navigation! Very thorough code I learned a lot

    1
  • P
    Sam Hookerā€¢ 410

    @35degrees

    Posted

    Very impressive accessibility work! I'm bookmarking your code. Really thoughtful solution to keyboard navigation and the toggling attributes. It seems like you covered all the a11y bases and the code is clean and understandable. Looks like the plus images are cut off and there's no media query but amazing work!

    0
  • P
    Sam Hookerā€¢ 410

    @35degrees

    Posted

    Great job with the efficient code and adding the appropriate a11y elements. I love the way you set up the .sr-only class and added it the input elements. Maybe the tooltip when you don't select an input can disappear after a few seconds? Other than that, nice work!

    1
  • P
    Sam Hookerā€¢ 410

    @35degrees

    Posted

    Nicely done! I am learning a lot from your JS code. It's very clean and organized and easy to follow. The x-axis animation is very cool and the layout is professional-looking. My only comments are about the container sizing. With no max-width applied, the elements can stretch horizontally on a large monitor forever. Also before your tablet media size, the answer boxes get too narrow and the text wraps outside of their containers, and the wrapping can distort other elements. Also I thought the hover color you put on the "Submit Answer" button make it look like it's disabled, maybe it's too faded? excited to see your future work.

    0
  • P
    Ralph Virtucioā€¢ 610

    @ralphvirtucio

    Submitted

    What are you most proud of, and what would you do differently next time?

    I'm most proud of on how I coded the functionality of the password generator, I would do differently next time is create a custom-control of the input and checkboxes by following this article

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

    The challenges that I encountered are checking of password strength and implementing the strength bars, I overcome them by reiterating through my plan, researching the challenges, breaking down the challenges into a small tasks and simplifying the challenges/problems involve around it.

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

    I need help on checking and measuring the generated password strength, I'm having a second thoughts if my validatePasswordStrength(computedEntropy) is measuring the password strength correctly

    Password Generator App (Vanilla JavaScript)

    1

    P
    Sam Hookerā€¢ 410

    @35degrees

    Posted

    Really nice work, I learned a lot from your code! The animation on the error is cool, and you put a lot of thought and work into this project. I don't really have feedback on your JS, I also had lots of conditionals that made it a long file. For the Copy button, maybe you could have had a modal or a pop-up saying that it copied successfully. Nice job!

    1
  • Dimitrios Dristellasā€¢ 460

    @dimitrisdr

    Submitted

    What are you most proud of, and what would you do differently next time?

    I am very happy for completing this project. I think that i slightly improved the way that I am writing code. I used some of the techniques that this learning path provided us with.

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

    The main think that I struggled with is how to break my code into smaller functional pieces.

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

    I think that I need to work further on how to right less code. Also I think that I need to name CSS classes in a more efficient way.

    tip calculator main

    1

    P
    Sam Hookerā€¢ 410

    @35degrees

    Posted

    Amazing JS code, it looks efficient and clean, and I like how you wrapped all the initial data into one object. The custom tip box is really well done. I see that you included the warnings into your JS code but I didn't find the warnings after some testing on the actual calculator. Also the layout of your calculator goes haywire if someone enters a huge number like $1,000,000. You should have a warning or a 'maxlength' on your inputs to prevent that. Also adding a .toFixed(2) to control the decimals places makes a better user experience. The mobile version is solid, nice work!

    Marked as helpful

    0
  • P
    Sam Hookerā€¢ 410

    @35degrees

    Posted

    Impressive and concise JS code. I like how you were able to use placeholders in the HTML and port over the data. You could add a conditional to show '1hr' instead of '1hrs' and I think the max-width could be smaller on the phone-sized display, it stretches too far to be readable. Nice work!

    0
  • P
    Sam Hookerā€¢ 410

    @35degrees

    Posted

    Nice! Great JS code. I think it would look better if the main 'dashboard' was the same height as the rest of the grid. Also would look better if you used a conditional to show '1hr' instead of '1hrs' .

    Marked as helpful

    0
  • samir-Deveā€¢ 350

    @samir-Deve

    Submitted

    What are you most proud of, and what would you do differently next time?

    Nothing

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

    Serving my web page on local host was a little bit challenging, it was my first time serving a web page on local host, I even didn't know that something like this existed !

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

    I don't any help but I know that I should add one more or maybe tow media queries to my CSS

    CSS, HTML & JS

    2

    P
    Sam Hookerā€¢ 410

    @35degrees

    Posted

    Nice JS code! I like how you push the fetched data to an empty array with each click, I was looking for ideas to shorten my code and this helps. I think a general rule for JS variables is to start with a lower case letter every time (like 'timeTrackCount' instead of 'TimeTrackCont') and you could have written some conditionals so it says '1hr' instead of '1hrs'. Also I would have put in a max-width on the grid, it stretches so much on a desktop layout. Thanks for sharing!

    0