Skip to content
Submitted almost 2 years ago

search-countries-next.js

Gustavo Dantas•120
@gustavomarim
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...REST Countries API with color theme switcher
  • HTML
  • CSS
  • JS
  • API
4advanced

Design comparison

SolutionDesign

Community feedback

  • fResult•90
    @fResultPosted almost 2 years ago

    For Country interface, array properties should use ...

    1. use the interface name by a single word such as Countries -> Country (let array ([]) say us it is a list)
    2. array or bracket ([]) after the interface name, see below snippet.
    export interface Country {
  name: string;
  nativeName: string;
  population: number;
  region: string;
  subRegion: string;
  capital: string;
  topLevelDomain: string[];
  currencies: Currency[];
  languages: Language[];
  borders?: string[];
  flags: Flags;
}

    Because the [Currency] means only one Currency object contains in the array. (It's not mean multiple Currency objects contains in an array). Sometimes we call [Currency] a tuple.

    Tuple reference: https://www.w3schools.com/typescript/typescript_tuples.php

    Marked as helpful
    0
    Gustavo Dantas•120
    @gustavomarimPosted almost 2 years ago

    @fResult Thank you for your feedback! I will implement the fixes as soon as possible.

    I hadn't thought about it from that point of view. I will definitely take these tips with me over time.

    I apologize if there are any spelling errors in the answer, I'm from Brazil and I'm learning the English language.

    1
  • fResult•90
    @fResultPosted almost 2 years ago

    Hello, your submission looks great. Especially, I like your Select/Options component. You styled the drop-down by yourself, and it made me amazing. :)

    And I have some suggestions to fix it.

    • I see the ERROR about Buttons must have discernible text. It could be fixed by aria-label="Show options". But I recommended don't use this icon as a button, just another tag (maybe <i> or <span>) is enough. (this icon in <Select> is not a landmark, just decorating for people who don't be disabilities.)

    • Fix ERROR <html> element must have a lang attribute by adding lang="en" to <html> tag

    Marked as helpful
    0
    Gustavo Dantas•120
    @gustavomarimPosted almost 2 years ago

    @fResult Thank you very much for your compliment. I confess that it was quite challenging to do this project, since I am a beginner in web development.

    I found many ready-made solutions to make this Select/Options, but I challenged myself to create something from scratch, to understand how the logic of such a component would work.

    I will make the corrections you suggested.

    Thanks again and have a great new year!

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord