Figured out how to build the site and quickly wrote the JS file myself
What challenges did you encounter, and how did you overcome them?Adaptive layout. I don't know how, but it looks good.
What specific areas of your project would you like help with?Adaptive layout
You can improve the appearance of the cards at the bottom of the page for the mobile layout. The images should be at the left.
I am proud that i was able to replicate the exact design.
What specific areas of your project would you like help with?i had a problem with replicating the radio inputs, as i had not done that before. I also had a problem with selecting the "checked" state of the radio input in my javascript file. I was able to overcome this challenge with adequate research online, although it took me a while, but i didn't give up.
The two radio inputs can be selected at the same time.
You can avoid this by giving them the same name.
A good solution. The main container is taking up the whole screen, you can minimize it.
A good solution but you might consider meeting the exact design for the hover states on the buttons.
During this project, I gained valuable experience in creating a responsive design that adapts to various screen sizes and implementing interactive features with JavaScript.
Next time I would like to use a CSS preprocessor like Sass to better organize my styles and take advantage of features like nesting and mixins, Implement a more robust JavaScript architecture from the beginning. I would consider using a module pattern or even a small framework like Vue.js to better manage the application state and updates.
What challenges did you encounter, and how did you overcome them?Aligning the activity card icons: Positioning the icons to overlap the card borders while maintaining responsiveness was tricky. I had to do some research on positioning to achieve my outcome.
What specific areas of your project would you like help with?Accessibility: I'm not confident that my solution is fully accessible. I'd appreciate feedback on how to improve keyboard navigation and screen reader compatibility. While I've tested on modern browsers, I'm unsure about compatibility with older browsers. Any tips on ensuring broader compatibility would be helpful.
It is working but you are just toggling classes. You are supposed to use fetch to get the data from the data.json file.
