Event delegation.
I can help with building sass structure using new features like @use, build @mixins and place grid items as you wish.
I am proud to have completed this project, even though I still need to make some adjustments to my code, like updating certain HTML elements, so I can use pure functions in the script.
Hi @Coder-Liz, I’m really impressed with how well you matched the size of this component—it aligns perfectly with the actual design!
Regarding functionality, there’s still room for improvement. Instead of adding a border to the Custom Tips field, consider styling its outline to prevent the jumping and resizing of other components. Also, try rethinking the logic behind the event listeners. Right now, the calculation starts immediately after the first input. Instead, you could implement a central function that orchestrates the other functions in a more structured and appropriate manner.
You're doing a fantastic job—keep it up! 🚀
I spent more time than I should deciding how much of the page should be dynamic and how best to go about it 😅, ultimately I decided to create the boilerplate for each card and then fill them dynamically.
What specific areas of your project would you like help with?For the card's active state, on hover the color becomes lighter also on the ellipse hover the card retains its original color (basically the card isn't in a hover state) and only the ellipse is in a hover state, I ended up using javascript to toggle a class on the card to handle this, I'm wondering if there's a better approach.
Also, I'm open to any other suggestions.
Thank you for your time :)))
Hi there! Your solution looks fantastic. The layout adapts well across different screen sizes and stays true to the design. One suggestion would be to explore using JavaScript to handle the hover states of the activity boxes for more dynamic interactions. Keep coding, stay curious, and keep pushing your skills forward!
Was nice to figure out how the parts connect and deciding how to approach this. I would probably try using a framework like Vue.Js next time.
What challenges did you encounter, and how did you overcome them?The freecodecamp documentation on this is not great. Its missing key stages you need to make it work. Next time i would find a different solution online somewhere else.
What specific areas of your project would you like help with?Is there a cleaner way to do it?
Hi, this is a great solution, especially in how you handle the success message appearance. I really like your idea of using the dialog element to display the message. The overall implementation closely resembles the design and functions as intended. Perhaps some minor adjustments between breakpoints could further enhance the layout's responsiveness. Keep up the excellent work!
Hi! I’m excited to review your solution—it’s a very interesting and creative approach to tackling this challenge. I mean mixing of gird and flex containers.
The article preview card looks impressively close to the design. One suggestion would be to position the share popup outside the card. This way, you could use overflow: hidden on the entire card to ensure all the corners remain perfectly rounded.
Keep up the great work, and stay motivated!
This one took me a while longer but I finished it and was able to get pretty close to the design. Re-learning and applying these concepts have been fun.
What challenges did you encounter, and how did you overcome them?This one was tough. From choosing the correct displays, positioning, text placement, it was all a challenge. The 21 day course that was suggested before this learning path has helped alot.
What specific areas of your project would you like help with?Specially on the media query I could not get any space on the bottom of the page without messing up the entire layout. If someone could help me with that, I would appreciate it.
Hi, great solution overall! I particularly appreciated the clever trick of using an image for the double quotation mark instead of relying solely on font families and pseudo-elements. That approach could save a lot of time—something I personally spent quite a bit of effort on.
Your HTML is well-structured, and the styling is clean and effective. However, I’d suggest enhancing the layout a bit further by adding some spacing on the sides to improve the overall balance. Additionally, consider introducing a breakpoint in the middle of the responsive design. For example, you could switch to a two-column grid at that point, rather than jumping straight to a single-column layout.
Keep up the great work—your code is a pleasure to review.
Hi! I’m really impressed with your implementation, especially the grid/column system. That’s something I’ve been trying to achieve myself but haven’t quite nailed yet—great job!
If I may, I’d suggest adding an intermediate breakpoint in your media queries where the grid transitions first to two columns before switching to a single-column layout. It could enhance responsiveness and make the design even more polished.
Keep up the fantastic work, and have fun tackling your next challenges!
