Skip to content
OverviewSolutions
16
Comments
16

Adesh Katiya

@adeyshIndore420 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

  • Responsive Ecommerce Product Page with Lightbox using SCSS/JS

    #accessibility#vite#sass/scss
    Adesh Katiya•420
    Submitted 1 day ago

    Currently I would like to see if i have included everything that the project asked for with accessibility, ux experience etc. or something that i wasn't aware of left out. You could provide me feedback for this!!

    2 comments

  • Responsive news homepage with using grid and subgrid layout

    #accessibility#vite
    Adesh Katiya•420
    Submitted 9 days ago

    Currently no specific area to be particular but on the layout shifts that happen when an overlay is displayed and the scrollbar gets hidden. I used a new property called scrollbar-gutter to prevent this. But could not try using vanilla css and js.

    1 comment

  • Accessible contact form with success toast notification

    #accessibility#vite#sass/scss
    Adesh Katiya•420
    Submitted 14 days ago

    I would appreciate help with screen readers because since I am using linux and it comes with in-built screen reader orca. I was having difficulties operating that. Is there any other way of reading the web pages with accessiblity that i can use on linux.

    1 comment

  • Responsive and Accessible FAQ accordion using HTML/SCSS w/ and w/o JS

    #accessibility#sass/scss#vite
    Adesh Katiya•420
    Submitted 19 days ago

    I would like feedback on my html/css code that I have written in another branch of the same challenge repo, about whether I can further optimize the code anywhere or not! If You have something to share. Please do!! Thanks

    1 comment

  • Interactive rating component built with semantic HTML and a11y feature

    #accessibility#sass/scss#vite#bem
    Adesh Katiya•420
    Submitted 22 days ago

    I found a styling bug that I don't know where is it coming from. All the text nodes in this particular project have some spacing below them which pushes them upwards and they do not look centered for example in flexbox containers. I don't know where is it coming from since I have set the margin to 0 for all elements. If someone could point out the solution for this, it would be really helpful. Thanks!

    1 comment

  • Responsive Tip Calculator built with SASS/BEM and Vanilla JS + Vite

    #accessibility#bem#vite#sass/scss
    Adesh Katiya•420
    Submitted about 2 months ago

    I wanted to modularize my code in the js into different files but on doing that my styles wouldn't apply and I had no idea what was going on. Since I was using vite, I thought that it had to do something with this. So how do i use different files as js modules and import them in a single file and then initialize it with vite. Do i have to change some config settings? It would be really helpful if you can provide me that solution! Thanks

    1 comment
View more solutions

