All comments

• 

  Konrad• 370

  @konradbaczyk

  Submitted about 1 month 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

  31

  

  Fatima Abid• 110

  @fatemzh

  Posted 29 days 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

  This comment has received 1 replyShow
• 

  P

  Moa Davou• 310

  @moadavou

  Submitted about 1 month 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

  20

  

  Fatima Abid• 110

  @fatemzh

  Posted about 1 month 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

  This comment has received 7 repliesShow
• 

  P

  Ralph Virtucio• 610

  @ralphvirtucio

  Submitted about 2 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

  20

  

  Fatima Abid• 110

  @fatemzh

  Posted about 2 months ago

  Great solution, keep up with the good work!

  1
• 

  Esmee29• 40

  @Esmee29

  Submitted 2 months ago

  

  Recipe Page

  1

  20

  

  Fatima Abid• 110

  @fatemzh

  Posted about 2 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
• 

  Vinicius Rondini• 40

  @VRondini

  Submitted 2 months ago

  

  Social_links_profile

  1

  40

  

  Fatima Abid• 110

  @fatemzh

  Posted 2 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
• 

  Muhammad1917• 40

  @Muhammad1917

  Submitted 2 months ago

  

  html ,css with sass

  2

  20

  

  Fatima Abid• 110

  @fatemzh

  Posted 2 months ago

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

  0
• 

  P

  Ariel• 130

  @ArielBrdah

  Submitted 10 months ago

  

  sass, bem

  1

  40

  

  Fatima Abid• 110

  @fatemzh

  Posted 2 months ago

  • 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