diff --git a/18_projects/18_projects/.gitignore b/18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/.gitignore similarity index 100% rename from 18_projects/18_projects/.gitignore rename to 18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/.gitignore diff --git a/18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/README.md b/18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/README.md new file mode 100644 index 0000000000..0703e8db22 --- /dev/null +++ b/18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/README.md @@ -0,0 +1,5 @@ +# 30 Days of React App: Day 19 + +In the project directory, you can run to start the project + +### `npm start` diff --git a/18_projects/18_projects/package.json b/18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/package.json similarity index 100% rename from 18_projects/18_projects/package.json rename to 18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/package.json diff --git a/18_projects/18_projects/public/index.html b/18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/public/index.html similarity index 100% rename from 18_projects/18_projects/public/index.html rename to 18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/public/index.html diff --git a/18_projects/18_projects/src/data/countries.js b/18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/data/countries.js similarity index 100% rename from 18_projects/18_projects/src/data/countries.js rename to 18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/data/countries.js diff --git a/18_projects/18_projects/src/data/ten_most_highest_populations.js b/18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/data/ten_most_highest_populations.js similarity index 100% rename from 18_projects/18_projects/src/data/ten_most_highest_populations.js rename to 18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/data/ten_most_highest_populations.js diff --git a/18_projects/18_projects/src/images/asabeneh.jpg b/18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/images/asabeneh.jpg similarity index 100% rename from 18_projects/18_projects/src/images/asabeneh.jpg rename to 18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/images/asabeneh.jpg diff --git a/18_projects/18_projects/src/images/css_logo.png b/18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/images/css_logo.png similarity index 100% rename from 18_projects/18_projects/src/images/css_logo.png rename to 18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/images/css_logo.png diff --git a/18_projects/18_projects/src/images/html_logo.png b/18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/images/html_logo.png similarity index 100% rename from 18_projects/18_projects/src/images/html_logo.png rename to 18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/images/html_logo.png diff --git a/18_projects/18_projects/src/images/js_logo.png b/18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/images/js_logo.png similarity index 100% rename from 18_projects/18_projects/src/images/js_logo.png rename to 18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/images/js_logo.png diff --git a/18_projects/18_projects/src/images/react_logo.png b/18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/images/react_logo.png similarity index 100% rename from 18_projects/18_projects/src/images/react_logo.png rename to 18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/images/react_logo.png diff --git a/18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/index.js b/18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/index.js new file mode 100644 index 0000000000..393f764895 --- /dev/null +++ b/18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/index.js @@ -0,0 +1,84 @@ +import React, { Component } from 'react' +import ReactDOM from 'react-dom' +import axios from 'axios' + +const Country = ({ + country: { name, capital, flag, languages, population, currency }, +}) => { + const formatedCapital = + capital.length > 0 ? ( + <> + Capital: + {capital} + > + ) : ( + '' + ) + const formatLanguage = languages.length > 1 ? `Languages` : `Language` + console.log(languages) + return ( +
{formatedCapital}
++ {formatLanguage}: + {languages.map((language) => language.name).join(', ')} +
++ Population: + {population.toLocaleString()} +
++ Currency: + {currency} +
+There are {this.state.data.length} countries in the api
+{formatedCapital}
++ {formatLanguage}: + {languages.map((language) => language.name).join(', ')} +
++ Population: + {population.toLocaleString()} +
++ Currency: + {currency} +
+There are {this.state.data.length} countries in the api
+{formatedCapital}
++ {formatLanguage}: + {languages.map((language) => language.name).join(', ')} +
++ Population: + {population.toLocaleString()} +
++ Currency: + {currency} +
+There are {this.state.data.length} countries in the api
+{formatedCapital}
++ {formatLanguage}: + {languages.map((language) => language.name).join(', ')} +
++ Population: + {population.toLocaleString()} +
++ Currency: + {currency} +
+There are {this.state.data.length} countries in the api
+{formatedCapital}
++ {formatLanguage}: + {languages.map((language) => language.name).join(', ')} +
++ Population: + {population.toLocaleString()} +
++ Currency: + {currency} +
+There are {this.state.data.length} countries in the api
+{formatedCapital}
++ {formatLanguage}: + {languages.map((language) => language.name).join(', ')} +
++ Population: + {population.toLocaleString()} +
++ Currency: + {currency} +
+There are {this.state.data.length} countries in the api
+{level}
-- Author: {firstName} {lastName} -
- {duration && ( - <> - {' '} - {duration}{description}
-Please login in to access the challenges
- )} - -Please login in
} - -{formatedCapital}
++ {formatLanguage}: + {languages.map((language) => language.name).join(', ')} +
++ Population: + {population.toLocaleString()} +
++ Currency: + {currency} +
+There are {this.state.data.length} countries in the api
+