Latest comments

  • P
    RF13•510
    @rf1303
    What are you most proud of, and what would you do differently next time?

    I’m most proud of how I was able to break the JavaScript into modular files to keep the logic organized and maintainable. It made handling features like the image gallery, lightbox, and menu behavior much cleaner. I also paid special attention to accessibility and responsive design, which improved the overall user experience across devices.

    If I were to do this project again, I would plan the JavaScript architecture earlier and consider using a small framework or components system for better scalability. I would also write unit tests for some of the key interactive features and focus more on advanced accessibility practices like keyboard trap handling in modals and ARIA live region updates.

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

    the challenges, the lightbox and the modules and the screen changes, the cartbox items and the menus, working a lot and testing, I think it looks pretty good.

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

    I'm missing more accessibility, some tips and js part would also be appreciated.

    HTML CSS SCSS Javascript Mobile firts bem Accessibility

    #bem#accessibility
    1
    Adesh Katiya•420
    @adeysh

    Hi There! This looks awesome. You have done very well implementing all the funcitionalities of the design. Your code is well structured too. I would like to give you some feedback from my end for polishing it as well here goes:

    For UI

    • The cursor currently doesn't change to pointer on hover on header contents, the preview image of the gallery, '+'/'-' and add to cart button. Some styles are missing on hover for header cart button and profile button
    • Currently the lightbox overlay screen is not covering the whole screen and white background shows up at the bottom.
    • There's no hover styles for thumbnail images in the lightbox.
    • Changing the preview image in lightbox thorugh arrow buttons doesn't update the thumbnail images telling which image is currently active. it works when you click on the specific image but not on sliding it to a different one.
    • No hover styles for close button in lightbox.
    • For tablet screen sizes the preview image on the gallery doesn't fit 100% and gets cropped out.
    • The navigation menu in tablet screen sizes doesn't attach to the edge of the screen because i think it has some fixed width.
    • I think after adding some items and clicking on add to cart button currently updates the cart badge but it should also open the cart to show the items that were added.
    • The cart if opened should close after clicking anywhere outside it.

    For Code

    • I think in the <body> tag, there should really be only three landmarks <header> containing your navbar, <main> containing everything below it.
    • The other <divs> could just be a part of a parent container even for overlays.
    • Always try to give alt messages for images.
    • The html is semantic as well.
    • I have applied the same logic to slide the image with transition that you have used for gallery in your productSneaker() and prodSneakLight() functions. however i see that you can create a single function for these two generalizing similar code.
    • Same goes for event listeners in you main.js file as well. Since you are calculating the index for when buttons are clicked and then increasing/decreasing them. you could create a single function for this operation and pass parameters as needed just for increasing/decreasing and the element that you need event listener for. it can reduce some amount of code lines.
    • These code blocks too
    btnsThumbail.forEach((btn) => {

        btn.addEventListener("click", () => {
            const i = parseInt(btn.dataset.img);
            productSneaker(i, 1);

            btnsThumbail.forEach((b) => b.classList.remove("button__thumbails--active"));
            btn.classList.add("button__thumbails--active")
        });
    });

    and

    btnsThumbLight.forEach((btn) => {
        btn.addEventListener("click", () => {
            const i = parseInt(btn.dataset.img);
            prodSneakLight(i);
            btnsThumbLight.forEach((b) => b.classList.remove("button__thumbails--active"));
            btn.classList.add("button__thumbails--active")
        });
    });

    have similar logic so you could combine them.

    • for code in the cart box section too.
    • Code in functions in menu.js file also have a lot of similar code that can be reused or generalized into a single function. for example for lightBoxChange(), lightClose() and lightBox() could have the constants defined at a single and place and then if conditions applied for necessary code.

    That's all. Everything looks good but I think you can refactor code here to make it scalable and reduce DRY code. All the best 🎉

    Marked as helpful
  • P
    RF13•510
    @rf1303
    What are you most proud of, and what would you do differently next time?

    Me gustan los desafios , el uso de grid y las transiciones de los elementos

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

    It was a challenge to ensure smooth transitions between breakpoints while keeping the structure semantic and accessible to screen readers. I also implemented custom styles for the interactive elements and managed the menu opening.

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

    **I would like to receive feedback from the accessibility side.

    HTML CSS SCSS Javascript Mobile firts bem

    #accessibility#bem#sass/scss
    1
    Adesh Katiya•420
    @adeysh

    hi there! This solution looks great. Congrats on completing it!

    Here's my feedback for you:

    CODE:

    • Try to always include alt messages if you're using img tags. It helps with accessibility and screen readers.
    • Since you're already using a semantic tag nav for the navigation bar. You don't have to include role="menu" or role="menuitem" for the list inside the nav or list-items inside the list. Screen reader will use the nav as landmark.
    • The contents inside the menu list are links that can link to other sections of the same page or on another page. So they must be wrapped in anchor a tag. Though for the design they may point to hash (#) link.
    • In the main tag wrapper, you're using sections for dividing the content but you have given a class of wrappers__article. This is kind of conflicting. You could either change the class-name or use article tags for separating the content. I would suggest using article tags.
    • Since predominantly there are only text content inside the homepage that relate to being a news-homepage, there is no need for using an aside tag here. It could simply be another section.
    • Rather than using an empty div, you could give a border-bottom to the children of the New section.
    • The headings inside the <h3> tags are links to other articles, they should be in anchor tags.
    • The content in the bottom of the page are really just blog link cards. They should not be in the footer since they are not navigation links which mostly appear in the footers.
    • Here too, you can use anchor tags inside the headings.

    UI:

    • The desktop ui looks really good. There is somewhat of horizontal scrolling which appears, you could remove that.
    • I can see a background color (gray) on each of the navigation links but could not find anything inside the inspector.
    • The hover states work perfectly fine.
    • The logo should be a link to the homepage.
    • In small screen sizes it also looks good and the overlay menu also works fine.
    • However, I can scroll the page even when the menu is open on mobile screen. It should not be scrollable since the menu opened is in focus.
    • The keyboard navigation could be fixed. Currently it does not focus on all the links on the page.
    • Same goes for mobile screens. The keyboard navigation go over the same order even when the menu is open which it should not do.

    That's all! Great going and best of luck 🤩🤞

    Marked as helpful
  • Adesh Katiya•420
    @adeysh

    Hi there! Your solution looks exactly like the design. Great implementation!

    Here's my feeback for UI and code:

    • The first name and last name field is accepting numbers as input. You could add constraints there.

    • Since you have hover effects for border on every field. I see that it is not there on the radio buttons. You could add for them as well. And on the consent checkbox too.

    • On checking the checkbox since it becomes active. I get an outline which looks unnecessary. You could remove that.

    • There is no padding on the form for mobile screen sizes.

    • On the email address field, if after putting an invalid email address i remove it and submit the form. It doesn't change the error message to 'This field is required' since the field is now empty.

    • The HTML markup looks great.

    • I am not sure why but I can use autocomplete in the text form fields even though you have used autocomplete="off" on the inputs.

    • I would suggest you to use required attribute instead of aria-required="true" since all the fields in the form are standard fields so it would be helpful for screen readers as well.

    • Also I think since all the fields are already 'required' fields. you need to refactor the if/else statements for validating them.

    • You would not need these: let isValid = isRequired ? isValidEmail : isEmpty ? true : isValidEmail; let isValid = isRequired ? isValidText : isEmpty ? true : isValidText; let isValid = isRequired ? checkBox.checked : true; and let isValid = isRequired ? checkedCount !== 2 : true; - here instead of using the checkbox unchecked count. you could simply check for a checked checkbox using

    let isAnyChecked = Array.from(radioInput).some(el => el.checked);
let isValid = isRequired ? isAnyChecked : true;

    That's all I could provide as feedback. Amazing work here that you have done! best of luck 😇🤞

    Marked as helpful
  • P
    RF13•510
    @rf1303
    What are you most proud of, and what would you do differently next time?

    Continue to make challenges and to practice and improve.

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

    the opening and closing of the accord and the icon on the right side I solved it by searching for examples in freecodecamp and others on the web.

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

    **Any improvement you can say is welcome.

    HTML CSS SCSS Javascript Mobile firts bem

    #bem#sass/scss
    1
    Adesh Katiya•420
    @adeysh

    Hi There! Your solution visually looks very close to the design. congrats for that. It's keyboard accessible too.

    Looking at your code:

    • Your html is semantic. Also good use of <details> and <summary> tag.
    • Its responsive at the defined screen sizes but breaks at some points in between.
    • I see that you have made a lot of mixins but have not used them. You can remove the unused items because i can see only one mixin called tgSize that you have used.

    Nice going!!

    Marked as helpful
  • Sergio Eduardo Castro Ceballos•350
    @SergioCasCeb
    What are you most proud of, and what would you do differently next time?

    I think what I'm most proud of is that I tackled this little challenge using Angular and TypeScript, technologies I'm still getting used to. I'm also really happy with how I approached accessibility: I made sure to include ARIA labels, proper keyboard interactions, and gave users the option to go back either by clicking or just waiting, which adds an extra layer of accessibility.

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

    Nothing in particular, it was a nice quick challenge.

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

    Nothing in particular, but constructive criticism is always appreciated. :D

    Responsive Interactive Rating Component

    #accessibility#angular#bem#sass/scss#typescript
    1
    Adesh Katiya•420
    @adeysh

    Hi, Sergio, This looks great!

    Although I am not familiar with js frameworks. I can still see you have applied full accessibility requirements.

    Here's what I noticed:

    • The other radio buttons are not tabable except for the first one.
    • There's no error message that is shown to the user if form is submitted empty (without selecting any option)

    Just this much. Best of luck for your future projects 🤞

  • Adesh Katiya•420
    @adeysh

    Hey there! kudos for working out building the app. It looks good and very close to the provided design. However I don't think the app is currently working since it is not changing the text on the app.

    • Possible reason being your usage of template literals in the code :
    if (totalBill !== 0 && tip !== 0 && numberOfPeople !== 0){
    tipAmountPerPerson.innerText = `$${tipPerPerson}`;
    totalAmountPerPerson.innerText = `$${totalPerPerson}`;
    resetBtn.disabled = false;
  } else {
    tipAmountPerPerson.innerText = `$${0}`;
    totalAmountPerPerson.innerText = `$${0}`;
  }

    you're using $$ here!

    • here too:
    resetBtn.addEventListener('click', () => {
  totalBillInput.value = '';
  removeBtnActive();
  totalPeopleInput.value = '';
  tipAmountPerPerson.innerText = `$${0}`;
  totalAmountPerPerson.innerText = `$${0}`;
});

document.addEventListener('DOMContentLoaded', () => {
  tipAmountPerPerson.innerText = `$${tipPerPerson}`;
  totalAmountPerPerson.innerText = `$${totalPerPerson}`;

});

    your input validation looks good otherwise. Nice working! another thing would be if you're using keypress events when you want the user to enter any values you should tell it to them with a note. That would be good UX.

    Marked as helpful
View more comments