Skip to content
OverviewSolutions
27
Comments
13

Mohamed Ahmed

@MohamedSharqawiEgypt700 points

I’m Mohamed Ahmed, an 18-year-old engineering student at Zagazig University, Egypt. A self-taught frontend developer, I aim to build a strong foundation in frontend development before specializing in computer engineering and exploring machine learning next year.

I’m currently learning...

Javascript

Latest solutions

View more solutions

Latest comments

  • P
    Anamay•260
    @anamaydev
    What are you most proud of, and what would you do differently next time?

    I'm proud of my ability to quickly create clean, functional layouts

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

    I faced a challenge where the design didn't include a submit button, and with three input fields and five buttons, pressing Enter automatically triggered the first button, as the browser defaulted to type="submit" for buttons without a type attribute. To resolve this, I added type="button" to the buttons. Additionally, managing input from multiple fields was tricky, but I enjoyed the process and found a smooth solution.

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

    I would appreciate feedback on my JavaScript code, particularly regarding clarity, efficiency, and best practices.

    Tip calculator app

    #bem
    1
    Mohamed Ahmed•700
    @MohamedSharqawi

    Hello there,

    Your design looks great! However, I have a few suggestions that could enhance your code:

    1. Effective Use of HTML: Utilizing HTML can significantly reduce the amount of JavaScript code required. For instance, you can use <input type='radio'> for tip buttons to handle button clicks automatically and <button type='reset'> for the reset button to reset form inputs automatically.

    2. Validation of Input Values:

      • The bill and custom values can be fractional, but the custom value must be between 0 and 100, ensuring it is not negative.
      • The number of people cannot be negative.
      • To remove the default browser validation, add the novalidate attribute to the <form> element and implement custom validation using JavaScript.

    3. Calculation of Tip Amount: Ensure that the result for "tip amount per person" is divided by the number of people.

    4. Bonus Tip: You can use the .toggle() method to switch between class names more efficiently. Replace the following code:

      if(data.totalPeople === ''){
  totalPeopleErrorMsg.classList.remove('hidden');
  totalPeople.classList.add('form__input--error');
} else {
  totalPeopleErrorMsg.classList.add('hidden');
  totalPeople.classList.remove('form__input--error');
}

      with:

      totalPeopleErrorMsg.classList.toggle('hidden', !data.totalPeople);
totalPeople.classList.toggle('form__input--error', !data.totalPeople);

      The second attribute of the .toggle() method acts as a condition; if true, the class name is added, and if false, it is removed.

    By adopting these suggestions, you can reduce the amount of JavaScript code and improve the clarity and efficiency of your design.

  • Mohamed Ahmed•700
    @MohamedSharqawi

    Hello there,

    Your code is good, but this isn't the correct way to handle the project. The data should be added programmatically based on the data.json file provided with the challenge.

    You should fetch the data using the fetch() method and dynamically populate the DOM.

    For more details on working with JSON files, check out:
    🔗 Working with JSON

    Or check my solution for this challenge for reference. 🚀

    Marked as helpful
  • Mohamed Ahmed•700
    @MohamedSharqawi

    Hello there,

    Your design looks great! However, I have a few suggestions that could enhance your code:

    1️⃣ Improve HTML Semantics

    It would be more semantic to use a <ul> element for structuring consecutive or adjacent items. In the <div class="list"> element, you have already assigned the list class, so it would be better to wrap all these elements inside a <ul>. This approach will make your code clearer and more semantic.

    Additionally, if you want to simplify your HTML, you can remove the <img> element and replace it with the list-style-image: ; property or use the ::before pseudo-element to insert the image.

    2️⃣ Fix JavaScript Form Submission Issue

    Your JavaScript code is well-written, but I noticed a minor issue. When submitting the form, the <div class="success-page"> does not appear. This happens because the default form submission behavior is only prevented under two specific conditions:

    if (!email.value) {
  errorMsg.textContent = "Email is required.";
  event.preventDefault();
} else if (!email.checkValidity()) {
  errorMsg.textContent = "Please enter a valid email address.";
  event.preventDefault();
}

    To ensure the default action is always prevented, you should move event.preventDefault(); outside the conditional blocks. This way, the form submission behavior is consistently controlled, regardless of whether there is an error.

    Marked as helpful
  • Mohamed Ahmed•700
    @MohamedSharqawi

    Great job on this design. It's simple but you paid attention to small details like making the article shareable with just a keyboard. I noticed one tiny thing - the share button moves a little when clicked. Other than that, it's perfect.

  • OffixialTrust•160
    @OffixialTrust
    What are you most proud of, and what would you do differently next time?

    I am proud of how far I’ve come with my coding skills. What I’ll do differently next time: When adding content to the innerHTML of a div, you don’t need a div tag because document.createElement(“div”) already creates the div tag. This really stressed me out.

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

    Like I said, adding a div tag in the innerHTML was bad and debugging it was hell. I rewrote the content and harcoded it in the HTML file and compared it with the innerHTML in JS using chatGPT.

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

    1. Sometimes when I place multiple orders, they may become double/appended twice. I noticed this with “vanilla panna cotta”. It’s sometimes double.

    2. When confirm order is clicked, the order-confirmed box is displayed and the transparent overlay is also displayed blocking any other interaction. Now the problem is this only works on desktop view (>768px), the overlay doesn’t work when body < 768px and I didn’t even alter it on @media query. I even tried to explicitly make it show on the confirm-order event listener, yet no success. How do I fix this?

    Product List With cart

    #sass/scss
    3
    Mohamed Ahmed•700
    @MohamedSharqawi

    I understand the issue you’re referring to. This problem typically occurs when setTimeout is added to the "confirm order" button upon being clicked. If that’s the case, I’ve faced the same challenge before, and the solution is to define a global variable, such as timer. Inside the event listener, you can use clearTimeout(timer) to cancel any existing timeout and then assign the new setTimeout to the timer variable. Here’s how the final code would look:

    let timer;
confirmButton.addEventListener("click", () => {
    clearTimeout(timer); // Clear any existing timeout
    timer = setTimeout(() => {
        // Your logic here
    }, 500); // Set a new timeout
});

    With this approach, if you click the confirm button, clearTimeout(timer) will prevent the previous setTimeout (if it exists) from executing. If no timeout is present, it will proceed with the normal logic inside the setTimeout. 🛠️

    If this is the problem you’re facing, I hope this solution helps! Let me know if it works for you. 😊

  • William Valette•60
    @WilliamValette
    What challenges did you encounter, and how did you overcome them?

    i had trouble with the media queries. i have watched some youtube videos and asked help to Chatgpt

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

    i need to know best way on the responsive

    Connect-réseaux-sociaux

    1
    Mohamed Ahmed•700
    @MohamedSharqawi

    Hello there, to solve the mobile view issue, just add this meta tag in you head element <meta name="viewport" content="width=device-width, initial-scale=1.0"> and here is the reference of Viewport meta

    Marked as helpful
View more comments