Unable to incorporate the drag and drop feature. is there resource that would help me do this, and also be compatible with my solution?
Aya Saeed
@Aya-Saeed261All comments
- @Amaefula-JoelSubmitted about 2 years ago
- @JAHMDSubmitted about 2 years ago
What can I do to improve it and please don't forget to give me your feedback :)
@Aya-Saeed261Posted about 2 years agoHey @JAHMD! congratulations on finishing the challenge 🎉 It looks great and there some features I'm thinking about stealing and using in my solution👀
I have a couple of suggestions:
- Wrap the filter button (mode button and border countries buttons as well) between button tag instead of div tags, this way it will be more semantic and also accessible by keyboard so better accessibility
<button type="button" id="filter-btn">.</button>
- Bad value
Saint Lucia
for attributeid
on elementdiv
: An ID must not contain whitespace.: To fix this problem, replace whitespaces with hyphens.
cardContainer.id = country.name.common.replaceAll(" ", "-");
- Element
p
not allowed as child of elementbutton
in this context: To fix this problem, use a span tag instead of the p tag for the text in the back button.
Hope this helps, keep it up ✌️
Marked as helpful1 - @serfollSubmitted over 2 years ago
So I built this project using Prismic for the backend and
@Aya-Saeed261Posted over 2 years agoGood job!! It looks really really good. Keep up the good work!
1 - @ugochukwuuuSubmitted over 2 years ago
for some strange reason i struggled with making the card centered on the page, so I would very much appreciate it if someone could help me with that
@Aya-Saeed261Posted over 2 years agoHello, @practitionerofsorts! :) congratulations on finishing the challenge! Now to fix the centering issue, wrap the card and the attribution div in a main tag and use flex box :
<main> <card></card> <div class="attribution"></div> </main
body{ display: flex; justify-content: center; align-items:center; }
and to perfectly center the card delete those styles from the card class
transform: translateY(4em); margin-top: 3em;
this will hopefully fix the centering issue and also the landmark accessibility issue by wrapping the whole thing in a main tag, then generate a new report.
0 - @KarimanMedhatSubmitted over 2 years ago
I faced a problem with setting the content in the middle of the page so I want to know if there is a way to make it centered?
@Aya-Saeed261Posted over 2 years agoYou can use flexbox.
parent-of-the-element-to-be-centered { display: flex; justify-content: center; (centers elements horizontally) align-items: center; (centers elements vertically) }
Another solution could be by using the position property.
parent-of-the-element-to-be-centered { position: relative } element-to-be-centered{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
If it's still not clear, google how to center an element in css and you'll find many videos and articles explaining this.
0