Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
16
Comments
16

Muhamad Rukhul Kirom

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

  • E-Commerce Product Page

    #pure-css#accessibility

    Muhamad Rukhul Kirom•380
    Submitted about 2 months ago

    I would appreciate feedback on the structure and readability of my JavaScript code—particularly how I handled event listeners and updated the DOM for features like the image gallery, cart functionality, and quantity counter. Are there more efficient or scalable ways I could have approached these interactions?

    Additionally, I’d like input on my responsive design implementation. While I used media queries and tested different screen sizes, I’m not entirely confident that all elements are perfectly optimized across devices. Suggestions on improving mobile layout or accessibility (e.g., semantic HTML or ARIA usage) would be especially helpful.

    Lastly, if there are any best practices I'm missing—like performance optimizations, accessibility enhancements, or general frontend architecture tips—I’d love to hear them.


    1 comment
  • News Homepage

    #sass/scss#accessibility

    Muhamad Rukhul Kirom•380
    Submitted 2 months ago
    • Responsive design improvements: Although the project is responsive, I feel there could be more efficient or modern techniques to make it even smoother, especially for complex breakpoints.

    • Best practices in CSS organization: I’d like tips on how to better structure my CSS for larger projects — for example, strategies for scalability and maintainability.

    • Performance optimization: Guidance on how to optimize page load speeds, like better image handling, using lazy loading, or reducing CSS and JavaScript file sizes.


    1 comment
  • Contact Form

    #accessibility#pure-css#van-js

    Muhamad Rukhul Kirom•380
    Submitted 4 months ago
    1. Is my validation logic structured efficiently, or is there a better way to organize it?

    2. Would breaking down validateGroup into separate functions for each input type improve readability and maintainability?

    3. Are there additional ways to improve accessibility, particularly for screen reader users?

    4. Are there any optimizations I can apply to improve form performance, especially for handling validation?


    1 comment
  • FAQ Accordion

    #accessibility#pure-css

    Muhamad Rukhul Kirom•380
    Submitted 4 months ago
    1. I’ve implemented aria-expanded and aria-hidden for screen readers, but are there any improvements I could make?

    2. Is my keyboard navigation implementation (handling Enter and Space keys) the best approach, or is there a more efficient way?

    3. Right now, I’m using max-height with scrollHeight for the animation. Is there a better way to make the expanding/collapsing effect smoother?


    1 comment
  • Interactive Rating Component

    #accessibility#pure-css#web-components

    Muhamad Rukhul Kirom•380
    Submitted 4 months ago
    1. Are there any redundant lines of code in my JavaScript that could be optimized?

    2. Does my CSS structure follow best practices? Could I improve it for better readability or maintainability?

    3. Is there a better way to handle rating selection without using forEach to remove the active class from all buttons?


    1 comment
  • Tip Calulator App

    #accessibility#pure-css

    Muhamad Rukhul Kirom•380
    Submitted 4 months ago

    I would appreciate feedback on a few specific areas of my project. First, I’d like to know if there’s a more efficient way to handle input validation, especially for preventing multiple decimal points and ensuring correct number formatting. Right now, I’m using a regex-based approach to sanitize inputs, but I wonder if there’s a more optimized or best-practice method for handling numeric inputs dynamically. Second, I’d love to get suggestions on improving accessibility, particularly in making error messages and result updates more screen-reader-friendly. Are there any recommended ARIA attributes or techniques I should implement to enhance usability for visually impaired users?


    1 comment
View more solutions

