Skip to content
OverviewSolutions
51
Comments
5
Aya Saeed
@Aya-Saeed261

All comments

  • Aya Saeed•1,020
    @Aya-Saeed261Posted almost 2 years ago

    Hey, Amaefula! congratulations on finishing the challenge🎉

    This article hepled me with the drag and drop, you'll also need this polyfill to enable drag and drop on touch screens.

    Marked as helpful
    0
  • Ahmed Wael•210
    @JAHMDSubmitted almost 2 years ago

    What can I do to improve it and please don't forget to give me your feedback :)

    Rest Countries API

    2
    Aya Saeed•1,020
    @Aya-Saeed261Posted almost 2 years ago

    Hey @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 attribute id on element div: 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 element button 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 helpful
    1
  • Aya Saeed•1,020
    @Aya-Saeed261Posted over 2 years ago

    Good job!! It looks really really good. Keep up the good work!

    1
  • promise•520
    @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

    css flexbox

    2
    Aya Saeed•1,020
    @Aya-Saeed261Posted over 2 years ago

    Hello, @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
  • Aya Saeed•1,020
    @Aya-Saeed261Posted over 2 years ago

    You 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