Hello World

Inspiration

With the current situation in the world, I thought it would be great if I could create a project to encourage people to learn about other countries of the world and feel like they are still exploring the world even while quarantined at home.

What it does

The website is simply an interface where a user can select a country of the world, and then details, such as capital, population, area, and flag, pop up. There is also a link to view the country on Google Maps.

How I built it

I built the website using HTML, CSS, and JavaScript. I first make a call to the REST Countries API to retrieve a list of all countries around the world. Then I display the country names in a dropdown for the user to select. When the user selects a country, I make another call to the API to retrieve information about that specifc country and display it.

Challenges I ran into

I had trouble sizing the background images with all the flags. Also, I was stuck trying to design the UI style since I didn't want the text and dropdowns to be lost amongst the colorful background. To help with this issue, I decided to add a lot of contrast (black and white, borders) to make the content stand out.

Accomplishments that I'm proud of

I am proud that I completed a project and became more familiar with how to make API calls and connect Javascript and HTML elements.

What I learned

I learned how to connect Javascript with HTML elements. I also learned how to make API calls and parse the information to display in the HTML.

What's next for Hello World

Since the world is much bigger than planet Earth, I think the next step would be to expand Hello World to include information about various planets in the solar system.

Built With

• css
• html
• javascript
• rest-countries