Latest comments

  • AymaneOnline•390
    @AymaneOnline
    Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    The overall challenge was a nice experience and a good practice for my HTML/CSS/JAVASCRIPT and Sass skills. One I should do next time is not to do a long pause while working on that challenge because the last time when I came to finish the solution I didn't know where to start.

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

    The biggest difficulty was with JavaScript, specifically with the lightbox carousel. I wanted to show the clicked image instead of showing the first one by default. Of course I used AI to find the solution for that one.

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

    I would appreciate any feedback guys!

    ecommerce-product-page-main

    #accessibility#sass/scss#lighthouse
    1
    Muhamad Rukhul Kirom•380
    @rukhulkirom
    Posted about 2 months ago

    Hello there👋. Good job on completing the challenge!

    I have some suggestions about your code that might interest you.

    1. Lightbox Feature : The challenge specifies a lightbox functionality when clicking the main product image. Currently, this feature seems absent. Implementing a modal that displays the enlarged image with navigation controls would enhance user experience.

    2. Accessibility Enhancements :

    • Alt Text: Ensure all images have descriptive alt attributes for screen readers.

    • Keyboard Navigation: Verify that all interactive elements are accessible via keyboard navigation.

  • nodegreecode•380
    @nodegreecode
    Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    In my opinion, the result is very close to the original design. However, next time I would focus on improving the accuracy of the text formatting and the sizing of the boxes. Keyboard navigation also needs some enhancements. That said, I’m generally happy with this solution. It gave me a great opportunity to practice accessibility guidelines and work on aligning my solution with them, as well as using CSS Grid more effectively.

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

    In this project, the most challenging part was building the mobile navigation. I first had to understand how the open and openModal functions work, and how they affect the rest of the layout. For example, when a dialog element is opened in modal mode, it blocks interaction with the rest of the page—good to know for future projects!

    Responsive, accessible news homepage with Grid and Sass

    #sass/scss#accessibility
    1
    Muhamad Rukhul Kirom•380
    @rukhulkirom
    Posted 2 months ago

    Hello there👋. Good job on completing challenge!

    I have a suggestion about your code that might interest you.

    • Your <nav> is wrapped inside <header>, which is good — but make sure the <ul> for the nav links has a role="list" if you want to polish accessibility even more.

    I hope you find it useful! Above all, the solution you submitted is great!

    Happy Coding!

  • Chame "Guigui-chan"•290
    @Guilherme-Porto-Silva
    Submitted 4 months ago
    What challenges did you encounter, and how did you overcome them?

    I had trouble setting up the border radius, the containers would aways look distorted. Overcame it by uploading the desktop-design.jpeg on Google Gemini and asking it to write a list of values I should put. It gave me a smaller and a less small value for each container, so, I decided to put the less small ones in the media querie. The values it gave were like "2px", I was previously using like "5%", so, no wander why the containers were looking like skate parks.

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

    Reading this learning path articles was the very first time I came across the name "W.C.A.G.", so, I am as new I as could possibly be in this world. If anyone knows aria proprietys I should have used and did not, tell me, and etc.

    submit a message using pure-css

    #pure-css
    1
    Muhamad Rukhul Kirom•380
    @rukhulkirom
    Posted 4 months ago

    Hello there 👋. Good job on completing the challenge!

    I have some suggestions about your code that might interest you.

    1. Improve Label Association

    Your labels don't have for attributes pointing to inputs properly. Example:

    <input type="radio" name="QueryType" id="GeneralEnquiryInput">
    <label for="GeneralEnquiryInput">General Enquiry</label>
    
    1. Your fieldset doesn't have a legend, making it less accessible for screen readers.
    <fieldset>
      <legend>Query Type</legend>
      <label for="GeneralEnquiryInput">
        <input type="radio" name="QueryType" id="GeneralEnquiryInput"> General Enquiry
      </label>
      <label for="SupportRequestInput">
        <input type="radio" name="QueryType" id="SupportRequestInput"> Support Request
      </label>
    </fieldset>
    

    I hope you find it useful! Above all, the solution you submitted is great!

    Happy coding!

    Marked as helpful
  • Mirna Andrišić•540
    @mandrisic
    Submitted 4 months ago

    FAQ accordion

    #accessibility
    1
    Muhamad Rukhul Kirom•380
    @rukhulkirom
    Posted 4 months ago

    Hello there👋. Good job on completing the challenge!

    I have some suggestions about your code that might interest you.

    1. Enhance Accessibility
    • Add aria-expanded for better screen reader support : <summary aria-expanded="false">What is Frontend Mentor?</summary>

    • Update via JavaScript when opened.

    1. Improve Mobile Spacing

    Add more padding to summary for better tap targets on mobile.

    summary {
        padding: 1em;
    }
    
    Marked as helpful
  • P
    Josh Kahlbaugh•540
    @Joshk7
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I solved this challenge by using radio inputs and indicating which rating is selected through labels associated with them.

    <input class="radio" id="one" name="rating" type="radio" value="1" />
    <label for="one">1</label>
    
    .radio:hover + label,
    .radio:focus + label {
        background: var(--pure-white);
        color: var(--dark-blue);
    }
    
    .radio:checked + label {
        background: var(--orange);
        color: var(--dark-blue);
        font-weight: bold;
    }
    

    However, there could be better approaches to this.

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

    The biggest problem was that I didn't set initial background color for the radio buttons so whenever a button was selected, the orange checked background color would stay. This was an easy fix, I just had to set initial background color.

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

    I'd like help with accessibility since I'm doing this challenge as part of the Accessibility Pathway. Any tips on how to make this solution more accessible would be appreciated!

    Interactive Rating with Error Message 🚨

    #pure-css
    1
    Muhamad Rukhul Kirom•380
    @rukhulkirom
    Posted 4 months ago

    Hello there👋. Good job on completing the challenge!

    I have some suggestions about your code that might interest you.

    1. Improve Keyboard Accessibility
    • Currently, you handle keypress (Enter key) on radio buttons, but the standard event for accessibility is keydown.

    • Solution: Change the event from keypress to keydown:

    radioButtons.forEach((button) => {
        button.addEventListener("keydown", handleRating);
    });
    

    I hope you find it useful! Above all, the solution you submitted is great!

    Happy coding!

    Marked as helpful
  • P
    Josh Kahlbaugh•540
    @Joshk7
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I liked having a central event handler that fires whenever any input is changed for the form.

    I would possibly change the radio buttons to just be normal buttons because the main form logic only depends on the state of the labels instead of the actual radio button.

    const handleRadioClick = (e) => {
        resetCustom();
        resetPercentButtons();
        unClicked = false;
        e.target.classList.toggle("clicked");
        disableButton();
    };
    
    What challenges did you encounter, and how did you overcome them?

    A big challenge was trying to find the correct event to attach an event handler to for the form.

    Finally, I added this:

    tipForm.addEventListener("input", handleFormInput);
    
    What specific areas of your project would you like help with?

    I'd like help specifically with how I could restructure the html for the main form. Additionally, any tips on better practices for writing JavaScript would be appreciated!

    Responsive Tip Calculator 👍

    #pure-css
    1
    Muhamad Rukhul Kirom•380
    @rukhulkirom
    Posted 4 months ago

    Hello there👋. Good job on completing the challenge!

    I have some suggestions about your code that might interest you.

    I think there is a small bug in the total calculation, where the tip is not added to the total per person. Currently it just splits the bill per person, but does not add the tip.

    Change the calculateTotal function from:

    const calculateTotal = (bill, people) => {
        const total = bill / people;
        return total.toFixed(2);
    };
    

    to:

    const calculateTotal = (bill, percentage = 0, people) => {
        const tip = (bill * percentage) / people;
        const total = (bill / people) + parseFloat(tip);
        return total.toFixed(2);
    };
    

    Then in handleFormInput, change the call:

    const totalAmount = calculateTotal(bill, percent, people);

    Marked as helpful
View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub