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

  • Si1entERA 450

    @Si1entERA

    Submitted

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

    This project is not complete, and a second version will be created in the near future.

    NOTE: it wasn't part of the requirement but profile setting card in the profile icon and dark mode switch have been disabled. timer function to remove discount and revert back to the original price has been disabled.

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

    .

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

    .

    P

    @Hekimianz

    Posted

    Hi @Si1entERA, heres my feedback:

    • On the lightbox image slider, clicking the white part of the buttons does not trigger the event listener.

    • The close icon on the lightbox is not visible, nor does it change on hover status.

    Overall good job though!

    0
  • khalagai 300

    @khalagai

    Submitted

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

    Using key presses to navigate the page as well as using ARIA attributes.

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

    -How to toggle the questions independently and use of the keyboard.

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

    Curious to know which other ways this challenge could have been done.

    P

    @Hekimianz

    Posted

    Hi @khalagai!

    Your HTML looks well-organized. Here are a few suggestions to enhance it further:

    • Use of IDs: Instead of using IDs like img0, img1, etc., consider using classes. This will make your code more reusable and less prone to conflicts.

    • Accessibility Improvements:

      • Make sure the alt attributes are descriptive. For example, “plus” could be more descriptive like “expand icon” to help screen readers.
      • Add aria-expanded attributes to the collapsible elements to improve accessibility.
    • Styling with Classes: Move inline styles to CSS. For instance, use a class like hidden to manage visibility.

    • HTML Structure: Consider if you need <hr> elements for visual separation or if they could be replaced with CSS styling.

    • Responsiveness: Your current CSS does not seem to handle larger sizes very well. The container width is fixed at 300px, which might not scale properly on larger screens. Also, the layout may need further adjustments to ensure a responsive design across various desktop sizes.

    0
  • @Shakil-a

    Submitted

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

    Most proud:

    • worked with more JavaScript and refactoring code to be dry, reusable and single responsibility functions
    • making it responsive on all devices

    What I would do differently:

    • work better on the css design and learn how to structure my css files

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

    I didnt face much challenges from this project other than one of the colors are missing from the style guide and so I used a simple grey to replace it.

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

    i would like help on:

    • if there were better ways to refactor my javascipt or structure my html/css
    • any accessibility code I could have implemented ( theres one instance i have left out a alt in the success page svg because its purely for looking good)
    • anything i can improve on in general
    P

    @Hekimianz

    Posted

    Hi @Shakil-a!

    Here's the feedback I have for your project:

    • Button States: Consider adding the active and hover states for the buttons inside the <li> elements to enhance user interaction and visual feedback.
    • Heading Structure: Changing the <h2> to <h1> can help search engines and screen readers better understand the content's structure and hierarchy.
    • Script Loading: Adding the defer attribute to the `
    0
  • P
    Hexerse 460

    @Hexerse

    Submitted

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

    Proud of being able to do multi-pages for the first time. I really need to plan better to generate multipages

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

    I did not know how to do dark mode, how to use local storage for the mode and also use it for the score keeping. I googled.

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

    Please help me check the js code. Also my other pages are not rendering on live site, this is my first time doing multi pages, please advice me how to render the rest.

    I need help on how I could do things a little bit more efficiently. If you think your code is better than mine, just send your repo so I can take a look at it and learn !

    P

    @Hekimianz

    Posted

    Hi! Your app doesn't seem to be working 🤔 When clicking a category it goes to 404 error.

    0
  • P

    @delroscol98

    Submitted

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

    Using ASCII character values to create the password. It'd be interesting to rebuild this project with React.

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

    Password strength was difficult, still don't know if I did it correctly.

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

    Please give suggestions based on Password strength, I'm not sure what algorithm to follow. The logic was doing my head in.

    P

    @Hekimianz

    Posted

    Code works perfectly as intended 😁 Only thing missing from the design is the checkmarks on the checkboxes. Overall great job !

    1
  • P

    @Hekimianz

    Posted

    Good job! Works as intended, design is good and responsive. Only feedback i could give is:

    • The inputs arent being invalid if set to 0
    • You can get rid of the number arrows from the inputs by adding the following CSS:
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    
    input {
      -moz-appearance: textfield;
    }
    

    Overall great job Abdullah! Keep coding 😁

    0
  • P
    Sam Hooker 410

    @35degrees

    Submitted

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

    I'm proud that I came up with some solid data fetch syntax. I'm worried that I used the fetch syntax three times, one for each timeframe. I couldn't think of a way to reduce that to one fetch overall, which maybe can be done on "DOMLoaded" event. I also wasn't thrilled with how many lines of JS was required for each data point and I'm looking for ways to reduce all of those lines to keep it cleaner code.

    P

    @Hekimianz

    Posted

    Overall great job! Works as intended only issues i see are that you are repeating yourself many times throughout your code... The way i made it so that there was only one fetch was to create an object for each filter inside of the fetch like so:

    const dailyData = {};
    const weeklyData = {};
    const monthlyData = {};
    const fetchData = async () => {
      const response = await fetch("./data.json");
      if (!response.ok) {
        console.error("Could not fetch data!");
      }
      const data = await response.json();
    
      data.forEach((elem) => {
        dailyData[elem.title] = elem.timeframes.daily;
        weeklyData[elem.title] = elem.timeframes.weekly;
        monthlyData[elem.title] = elem.timeframes.monthly;
      });
    } 
    

    Im not saying its the correct way, just sharing the way i did it!😁

    Marked as helpful

    0
  • P

    @Hekimianz

    Posted

    Hi! I noticed something regarding your use of media queries that I think could improve the responsiveness of your design.

    • It looks like you used a breakpoint at 768px, but the CSS rules applied at this breakpoint seem to be intended for desktop sizes. Generally, 768px is considered a typical tablet width, and desktop-specific styles are usually applied at higher breakpoints (e.g., 1024px and above).

    To enhance the responsiveness of your design, I recommend using 768px for tablet-specific styles and reserving more extensive layout changes for desktop sizes at a higher breakpoint.

    Also on general styling:

    • The styles applied to the input when a user enters an invalid email persist even after entering a valid one.

    Other then that, great job! JS works perfectly as intended and the design is close to the provided images. Good work 😁

    Marked as helpful

    0
  • P

    @Hekimianz

    Posted

    Great job! Clean.

    0
  • P

    @Godinhoweverson

    Submitted

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

    I'm proud of the final result. However, next time I will focus on adding more comments to my code to improve its organization and readability.

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

    I encountered challenges with responsiveness, particularly with a specific mobile size. I found a solution on Mozilla Developer Network (MDN) that helped me address the issue.

    P

    @Hekimianz

    Posted

    Nice! Only feedback i have is that there are certain points when making smaller, that the first image of all the people sometimes gets unproportionate and also on bigger screens the image cuts off a little, i think its due to the max-width you have set on the main element. But overall looks good, great job!😁

    Marked as helpful

    0