Wow, this one was a real challenge. There were a lot of different parts to the JavaScript, that each took me a fair amount of time. And it feels like the kind of solution that I need to revisit and clean up and refactor. I'll take a breath first, and then try to come back to it with fresh eyes to see all the ways it can be improved.
I am happy with the conformity to the challenge design.
What challenges did you encounter, and how did you overcome them?Animating the nav menu gave me more trouble than it should have. But by stepping away from it for a break, I was able to clear my head so that the solution could present itself.
What specific areas of your project would you like help with?I am always grateful for any tips/suggestions on how to improve the quality of my code. Thanks!
Everything works really well, and your solution matches the design perfectly. Well done! The only issue I found is that the screen reader is not reading the success message. Keep up the hard work!
I'm happy with the amount of time I spent on this project, and that I was able to finish it in a few hours. Originally I made the faq container using position: absolute, and I next time I would keep the container in the flow of the layout and center it so I didn't have to worry about the position of the footer.
What challenges did you encounter, and how did you overcome them?The biggest struggle I had was getting the plus and minus icons toggle to function correctly, but breaking it down and getting it to work on one and expanding helped me deal with the problem on hand and fix it relatively quickly without getting confused or writing too much code.
What specific areas of your project would you like help with?Any feedback is welcome! Overall, I'm pretty happy with the result.
Good job! However, you are missing some details, such as the pointer to show that it is clickable. Additionally, the answers are not accessible with a screen reader
Great job! Everything looks good! When you use type="module", the browser automatically defers script loading until the HTML document is fully parsed. Thus, there’s no need to specify defer again.
i'm happy to use a function to call other function and i'm happy to make use of forEach to loop through a object array it's not easy to handle it at first this app is quite interactive and i've learnt a lot during the process
What challenges did you encounter, and how did you overcome them?it took me a while to figure out how to use forEach to loop through an object array and finally achieve what i plan to
Well done, nice logic, you just missed the red alert when people = 0. I saw you managed it in a way that it will always be at least 1 but it would be good for your CSS skills to try it as in the challenge. Keep up the hard work!
Well done! Maybe I would just add another breaking point to make it more responsive, but nice job!
I learned how to manage forms
What specific areas of your project would you like help with?anything to make my skills and code better will be appreciated
Great job! Just double-check the responsiveness, as it doesn't fit properly on the tablet.
I think i am having trouble with images all the time. Couldn't adjust text section height like %70 of the card because img height didn't reduce ( height = 100% wasn't there at start ) Tried flex .3, max-height etc. Also couldn't find how to crop img either. Maybe overflow = hidden would work normally but here i used flex.
Set the image container to have overflow: hidden, and the image should be styled with object-fit: cover to maintain the aspect ratio while filling the space: .article-preview__image { overflow: hidden; height: 200px; }
.article-preview__image img { width: 100%; height: 100%; object-fit: cover; } In this project I used SO MUCH the dev tools, don't be afraid to make mistakes and keep improving!
When using larger sizes, adding margin to the layout instead of the individual card will prevent Daniel's margin-top from misaligning the card.
.Daniel { margin-top: 5rem;}
Figuring out the Grid was surprisingly easy. Using the span element to help the boxes move throughout the grid was a very nice thing to know. I'd see if I could condense the amount of grid elements used next time.
What challenges did you encounter, and how did you overcome them?Understanding how to place the images was alittle tough. I overcame the problem by messing around with the position element and messing around with size.
What specific areas of your project would you like help with?I would like to know how to format text better, since I didn't exactly format it as presented.
Well done! Maybe just add some margin-inline to don't get the cards stuck to the edges.
