Skip to content
OverviewSolutions
51
Comments
5

Aya Saeed

@Aya-Saeed261Egypt1,020 points

A self-taught frontend developer trying everyday to be a little bit better.

I’m currently learning...

React

Latest solutions

View more solutions

Latest comments

  • Aya Saeed•1,020
    @Aya-Saeed261

    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
  • Aya Saeed•1,020
    @Aya-Saeed261

    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
  • Aya Saeed•1,020
    @Aya-Saeed261

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

  • Aya Saeed•1,020
    @Aya-Saeed261

    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.

  • Aya Saeed•1,020
    @Aya-Saeed261

    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.