UPDATE: thank you for the help, It fixed the issues and answered my questions :)
// I struggled to use the border: radius to the top of the 'card' element. How can I fix that?
I learned that I need to pay attention to the parent-child element.
Can someone help me how to insert a screenshot into the README file?
Thanks for the feedback! :)
Hi, i think you only need to set border radius for the top container, in this case is the order--wrapper. You can do something like this {border-radius: 2rem; overflow: hidden}. The overflow: hidden is to keep the image from overflowing the container, and help to reveal the top corners. To insert images to readme file you could do a quick search about insert images in markdown.
Hope it helps.
Jim
I'm not sure what to know or if I did everything right. If there are any issues please let me know because this is my first time uploading on here and first using gitbut pages. I hope everything went well.
Hi Anthony, you can host your site with Netlify or Vercel so others can view your live site. And when submit your solution you will have two links. One for your github repo and one for your live site.
Jim
"The javascript was a bit of a challenge, not gonna lie, but I think I handled it well.
Hi Abraham, nice attempt at this challenge. My suggestion is to put the actions in a separate function (something like clickHandler) to keep your code easier to follow. Also, you might want to have clearer names for your variables. For example, if I quickly scan through your code, it would take me some time to figure out what is 'cls'. Hope it helps. Jim
Is it still possible to still improve on the javascript.
Nice site 4scope!
A feature i think you can implement is that when one section is open, the rest is closed. This would give you more chance to practice your JS.
Jim
Do you notice an error or have any recommendations regarding CSS styles?
Do you have any suggestions regarding the repository or the solution?
What aspect do you think should be improved for future occasions?
Do you think that the js functionality has a correct approach?
Hi CMP,
That's a smart attempt to swap out the icon in your JS. A thing that i notice is that you also have an id on your icon which is the same as the id you set for the details element. I think id should be unique for elements ( two elements shouldn't have the same id). I believe that you can remove the id on your icons and the app still works as you expected.
Jim
The logic of this challenge was complicated for me. I couldn't make it so that only one of the questions could be open at a time without getting errors. In the end I decided to leave it like that.
Hi Yarcefm, I have just finished this challenge. My solution for keeping only one question open is as below:
Jim
Well, this one took me a while.
Getting that share button to do what it's supposed to was harder than I expected. I'm still not satisfied with the result, but this is as far as I can go with the skills I got so far.
I'm still learning DOM Manipulation and if you have any advice on how I can improve this project, fell free to leave me a comment.
Feedback is appreciated!
Hi Daniel,
Good job on this challenge!
For CSS, in mobile view, I can see a layout shift when I click the Share button so you might want to adjust the styles to fix it.
As with JS, i think you did a good job too. Something to consider is to add a feature that the user can also close the popup when they click outside the popup box.
Jim
Heyy, first Frontend Mentor challenge over here. Satisfied with the result but I guess there is easier and improved code on the community solutions and I can't wait to see it.
Nice first one Maria.
A couple things to consider are:
Jim
Building this project was not easy though it looks simple especially the css section any feedback is welcome
Hi Kiiza,
Nice project :) . In terms of CSS, i think you can remove heigth:100% and width:100% on the body since it's not necessary. You can try to toggle these properties in the devtool to see what changes they make. Also, we should avoid setting a fixed width in general. Like you can set a max-width: 375px on your .card instead of width:375px, it allows room for responsiveness. Same to images, instead of fixed width and height, you could do something like this img {display:block; max-width:100%}. Hope it helps!
Jim
This project is a really good practice for beginners. I learned using flexbox and responsive design. However, I am not for sure my css code is clean or not. Welcome feedbacks!
Nicely done Eric.
I'm a beginner too, so take my words with a grain of salt :). I think in general we should avoid setting a fixed width for image or element. Instead, for the container you could set a max-width, and for the image you could set width: 100% so it take the full width of its parent.
Jim
What would you do differently?
Hi @maryanne4jc
Your project looks nice! The only thing I can think of is that you can try to add the corner only border for individual score to match the design (if you look closely, there are tiny borders shown at the corners of single scores).
Other than that, good work!
Facing issue with responsiveness of the site. Cant make it responsive to mobile. Any suggestions are welcome! Thank you
Hi, some of my suggestions for improvement are:
Link to my github code for this project: https://github.com/JimTK16/results-summary-component
