Skip to content
OverviewSolutions
7
Comments
7
Fatima Abid
@fatemzh

All comments

  • Konrad•370
    @konradbaczykSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud I was able to fetch data from JSON file. It was my first time to work with that type of file and it doesn't look like professional code for sure, but it works well. Now I want to learn more about fetching data from external sources.

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

    If u know please tell me how I can improve my code in this fragment:

    fetch("./data.json")
	.then((res) => res.json())
	.then((data) => (
	(workCurrentTime.textContent = data[0].timeframes.daily.current),
	(workPreviousTime.textContent = data[0].timeframes.daily.previous),
	(playCurrentTime.textContent = data[1].timeframes.daily.current),
	(playPreviousTime.textContent = data[1].timeframes.daily.previous),
	(studyCurrentTime.textContent = data[2].timeframes.daily.current),
	(studyPreviousTime.textContent = data[2].timeframes.daily.previous),
	(exerciseCurrentTime.textContent = data[3].timeframes.daily.current),
	(exercisePreviousTime.textContent = data[3].timeframes.daily.previous),
	(socjalCurrentTime.textContent = data[4].timeframes.daily.current),
	(socjalPreviousTime.textContent = data[4].timeframes.daily.previous),
	(selfCareCurrentTime.textContent = data[5].timeframes.daily.current),
	(selfCarePreviousTime.textContent = data[5].timeframes.daily.previous)
	)
);

    I didn't know how to use loop or other staff to minimize proces of looking for data.

    Time tracking dashboard - Fetch with JSON file

    1
    Fatima Abid•110
    @fatemzhPosted 3 months ago

    Congratulations on finishing this challenge, also nice personal touch you added to the activities' cards. To optimize your code further with a loop you could consider gathering the elements into an array first:

    const elements = [ { current: workCurrentTime, previous: workPreviousTime }, { current: playCurrentTime, previous: playPreviousTime }, { current: studyCurrentTime, previous: studyPreviousTime }, { current: exerciseCurrentTime, previous: exercisePreviousTime }, { current: socjalCurrentTime, previous: socjalPreviousTime }, { current: selfCareCurrentTime, previous: selfCarePreviousTime } ];

    And then, use a loop to iterate over this array and update each element with the corresponding data:

    elements.forEach((el, index) => { el.current.textContent = data[index].timeframes.daily.current; el.previous.textContent = data[index].timeframes.daily.previous; });

    It's just an idea, hope this helps a bit.

    Marked as helpful
    0
  • Moa Davou•310
    @moadavouSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    This was my first time creating a form from scratch. I learned a lot, including how to create and validate forms, basic form managing in JavaScript, and ARIA attributes that can be good to use with forms.

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

    At first, I tried to create the success message using a simple div and position: absolute. But then I remembered the dialog element. This approach made me write less code due to the functions, included in the dialog element. It also made managing the success message easier.

    I learned that I can use aria-describedby to get screen readers to read error messages and that I need to use aria-required for required form fields.

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

    Any suggestions and comments on how I can improve are welcome!

    Newsletter sign-up form with success message using CUBE CSS & Sass

    1
    Fatima Abid•110
    @fatemzhPosted 3 months ago

    Congrats for making it visually identical ! Your code is well-structured with good practices. You could improve it by using <div> over <section> for better clarity. Also to improve accessibility you could use role="alert". This is a simple project with only one page, maybe having a more synthetic css structure would make the code easier to maintain and more efficient.

    0
  • Ralph Virtucio•670
    @ralphvirtucioSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    What I am most proud of is completing this challenge within the time I set for myself. Although I feel a bit disappointed for overlooking an issue with the CSS, I love how it turned out in the end. :)

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

    The challenge I encountered was setting the top and left values for the disclosure component. I ran into an issue with it and, after debugging, hit a dead-end. This led me to seek help from the Frontend Mentor Discord community. I appreciate the community's quick response to my request for assistance. It turned out that I had overlooked setting position: relative in the parent component. I felt bad for missing that detail, but I'm glad it was resolved.

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

    Any feedback would be much appreciated 😊🧑‍💻☕!!

    Article Preview Component

    1
    Fatima Abid•110
    @fatemzhPosted 4 months ago

    Great solution, keep up with the good work!

    1
  • Fatima Abid•110
    @fatemzhPosted 4 months ago

    Nice work, you're almost done ! Some designs are missing like the bottom borders of the sections, and the light pink background of the preparation time section.

    0
  • Fatima Abid•110
    @fatemzhPosted 4 months ago

    Great solution! The hover effect is very modern and adds a nice touch to the user experience. To further enhance your design, consider adding more margin between the photo and the name to give the layout a bit more breathing room. Additionally, moving the credit to Frontend Mentor to a footer at the bottom of the page would create a more polished and professional look.

    0
  • Fatima Abid•110
    @fatemzhPosted 4 months ago

    Looks nice, could be improved by adding hovers for the link

    0
  • Fatima Abid•110
    @fatemzhPosted 4 months ago

    Feedback on this Solution

    • Semantic HTML: The solution includes well-structured semantic HTML, which enhances readability and accessibility.
    • Accessibility: The work is accessible with good practices implemented. Improvements could focus on further enhancing keyboard navigation and ARIA roles.
    • Responsive Layout: The layout looks good on a range of screen sizes, ensuring a seamless user experience across devices.
    • Code Quality: The code is well-structured, readable, and reusable, adhering to best practices and standards.
    • Design Consistency: The solution matches the design closely. There is more box shadow on the solution compared to the design, but this enhances contrast and improves visual appeal.

    Overall, the work is excellent and aligns well with the challenge requirements.

    0