Merge 7286f72169 into 09f408a1b7
Rohan Sanjeev Kale
7 months ago
committed by
GitHub
commit
6a01c1dceb
@ -0,0 +1,23 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
@ -0,0 +1,70 @@
|
||||
# Getting Started with Create React App
|
||||
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
|
||||
## Available Scripts
|
||||
|
||||
In the project directory, you can run:
|
||||
|
||||
### `npm start`
|
||||
|
||||
Runs the app in the development mode.\
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
|
||||
|
||||
The page will reload when you make changes.\
|
||||
You may also see any lint errors in the console.
|
||||
|
||||
### `npm test`
|
||||
|
||||
Launches the test runner in the interactive watch mode.\
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
|
||||
### `npm run build`
|
||||
|
||||
Builds the app for production to the `build` folder.\
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
|
||||
The build is minified and the filenames include the hashes.\
|
||||
Your app is ready to be deployed!
|
||||
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
|
||||
### `npm run eject`
|
||||
|
||||
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
|
||||
|
||||
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||
|
||||
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
|
||||
|
||||
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
|
||||
|
||||
## Learn More
|
||||
|
||||
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||
|
||||
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||
|
||||
### Code Splitting
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
|
||||
|
||||
### Analyzing the Bundle Size
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
|
||||
|
||||
### Making a Progressive Web App
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
|
||||
|
||||
### Advanced Configuration
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
|
||||
|
||||
### Deployment
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
|
||||
|
||||
### `npm run build` fails to minify
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,37 @@
|
||||
{
|
||||
"name": "04_day_components_solution",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"cra-template": "1.2.0",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"styled-components": "^6.1.14",
|
||||
"web-vitals": "^4.2.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 9.4 KiB |
@ -0,0 +1,25 @@
|
||||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
@ -0,0 +1,49 @@
|
||||
import logo from './logo.svg';
|
||||
import asabeneh from './asabeneh.jpg'
|
||||
import tick from './tick.png'
|
||||
import styles from'./styles.css';
|
||||
import Hexacolor from './Hexacolor';
|
||||
export default function App () {
|
||||
const image = require('./asabeneh.jpg')
|
||||
const tick = require('./tick.png')
|
||||
const skills = ['HTML', 'CSS', 'JS', 'React',
|
||||
'SaaS', 'Redux','Node','MongoDB', 'Python',
|
||||
'Flask', 'Django', 'NumPy', 'Pandas', 'Data Analysis',
|
||||
'MYSQL', 'GraphQL', 'D3.js', 'Gatsby', 'Docker', 'Heroku',
|
||||
'Git'
|
||||
|
||||
]
|
||||
|
||||
|
||||
return (
|
||||
|
||||
<>
|
||||
|
||||
<img id ="image" src = {image} ></img>
|
||||
<div >
|
||||
|
||||
</div>
|
||||
<div id="name-tag">
|
||||
<h1>Asabeneh Yetayeh</h1>
|
||||
<img id ="tick" src = {tick} ></img>
|
||||
</div>
|
||||
<p>Senior developer</p>
|
||||
<div id="skills">
|
||||
<h2>Skills</h2>
|
||||
|
||||
|
||||
</div>
|
||||
<div id="skills-container">
|
||||
|
||||
{skills.map((_, index) => (
|
||||
<div id ="skill-box">
|
||||
<Hexacolor key={index} skillIndex={index} />
|
||||
</div>
|
||||
))}
|
||||
|
||||
</div>
|
||||
</>
|
||||
|
||||
)}
|
||||
|
||||
|
||||
@ -0,0 +1,8 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import App from './App';
|
||||
|
||||
test('renders learn react link', () => {
|
||||
render(<App />);
|
||||
const linkElement = screen.getByText(/learn react/i);
|
||||
expect(linkElement).toBeInTheDocument();
|
||||
});
|
||||
@ -0,0 +1,27 @@
|
||||
import React from 'react';
|
||||
|
||||
|
||||
const skills = ['HTML', 'CSS', 'JS', 'React',
|
||||
'SaaS', 'Redux','Node','MongoDB', 'Python',
|
||||
'Flask', 'Django', 'NumPy', 'Pandas', 'Data Analysis',
|
||||
'MYSQL', 'GraphQL', 'D3.js', 'Gatsby', 'Docker', 'Heroku',
|
||||
'Git'
|
||||
]
|
||||
|
||||
|
||||
|
||||
|
||||
//repeat elements inside the box
|
||||
//We can use skillIndex as well instead of props keyword
|
||||
export default function Hexacolor ({ props }) {
|
||||
|
||||
|
||||
|
||||
return (
|
||||
|
||||
|
||||
<h2>{skills[props]}</h2>
|
||||
|
||||
)
|
||||
|
||||
}
|
||||
|
After Width: | Height: | Size: 20 KiB |
@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import styles from'./styles.css';
|
||||
|
||||
import App from './App'
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
|
||||
|
||||
|
||||
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
{/* Use map to generate components for all skills */}
|
||||
|
||||
|
||||
|
||||
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
|
||||
reportWebVitals();
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
@ -0,0 +1,13 @@
|
||||
const reportWebVitals = onPerfEntry => {
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
getCLS(onPerfEntry);
|
||||
getFID(onPerfEntry);
|
||||
getFCP(onPerfEntry);
|
||||
getLCP(onPerfEntry);
|
||||
getTTFB(onPerfEntry);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default reportWebVitals;
|
||||
@ -0,0 +1,5 @@
|
||||
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
||||
// allows you to do things like:
|
||||
// expect(element).toHaveTextContent(/react/i)
|
||||
// learn more: https://github.com/testing-library/jest-dom
|
||||
import '@testing-library/jest-dom';
|
||||
@ -0,0 +1,45 @@
|
||||
|
||||
|
||||
#image {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
#tick {
|
||||
margin-top: 30px;
|
||||
padding-left: 5px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
#name-tag{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
#skill-box {
|
||||
background: #9aede6;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-size: 10px;
|
||||
margin: 2px;
|
||||
border-radius: 5px;
|
||||
width: 100px;
|
||||
border: 2px solid black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#skills-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
After Width: | Height: | Size: 6.5 KiB |
@ -0,0 +1,23 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
@ -0,0 +1,70 @@
|
||||
# Getting Started with Create React App
|
||||
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
|
||||
## Available Scripts
|
||||
|
||||
In the project directory, you can run:
|
||||
|
||||
### `npm start`
|
||||
|
||||
Runs the app in the development mode.\
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
|
||||
|
||||
The page will reload when you make changes.\
|
||||
You may also see any lint errors in the console.
|
||||
|
||||
### `npm test`
|
||||
|
||||
Launches the test runner in the interactive watch mode.\
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
|
||||
### `npm run build`
|
||||
|
||||
Builds the app for production to the `build` folder.\
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
|
||||
The build is minified and the filenames include the hashes.\
|
||||
Your app is ready to be deployed!
|
||||
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
|
||||
### `npm run eject`
|
||||
|
||||
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
|
||||
|
||||
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||
|
||||
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
|
||||
|
||||
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
|
||||
|
||||
## Learn More
|
||||
|
||||
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||
|
||||
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||
|
||||
### Code Splitting
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
|
||||
|
||||
### Analyzing the Bundle Size
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
|
||||
|
||||
### Making a Progressive Web App
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
|
||||
|
||||
### Advanced Configuration
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
|
||||
|
||||
### Deployment
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
|
||||
|
||||
### `npm run build` fails to minify
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,40 @@
|
||||
{
|
||||
"name": "06_map_list_keys_solution",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.14.0",
|
||||
"@emotion/styled": "^11.14.0",
|
||||
"@mui/material": "^6.4.1",
|
||||
"@mui/x-charts": "^7.24.1",
|
||||
"cra-template": "1.2.0",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"web-vitals": "^4.2.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 9.4 KiB |
@ -0,0 +1,25 @@
|
||||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
@ -0,0 +1,62 @@
|
||||
|
||||
#game-board-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
#hex-color-board-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 80px;
|
||||
}
|
||||
#hex-box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 37px;
|
||||
height: 37px;
|
||||
border: 1px solid rgb(0, 0, 0);
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
font-size:10px;
|
||||
}
|
||||
|
||||
#green-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: rgb(0, 255, 34);
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 1px solid rgb(0, 0, 0);
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#red-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: rgb(255, 60, 0);
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 1px solid rgb(0, 0, 0);
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#yellow-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: rgb(238, 255, 0);
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 1px solid rgb(0, 0, 0);
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
#chart {
|
||||
margin-left: 50px;
|
||||
}
|
||||
@ -0,0 +1,167 @@
|
||||
import './App.css';
|
||||
|
||||
import { BarChart } from '@mui/x-charts/BarChart';
|
||||
import { dataset, valueFormatter } from './weather.js';
|
||||
//Numbers from 1 to 31 in 4 arrays
|
||||
const arrayOne = [0, 1, 2, 3, 4, 5, 6, 7]
|
||||
const arrayTwo = [8, 9, 10, 11, 12, 13, 14,15]
|
||||
const arrayThree = [16, 17, 18, 19, 20, 21, 22,23]
|
||||
const arrayFour = [24, 25, 26, 27, 28, 29, 30, 31]
|
||||
const smallArray = [12,13,14,15]
|
||||
|
||||
//Hex color arrays
|
||||
const hexArrayOne = ["#4e417e", "#02dc92", "#dfbaa0", "#d8394e", "#7c31d3", "#7fcfd2", "#0e5d46", "#d98590"]
|
||||
|
||||
const hexArrayTwo = ["#7923d7", "#6e5eeb", "#2a176b", "#dea1d8", "#cbae6f", "#b6841d", "#62df7d", "#9e4d2c"]
|
||||
|
||||
const hexArrayThree = ["#393b73", "#8cface", "#1a4f07", "#045529", "#04e754", "#697980", "#018120", "#5bdcc7"]
|
||||
|
||||
const hexArrayFour = ["#7010b2", "#c50007", "#cfe583", "#cdb58e", "#298b5d", "#58e253", "#a9c3c5", "#66fec5"]
|
||||
|
||||
//Ten highest population
|
||||
export const tenHighestPopulation = [
|
||||
{ country: 'World', population: 8045311447 },
|
||||
{ country: 'India', population: 1425775850 },
|
||||
{ country: 'China', population: 1409670000 },
|
||||
{ country: 'United States of America', population: 337449016 },
|
||||
{ country: 'Indonesia', population: 278696200 },
|
||||
{ country: 'Pakistan', population: 229488994},
|
||||
{ country: 'Nigeria', population: 216746934 },
|
||||
{ country: 'Brazil', population: 218723173 },
|
||||
{ country: 'Bangladesh', population: 168220000 },
|
||||
{ country: 'Russian Federation', population: 147190000 },
|
||||
{ country: 'Mexico', population: 128271248 },
|
||||
]
|
||||
|
||||
|
||||
|
||||
//Function to determine if the number is prime
|
||||
function isPrime(num) {
|
||||
if (num <= 1) return false; // Numbers less than or equal to 1 are not prime
|
||||
for (let i = 2; i <=Math.sqrt(num); i++) {
|
||||
if (num % i === 0) {
|
||||
return false; // If num is divisible by any number other than 1 and itself
|
||||
}
|
||||
}
|
||||
return true; // If no divisors were found, num is a prime number
|
||||
}
|
||||
|
||||
|
||||
//Funtion to generate div boxes of red(prime), green(even) or yellow color(odd)
|
||||
const DivBoxes = ({ array }) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
{array.map((arrayElement) => {
|
||||
// Use arrayElement directly since it's the value
|
||||
let element;
|
||||
if (isPrime(arrayElement)) {
|
||||
element = <div key={arrayElement} id="red-box">{arrayElement}</div>;
|
||||
//console.log('Prime number:', arrayElement);
|
||||
} else if (arrayElement % 2 === 0) {
|
||||
element = <div key={arrayElement} id="green-box">{arrayElement}</div>;
|
||||
} else {
|
||||
element = <div key={arrayElement} id="yellow-box">{arrayElement}</div>;
|
||||
}
|
||||
return element;
|
||||
})}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
//Generate div boxes based on the hexacolor it gets from the three hexacolor arrays above
|
||||
const DivBoxesHexColor = ({ array }) => {
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
{array.map((arrayElement) => {
|
||||
|
||||
let element;
|
||||
//specific hexacolor
|
||||
let color = arrayElement
|
||||
//div box of the specific hexacolor
|
||||
element = <div key={arrayElement} id="hex-box" style={{ backgroundColor: color }}>{arrayElement}</div>;
|
||||
|
||||
return element;
|
||||
})}
|
||||
</>
|
||||
)
|
||||
};
|
||||
|
||||
//Bar chart function
|
||||
const chartSetting = {
|
||||
xAxis: [
|
||||
{
|
||||
label: 'Population in Billions',
|
||||
},
|
||||
],
|
||||
width: 500,
|
||||
height: 400,
|
||||
};
|
||||
|
||||
function HorizontalBars() {
|
||||
return (
|
||||
<BarChart
|
||||
dataset={tenHighestPopulation}
|
||||
yAxis={[{ scaleType: 'band', dataKey: 'country' }]}
|
||||
series={[{ dataKey: 'population', label:'Population'}]}
|
||||
layout="horizontal"
|
||||
{...chartSetting}
|
||||
/>
|
||||
);
|
||||
}
|
||||
function App() {
|
||||
|
||||
return (
|
||||
|
||||
<>
|
||||
|
||||
<div id="heading">
|
||||
|
||||
<h1>30 days of React</h1>
|
||||
<h2> Number Generator</h2>
|
||||
</div>
|
||||
<div id="game-board-row">
|
||||
<DivBoxes array={arrayOne} />
|
||||
</div>
|
||||
<div id="game-board-row">
|
||||
<DivBoxes array={arrayTwo} />
|
||||
</div>
|
||||
<div id="game-board-row">
|
||||
<DivBoxes array={arrayThree} />
|
||||
</div>
|
||||
<div id="game-board-row">
|
||||
<DivBoxes array={arrayFour} />
|
||||
</div>
|
||||
==================================================
|
||||
<h2> Hexadecimal generator</h2>
|
||||
<div id="hex-color-board-row">
|
||||
<DivBoxesHexColor array={hexArrayOne} />
|
||||
</div>
|
||||
<div id="hex-color-board-row">
|
||||
<DivBoxesHexColor array={hexArrayTwo} />
|
||||
</div>
|
||||
<div id="hex-color-board-row">
|
||||
<DivBoxesHexColor array={hexArrayThree} />
|
||||
</div>
|
||||
<div id="hex-color-board-row">
|
||||
<DivBoxesHexColor array={hexArrayFour} />
|
||||
</div>
|
||||
=================================================================================
|
||||
<h2>World population</h2>
|
||||
<p>Ten most populated countries</p>
|
||||
|
||||
|
||||
<div id="chart">
|
||||
|
||||
<HorizontalBars />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@ -0,0 +1,8 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import App from './App';
|
||||
|
||||
test('renders learn react link', () => {
|
||||
render(<App />);
|
||||
const linkElement = screen.getByText(/learn react/i);
|
||||
expect(linkElement).toBeInTheDocument();
|
||||
});
|
||||
@ -0,0 +1,13 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
// If you want to start measuring performance in your app, pass a function
|
||||
// to log results (for example: reportWebVitals(console.log))
|
||||
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
||||
reportWebVitals();
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
@ -0,0 +1,13 @@
|
||||
const reportWebVitals = onPerfEntry => {
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
getCLS(onPerfEntry);
|
||||
getFID(onPerfEntry);
|
||||
getFCP(onPerfEntry);
|
||||
getLCP(onPerfEntry);
|
||||
getTTFB(onPerfEntry);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default reportWebVitals;
|
||||
@ -0,0 +1,5 @@
|
||||
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
||||
// allows you to do things like:
|
||||
// expect(element).toHaveTextContent(/react/i)
|
||||
// learn more: https://github.com/testing-library/jest-dom
|
||||
import '@testing-library/jest-dom';
|
||||
@ -0,0 +1,90 @@
|
||||
export const dataset = [
|
||||
{
|
||||
london: 59,
|
||||
paris: 57,
|
||||
newYork: 86,
|
||||
seoul: 21,
|
||||
month: 'Jan',
|
||||
},
|
||||
{
|
||||
london: 50,
|
||||
paris: 52,
|
||||
newYork: 78,
|
||||
seoul: 28,
|
||||
month: 'Feb',
|
||||
},
|
||||
{
|
||||
london: 47,
|
||||
paris: 53,
|
||||
newYork: 106,
|
||||
seoul: 41,
|
||||
month: 'Mar',
|
||||
},
|
||||
{
|
||||
london: 54,
|
||||
paris: 56,
|
||||
newYork: 92,
|
||||
seoul: 73,
|
||||
month: 'Apr',
|
||||
},
|
||||
{
|
||||
london: 57,
|
||||
paris: 69,
|
||||
newYork: 92,
|
||||
seoul: 99,
|
||||
month: 'May',
|
||||
},
|
||||
{
|
||||
london: 60,
|
||||
paris: 63,
|
||||
newYork: 103,
|
||||
seoul: 144,
|
||||
month: 'June',
|
||||
},
|
||||
{
|
||||
london: 59,
|
||||
paris: 60,
|
||||
newYork: 105,
|
||||
seoul: 319,
|
||||
month: 'July',
|
||||
},
|
||||
{
|
||||
london: 65,
|
||||
paris: 60,
|
||||
newYork: 106,
|
||||
seoul: 249,
|
||||
month: 'Aug',
|
||||
},
|
||||
{
|
||||
london: 51,
|
||||
paris: 51,
|
||||
newYork: 95,
|
||||
seoul: 131,
|
||||
month: 'Sept',
|
||||
},
|
||||
{
|
||||
london: 60,
|
||||
paris: 65,
|
||||
newYork: 97,
|
||||
seoul: 55,
|
||||
month: 'Oct',
|
||||
},
|
||||
{
|
||||
london: 67,
|
||||
paris: 64,
|
||||
newYork: 76,
|
||||
seoul: 48,
|
||||
month: 'Nov',
|
||||
},
|
||||
{
|
||||
london: 61,
|
||||
paris: 70,
|
||||
newYork: 103,
|
||||
seoul: 25,
|
||||
month: 'Dec',
|
||||
},
|
||||
];
|
||||
|
||||
export function valueFormatter(value) {
|
||||
return `${value}mm`;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,77 @@
|
||||
|
||||
|
||||
|
||||
import fs from 'fs';
|
||||
|
||||
import { countriesData } from "./countries.js";
|
||||
import { countryIsoCode } from "./isoCode.js";
|
||||
import { countriesAppended } from './countriesAppended.js';
|
||||
|
||||
function isoCodeAppender () {
|
||||
|
||||
|
||||
console.log('countires data length',countriesData.length)
|
||||
console.log('countires ISO length',countryIsoCode.length)
|
||||
console.log('coutries appended ', countriesAppended.length)
|
||||
|
||||
// Create a new array to store the modified country data
|
||||
const appendedCountries = [];
|
||||
|
||||
//This loop here is an important coding pattern
|
||||
|
||||
// Loop through each country in countriesData
|
||||
for (let i = 0; i < countriesData.length; i++)
|
||||
{
|
||||
// Find the corresponding ISO code for the country
|
||||
for (let j = 0; j < countryIsoCode.length; j++) {
|
||||
if (countriesData[i].name === countryIsoCode[j].name) {
|
||||
// Create a new country object with the added code
|
||||
const updatedCountry = {
|
||||
...countriesData[i],
|
||||
code: countryIsoCode[j].code,
|
||||
};
|
||||
|
||||
// Push the updated country object to the new array
|
||||
appendedCountries.push(updatedCountry);
|
||||
break; // Once matched, stop the inner loop
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < countriesAppended.length; i++){
|
||||
//console.log( countriesAppended[i].code)
|
||||
if (countriesAppended[i].code ===null){
|
||||
console.log('true')
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// console.log(countriesData); // Log the updated countries data
|
||||
// Write the updated countries data to a new file
|
||||
|
||||
/*
|
||||
const outputFileContent = `export const countriesAppended = [\n${appendedCountries
|
||||
.map(
|
||||
(country) =>
|
||||
` { name: '${country.name}', capital: '${country.capital}', languages: ${JSON.stringify(
|
||||
country.languages
|
||||
)}, population: ${country.population}, flag: '${country.flag}', currency: '${country.currency}', code: '${country.code}' }`
|
||||
)
|
||||
.join(',\n')}\n];`;
|
||||
// Write the file
|
||||
fs.writeFile('./countriesAppended.js', outputFileContent, 'utf8', (err) => {
|
||||
if (err) {
|
||||
console.log('Error writing to file:', err);
|
||||
} else {
|
||||
console.log('File successfully written as countriesAppended.js');
|
||||
}
|
||||
});
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
isoCodeAppender ()
|
||||
@ -0,0 +1,142 @@
|
||||
export const countriesAppended = [
|
||||
{ name: 'Afghanistan', capital: 'Kabul', languages: ["Pashto","Uzbek","Turkmen"], population: 27657145, flag: 'https://restcountries.eu/data/afg.svg', currency: 'Afghan afghani', code: 'AF' },
|
||||
{ name: 'Åland Islands', capital: 'Mariehamn', languages: ["Swedish"], population: 28875, flag: 'https://restcountries.eu/data/ala.svg', currency: 'Euro', code: 'AX' },
|
||||
{ name: 'Albania', capital: 'Tirana', languages: ["Albanian"], population: 2886026, flag: 'https://restcountries.eu/data/alb.svg', currency: 'Albanian lek', code: 'AL' },
|
||||
{ name: 'Algeria', capital: 'Algiers', languages: ["Arabic"], population: 40400000, flag: 'https://restcountries.eu/data/dza.svg', currency: 'Algerian dinar', code: 'DZ' },
|
||||
{ name: 'American Samoa', capital: 'Pago Pago', languages: ["English","Samoan"], population: 57100, flag: 'https://restcountries.eu/data/asm.svg', currency: 'United State Dollar', code: 'AS' },
|
||||
{ name: 'Andorra', capital: 'Andorra la Vella', languages: ["Catalan"], population: 78014, flag: 'https://restcountries.eu/data/and.svg', currency: 'Euro', code: 'AD' },
|
||||
{ name: 'Angola', capital: 'Luanda', languages: ["Portuguese"], population: 25868000, flag: 'https://restcountries.eu/data/ago.svg', currency: 'Angolan kwanza', code: 'AO' },
|
||||
{ name: 'Anguilla', capital: 'The Valley', languages: ["English"], population: 13452, flag: 'https://restcountries.eu/data/aia.svg', currency: 'East Caribbean dollar', code: 'AI' },
|
||||
{ name: 'Antigua and Barbuda', capital: "Saint John's", languages: ["English"], population: 86295, flag: 'https://restcountries.eu/data/atg.svg', currency: 'East Caribbean dollar', code: 'AG' },
|
||||
{ name: 'Argentina', capital: 'Buenos Aires', languages: ["Spanish","Guaraní"], population: 43590400, flag: 'https://restcountries.eu/data/arg.svg', currency: 'Argentine peso', code: 'AR' },
|
||||
{ name: 'Armenia', capital: 'Yerevan', languages: ["Armenian","Russian"], population: 2994400, flag: 'https://restcountries.eu/data/arm.svg', currency: 'Armenian dram', code: 'AM' },
|
||||
{ name: 'Aruba', capital: 'Oranjestad', languages: ["Dutch","(Eastern) Punjabi"], population: 107394, flag: 'https://restcountries.eu/data/abw.svg', currency: 'Aruban florin', code: 'AW' },
|
||||
{ name: 'Australia', capital: 'Canberra', languages: ["English"], population: 24117360, flag: 'https://restcountries.eu/data/aus.svg', currency: 'Australian dollar', code: 'AU' },
|
||||
{ name: 'Austria', capital: 'Vienna', languages: ["German"], population: 8725931, flag: 'https://restcountries.eu/data/aut.svg', currency: 'Euro', code: 'AT' },
|
||||
{ name: 'Azerbaijan', capital: 'Baku', languages: ["Azerbaijani"], population: 9730500, flag: 'https://restcountries.eu/data/aze.svg', currency: 'Azerbaijani manat', code: 'AZ' },
|
||||
{ name: 'Bahamas', capital: 'Nassau', languages: ["English"], population: 378040, flag: 'https://restcountries.eu/data/bhs.svg', currency: 'Bahamian dollar', code: 'BS' },
|
||||
{ name: 'Bahrain', capital: 'Manama', languages: ["Arabic"], population: 1404900, flag: 'https://restcountries.eu/data/bhr.svg', currency: 'Bahraini dinar', code: 'BH' },
|
||||
{ name: 'Bangladesh', capital: 'Dhaka', languages: ["Bengali"], population: 161006790, flag: 'https://restcountries.eu/data/bgd.svg', currency: 'Bangladeshi taka', code: 'BD' },
|
||||
{ name: 'Barbados', capital: 'Bridgetown', languages: ["English"], population: 285000, flag: 'https://restcountries.eu/data/brb.svg', currency: 'Barbadian dollar', code: 'BB' },
|
||||
{ name: 'Belarus', capital: 'Minsk', languages: ["Belarusian","Russian"], population: 9498700, flag: 'https://restcountries.eu/data/blr.svg', currency: 'New Belarusian ruble', code: 'BY' },
|
||||
{ name: 'Belgium', capital: 'Brussels', languages: ["Dutch","French","German"], population: 11319511, flag: 'https://restcountries.eu/data/bel.svg', currency: 'Euro', code: 'BE' },
|
||||
{ name: 'Belize', capital: 'Belmopan', languages: ["English","Spanish"], population: 370300, flag: 'https://restcountries.eu/data/blz.svg', currency: 'Belize dollar', code: 'BZ' },
|
||||
{ name: 'Benin', capital: 'Porto-Novo', languages: ["French"], population: 10653654, flag: 'https://restcountries.eu/data/ben.svg', currency: 'West African CFA franc', code: 'BJ' },
|
||||
{ name: 'Bhutan', capital: 'Thimphu', languages: ["Dzongkha"], population: 775620, flag: 'https://restcountries.eu/data/btn.svg', currency: 'Bhutanese ngultrum', code: 'BT' },
|
||||
{ name: 'Bosnia and Herzegovina', capital: 'Sarajevo', languages: ["Bosnian","Croatian","Serbian"], population: 3531159, flag: 'https://restcountries.eu/data/bih.svg', currency: 'Bosnia and Herzegovina convertible mark', code: 'BA' },
|
||||
{ name: 'Botswana', capital: 'Gaborone', languages: ["English","Tswana"], population: 2141206, flag: 'https://restcountries.eu/data/bwa.svg', currency: 'Botswana pula', code: 'BW' },
|
||||
{ name: 'Brazil', capital: 'Brasília', languages: ["Portuguese"], population: 206135893, flag: 'https://restcountries.eu/data/bra.svg', currency: 'Brazilian real', code: 'BR' },
|
||||
{ name: 'Bulgaria', capital: 'Sofia', languages: ["Bulgarian"], population: 7153784, flag: 'https://restcountries.eu/data/bgr.svg', currency: 'Bulgarian lev', code: 'BG' },
|
||||
{ name: 'Burkina Faso', capital: 'Ouagadougou', languages: ["French","Fula"], population: 19034397, flag: 'https://restcountries.eu/data/bfa.svg', currency: 'West African CFA franc', code: 'BF' },
|
||||
{ name: 'Burundi', capital: 'Bujumbura', languages: ["French","Kirundi"], population: 10114505, flag: 'https://restcountries.eu/data/bdi.svg', currency: 'Burundian franc', code: 'BI' },
|
||||
{ name: 'Cambodia', capital: 'Phnom Penh', languages: ["Khmer"], population: 15626444, flag: 'https://restcountries.eu/data/khm.svg', currency: 'Cambodian riel', code: 'KH' },
|
||||
{ name: 'Cameroon', capital: 'Yaoundé', languages: ["English","French"], population: 22709892, flag: 'https://restcountries.eu/data/cmr.svg', currency: 'Central African CFA franc', code: 'CM' },
|
||||
{ name: 'Canada', capital: 'Ottawa', languages: ["English","French"], population: 36155487, flag: 'https://restcountries.eu/data/can.svg', currency: 'Canadian dollar', code: 'CA' },
|
||||
{ name: 'Cabo Verde', capital: 'Praia', languages: ["Portuguese"], population: 531239, flag: 'https://restcountries.eu/data/cpv.svg', currency: 'Cape Verdean escudo', code: 'CV' },
|
||||
{ name: 'Central African Republic', capital: 'Bangui', languages: ["French","Sango"], population: 4998000, flag: 'https://restcountries.eu/data/caf.svg', currency: 'Central African CFA franc', code: 'CF' },
|
||||
{ name: 'Chad', capital: "N'Djamena", languages: ["French","Arabic"], population: 14497000, flag: 'https://restcountries.eu/data/tcd.svg', currency: 'Central African CFA franc', code: 'TD' },
|
||||
{ name: 'Chile', capital: 'Santiago', languages: ["Spanish"], population: 18191900, flag: 'https://restcountries.eu/data/chl.svg', currency: 'Chilean peso', code: 'CL' },
|
||||
{ name: 'China', capital: 'Beijing', languages: ["Chinese"], population: 1377422166, flag: 'https://restcountries.eu/data/chn.svg', currency: 'Chinese yuan', code: 'CN' },
|
||||
{ name: 'Colombia', capital: 'Bogotá', languages: ["Spanish"], population: 48759958, flag: 'https://restcountries.eu/data/col.svg', currency: 'Colombian peso', code: 'CO' },
|
||||
{ name: 'Comoros', capital: 'Moroni', languages: ["Arabic","French"], population: 806153, flag: 'https://restcountries.eu/data/com.svg', currency: 'Comorian franc', code: 'KM' },
|
||||
{ name: 'Costa Rica', capital: 'San José', languages: ["Spanish"], population: 4890379, flag: 'https://restcountries.eu/data/cri.svg', currency: 'Costa Rican colón', code: 'CR' },
|
||||
{ name: 'Croatia', capital: 'Zagreb', languages: ["Croatian"], population: 4190669, flag: 'https://restcountries.eu/data/hrv.svg', currency: 'Croatian kuna', code: 'HR' },
|
||||
{ name: 'Cuba', capital: 'Havana', languages: ["Spanish"], population: 11239004, flag: 'https://restcountries.eu/data/cub.svg', currency: 'Cuban convertible peso', code: 'CU' },
|
||||
{ name: 'Cyprus', capital: 'Nicosia', languages: ["Greek (modern)","Turkish","Armenian"], population: 847000, flag: 'https://restcountries.eu/data/cyp.svg', currency: 'Euro', code: 'CY' },
|
||||
{ name: 'Denmark', capital: 'Copenhagen', languages: ["Danish"], population: 5717014, flag: 'https://restcountries.eu/data/dnk.svg', currency: 'Danish krone', code: 'DK' },
|
||||
{ name: 'Djibouti', capital: 'Djibouti', languages: ["French","Arabic"], population: 900000, flag: 'https://restcountries.eu/data/dji.svg', currency: 'Djiboutian franc', code: 'DJ' },
|
||||
{ name: 'Dominica', capital: 'Roseau', languages: ["English"], population: 71293, flag: 'https://restcountries.eu/data/dma.svg', currency: 'East Caribbean dollar', code: 'DM' },
|
||||
{ name: 'Dominican Republic', capital: 'Santo Domingo', languages: ["Spanish"], population: 10075045, flag: 'https://restcountries.eu/data/dom.svg', currency: 'Dominican peso', code: 'DO' },
|
||||
{ name: 'Ecuador', capital: 'Quito', languages: ["Spanish"], population: 16545799, flag: 'https://restcountries.eu/data/ecu.svg', currency: 'United States dollar', code: 'EC' },
|
||||
{ name: 'Egypt', capital: 'Cairo', languages: ["Arabic"], population: 91290000, flag: 'https://restcountries.eu/data/egy.svg', currency: 'Egyptian pound', code: 'EG' },
|
||||
{ name: 'El Salvador', capital: 'San Salvador', languages: ["Spanish"], population: 6520675, flag: 'https://restcountries.eu/data/slv.svg', currency: 'United States dollar', code: 'SV' },
|
||||
{ name: 'Equatorial Guinea', capital: 'Malabo', languages: ["Spanish","French"], population: 1222442, flag: 'https://restcountries.eu/data/gnq.svg', currency: 'Central African CFA franc', code: 'GQ' },
|
||||
{ name: 'Eritrea', capital: 'Asmara', languages: ["Tigrinya","Arabic","English"], population: 5352000, flag: 'https://restcountries.eu/data/eri.svg', currency: 'Eritrean nakfa', code: 'ER' },
|
||||
{ name: 'Estonia', capital: 'Tallinn', languages: ["Estonian"], population: 1315944, flag: 'https://restcountries.eu/data/est.svg', currency: 'Euro', code: 'EE' },
|
||||
{ name: 'Ethiopia', capital: 'Addis Ababa', languages: ["Amharic"], population: 92206005, flag: 'https://restcountries.eu/data/eth.svg', currency: 'Ethiopian birr', code: 'ET' },
|
||||
{ name: 'Fiji', capital: 'Suva', languages: ["English","Fijian","Hindi","Urdu"], population: 867000, flag: 'https://restcountries.eu/data/fji.svg', currency: 'Fijian dollar', code: 'FJ' },
|
||||
{ name: 'Finland', capital: 'Helsinki', languages: ["Finnish","Swedish"], population: 5491817, flag: 'https://restcountries.eu/data/fin.svg', currency: 'Euro', code: 'FI' },
|
||||
{ name: 'France', capital: 'Paris', languages: ["French"], population: 66710000, flag: 'https://restcountries.eu/data/fra.svg', currency: 'Euro', code: 'FR' },
|
||||
{ name: 'Gabon', capital: 'Libreville', languages: ["French"], population: 1802278, flag: 'https://restcountries.eu/data/gab.svg', currency: 'Central African CFA franc', code: 'GA' },
|
||||
{ name: 'Gambia', capital: 'Banjul', languages: ["English"], population: 1882450, flag: 'https://restcountries.eu/data/gmb.svg', currency: 'Gambian dalasi', code: 'GM' },
|
||||
{ name: 'Georgia', capital: 'Tbilisi', languages: ["Georgian"], population: 3720400, flag: 'https://restcountries.eu/data/geo.svg', currency: 'Georgian Lari', code: 'GE' },
|
||||
{ name: 'Germany', capital: 'Berlin', languages: ["German"], population: 81770900, flag: 'https://restcountries.eu/data/deu.svg', currency: 'Euro', code: 'DE' },
|
||||
{ name: 'Ghana', capital: 'Accra', languages: ["English"], population: 27670174, flag: 'https://restcountries.eu/data/gha.svg', currency: 'Ghanaian cedi', code: 'GH' },
|
||||
{ name: 'Greece', capital: 'Athens', languages: ["Greek (modern)"], population: 10858018, flag: 'https://restcountries.eu/data/grc.svg', currency: 'Euro', code: 'GR' },
|
||||
{ name: 'Grenada', capital: "St. George's", languages: ["English"], population: 103328, flag: 'https://restcountries.eu/data/grd.svg', currency: 'East Caribbean dollar', code: 'GD' },
|
||||
{ name: 'Guatemala', capital: 'Guatemala City', languages: ["Spanish"], population: 16176133, flag: 'https://restcountries.eu/data/gtm.svg', currency: 'Guatemalan quetzal', code: 'GT' },
|
||||
{ name: 'Guinea', capital: 'Conakry', languages: ["French","Fula"], population: 12947000, flag: 'https://restcountries.eu/data/gin.svg', currency: 'Guinean franc', code: 'GN' },
|
||||
{ name: 'Guinea-Bissau', capital: 'Bissau', languages: ["Portuguese"], population: 1547777, flag: 'https://restcountries.eu/data/gnb.svg', currency: 'West African CFA franc', code: 'GW' },
|
||||
{ name: 'Guyana', capital: 'Georgetown', languages: ["English"], population: 746900, flag: 'https://restcountries.eu/data/guy.svg', currency: 'Guyanese dollar', code: 'GY' },
|
||||
{ name: 'Haiti', capital: 'Port-au-Prince', languages: ["French","Haitian"], population: 11078033, flag: 'https://restcountries.eu/data/hti.svg', currency: 'Haitian gourde', code: 'HT' },
|
||||
{ name: 'Honduras', capital: 'Tegucigalpa', languages: ["Spanish"], population: 8576532, flag: 'https://restcountries.eu/data/hnd.svg', currency: 'Honduran lempira', code: 'HN' },
|
||||
{ name: 'Hungary', capital: 'Budapest', languages: ["Hungarian"], population: 9823000, flag: 'https://restcountries.eu/data/hun.svg', currency: 'Hungarian forint', code: 'HU' },
|
||||
{ name: 'Iceland', capital: 'Reykjavík', languages: ["Icelandic"], population: 334300, flag: 'https://restcountries.eu/data/isl.svg', currency: 'Icelandic króna', code: 'IS' },
|
||||
{ name: 'India', capital: 'New Delhi', languages: ["Hindi","English"], population: 1295210000, flag: 'https://restcountries.eu/data/ind.svg', currency: 'Indian rupee', code: 'IN' },
|
||||
{ name: 'Indonesia', capital: 'Jakarta', languages: ["Indonesian"], population: 258705000, flag: 'https://restcountries.eu/data/idn.svg', currency: 'Indonesian rupiah', code: 'ID' },
|
||||
{ name: 'Iraq', capital: 'Baghdad', languages: ["Arabic","Kurdish"], population: 37883543, flag: 'https://restcountries.eu/data/irq.svg', currency: 'Iraqi dinar', code: 'IQ' },
|
||||
{ name: 'Ireland', capital: 'Dublin', languages: ["Irish","English"], population: 6378000, flag: 'https://restcountries.eu/data/irl.svg', currency: 'Euro', code: 'IE' },
|
||||
{ name: 'Israel', capital: 'Jerusalem', languages: ["Hebrew (modern)","Arabic"], population: 8527400, flag: 'https://restcountries.eu/data/isr.svg', currency: 'Israeli new shekel', code: 'IL' },
|
||||
{ name: 'Italy', capital: 'Rome', languages: ["Italian"], population: 60665551, flag: 'https://restcountries.eu/data/ita.svg', currency: 'Euro', code: 'IT' },
|
||||
{ name: 'Jamaica', capital: 'Kingston', languages: ["English"], population: 2723246, flag: 'https://restcountries.eu/data/jam.svg', currency: 'Jamaican dollar', code: 'JM' },
|
||||
{ name: 'Japan', capital: 'Tokyo', languages: ["Japanese"], population: 126960000, flag: 'https://restcountries.eu/data/jpn.svg', currency: 'Japanese yen', code: 'JP' },
|
||||
{ name: 'Jordan', capital: 'Amman', languages: ["Arabic"], population: 9531712, flag: 'https://restcountries.eu/data/jor.svg', currency: 'Jordanian dinar', code: 'JO' },
|
||||
{ name: 'Kazakhstan', capital: 'Astana', languages: ["Kazakh","Russian"], population: 17753200, flag: 'https://restcountries.eu/data/kaz.svg', currency: 'Kazakhstani tenge', code: 'KZ' },
|
||||
{ name: 'Kenya', capital: 'Nairobi', languages: ["English","Swahili"], population: 47251000, flag: 'https://restcountries.eu/data/ken.svg', currency: 'Kenyan shilling', code: 'KE' },
|
||||
{ name: 'Kiribati', capital: 'South Tarawa', languages: ["English"], population: 113400, flag: 'https://restcountries.eu/data/kir.svg', currency: 'Australian dollar', code: 'KI' },
|
||||
{ name: 'Kuwait', capital: 'Kuwait City', languages: ["Arabic"], population: 4183658, flag: 'https://restcountries.eu/data/kwt.svg', currency: 'Kuwaiti dinar', code: 'KW' },
|
||||
{ name: 'Kyrgyzstan', capital: 'Bishkek', languages: ["Kyrgyz","Russian"], population: 6047800, flag: 'https://restcountries.eu/data/kgz.svg', currency: 'Kyrgyzstani som', code: 'KG' },
|
||||
{ name: 'Latvia', capital: 'Riga', languages: ["Latvian"], population: 1961600, flag: 'https://restcountries.eu/data/lva.svg', currency: 'Euro', code: 'LV' },
|
||||
{ name: 'Lebanon', capital: 'Beirut', languages: ["Arabic","French"], population: 5988000, flag: 'https://restcountries.eu/data/lbn.svg', currency: 'Lebanese pound', code: 'LB' },
|
||||
{ name: 'Lesotho', capital: 'Maseru', languages: ["English","Southern Sotho"], population: 1894194, flag: 'https://restcountries.eu/data/lso.svg', currency: 'Lesotho loti', code: 'LS' },
|
||||
{ name: 'Liberia', capital: 'Monrovia', languages: ["English"], population: 4615000, flag: 'https://restcountries.eu/data/lbr.svg', currency: 'Liberian dollar', code: 'LR' },
|
||||
{ name: 'Libya', capital: 'Tripoli', languages: ["Arabic"], population: 6385000, flag: 'https://restcountries.eu/data/lby.svg', currency: 'Libyan dinar', code: 'LY' },
|
||||
{ name: 'Liechtenstein', capital: 'Vaduz', languages: ["German"], population: 37623, flag: 'https://restcountries.eu/data/lie.svg', currency: 'Swiss franc', code: 'LI' },
|
||||
{ name: 'Lithuania', capital: 'Vilnius', languages: ["Lithuanian"], population: 2872294, flag: 'https://restcountries.eu/data/ltu.svg', currency: 'Euro', code: 'LT' },
|
||||
{ name: 'Luxembourg', capital: 'Luxembourg', languages: ["French","German","Luxembourgish"], population: 576200, flag: 'https://restcountries.eu/data/lux.svg', currency: 'Euro', code: 'LU' },
|
||||
{ name: 'Madagascar', capital: 'Antananarivo', languages: ["French","Malagasy"], population: 22434363, flag: 'https://restcountries.eu/data/mdg.svg', currency: 'Malagasy ariary', code: 'MG' },
|
||||
{ name: 'Malawi', capital: 'Lilongwe', languages: ["English","Chichewa"], population: 16832910, flag: 'https://restcountries.eu/data/mwi.svg', currency: 'Malawian kwacha', code: 'MW' },
|
||||
{ name: 'Malaysia', capital: 'Kuala Lumpur', languages: ["Malaysian"], population: 31405416, flag: 'https://restcountries.eu/data/mys.svg', currency: 'Malaysian ringgit', code: 'MY' },
|
||||
{ name: 'Maldives', capital: 'Malé', languages: ["Divehi"], population: 344023, flag: 'https://restcountries.eu/data/mdv.svg', currency: 'Maldivian rufiyaa', code: 'MV' },
|
||||
{ name: 'Mali', capital: 'Bamako', languages: ["French"], population: 18135000, flag: 'https://restcountries.eu/data/mli.svg', currency: 'West African CFA franc', code: 'ML' },
|
||||
{ name: 'Malta', capital: 'Valletta', languages: ["Maltese","English"], population: 425384, flag: 'https://restcountries.eu/data/mlt.svg', currency: 'Euro', code: 'MT' },
|
||||
{ name: 'Mexico', capital: 'Mexico City', languages: ["Spanish"], population: 122273473, flag: 'https://restcountries.eu/data/mex.svg', currency: 'Mexican peso', code: 'MX' },
|
||||
{ name: 'Monaco', capital: 'Monaco', languages: ["French"], population: 38400, flag: 'https://restcountries.eu/data/mco.svg', currency: 'Euro', code: 'MC' },
|
||||
{ name: 'Mongolia', capital: 'Ulan Bator', languages: ["Mongolian"], population: 3093100, flag: 'https://restcountries.eu/data/mng.svg', currency: 'Mongolian tögrög', code: 'MN' },
|
||||
{ name: 'Montenegro', capital: 'Podgorica', languages: ["Serbian","Bosnian","Albanian","Croatian"], population: 621810, flag: 'https://restcountries.eu/data/mne.svg', currency: 'Euro', code: 'ME' },
|
||||
{ name: 'Morocco', capital: 'Rabat', languages: ["Arabic"], population: 33337529, flag: 'https://restcountries.eu/data/mar.svg', currency: 'Moroccan dirham', code: 'MA' },
|
||||
{ name: 'Mozambique', capital: 'Maputo', languages: ["Portuguese"], population: 26423700, flag: 'https://restcountries.eu/data/moz.svg', currency: 'Mozambican metical', code: 'MZ' },
|
||||
{ name: 'Myanmar', capital: 'Naypyidaw', languages: ["Burmese"], population: 51419420, flag: 'https://restcountries.eu/data/mmr.svg', currency: 'Burmese kyat', code: 'MM' },
|
||||
{ name: 'Namibia', capital: 'Windhoek', languages: ["English","Afrikaans"], population: 2324388, flag: 'https://restcountries.eu/data/nam.svg', currency: 'Namibian dollar', code: 'NA' },
|
||||
{ name: 'Nepal', capital: 'Kathmandu', languages: ["Nepali"], population: 28431500, flag: 'https://restcountries.eu/data/npl.svg', currency: 'Nepalese rupee', code: 'NP' },
|
||||
{ name: 'Netherlands', capital: 'Amsterdam', languages: ["Dutch"], population: 17019800, flag: 'https://restcountries.eu/data/nld.svg', currency: 'Euro', code: 'NL' },
|
||||
{ name: 'New Zealand', capital: 'Wellington', languages: ["English","Māori"], population: 4697854, flag: 'https://restcountries.eu/data/nzl.svg', currency: 'New Zealand dollar', code: 'NZ' },
|
||||
{ name: 'Nicaragua', capital: 'Managua', languages: ["Spanish"], population: 6262703, flag: 'https://restcountries.eu/data/nic.svg', currency: 'Nicaraguan córdoba', code: 'NI' },
|
||||
{ name: 'Nigeria', capital: 'Abuja', languages: ["English"], population: 186988000, flag: 'https://restcountries.eu/data/nga.svg', currency: 'Nigerian naira', code: 'NG' },
|
||||
{ name: 'Norway', capital: 'Oslo', languages: ["Norwegian","Norwegian Bokmål","Norwegian Nynorsk"], population: 5223256, flag: 'https://restcountries.eu/data/nor.svg', currency: 'Norwegian krone', code: 'NO' },
|
||||
{ name: 'Oman', capital: 'Muscat', languages: ["Arabic"], population: 4420133, flag: 'https://restcountries.eu/data/omn.svg', currency: 'Omani rial', code: 'OM' },
|
||||
{ name: 'Pakistan', capital: 'Islamabad', languages: ["English","Urdu"], population: 194125062, flag: 'https://restcountries.eu/data/pak.svg', currency: 'Pakistani rupee', code: 'PK' },
|
||||
{ name: 'Philippines', capital: 'Manila', languages: ["English"], population: 103279800, flag: 'https://restcountries.eu/data/phl.svg', currency: 'Philippine peso', code: 'PH' },
|
||||
{ name: 'Poland', capital: 'Warsaw', languages: ["Polish"], population: 38437239, flag: 'https://restcountries.eu/data/pol.svg', currency: 'Polish złoty', code: 'PL' },
|
||||
{ name: 'Portugal', capital: 'Lisbon', languages: ["Portuguese"], population: 10374822, flag: 'https://restcountries.eu/data/prt.svg', currency: 'Euro', code: 'PT' },
|
||||
{ name: 'Qatar', capital: 'Doha', languages: ["Arabic"], population: 2587564, flag: 'https://restcountries.eu/data/qat.svg', currency: 'Qatari riyal', code: 'QA' },
|
||||
{ name: 'Romania', capital: 'Bucharest', languages: ["Romanian"], population: 19861408, flag: 'https://restcountries.eu/data/rou.svg', currency: 'Romanian leu', code: 'RO' },
|
||||
{ name: 'Saudi Arabia', capital: 'Riyadh', languages: ["Arabic"], population: 32248200, flag: 'https://restcountries.eu/data/sau.svg', currency: 'Saudi riyal', code: 'SA' },
|
||||
{ name: 'South Africa', capital: 'Pretoria', languages: ["Afrikaans","English","Southern Ndebele","Southern Sotho","Swati","Tswana","Tsonga","Venda","Xhosa","Zulu"], population: 55653654, flag: 'https://restcountries.eu/data/zaf.svg', currency: 'South African rand', code: 'ZA' },
|
||||
{ name: 'Spain', capital: 'Madrid', languages: ["Spanish"], population: 46438422, flag: 'https://restcountries.eu/data/esp.svg', currency: 'Euro', code: 'ES' },
|
||||
{ name: 'Sweden', capital: 'Stockholm', languages: ["Swedish"], population: 9894888, flag: 'https://restcountries.eu/data/swe.svg', currency: 'Swedish krona', code: 'SE' },
|
||||
{ name: 'Switzerland', capital: 'Bern', languages: ["German","French","Italian"], population: 8341600, flag: 'https://restcountries.eu/data/che.svg', currency: 'Swiss franc', code: 'CH' },
|
||||
{ name: 'Thailand', capital: 'Bangkok', languages: ["Thai"], population: 65327652, flag: 'https://restcountries.eu/data/tha.svg', currency: 'Thai baht', code: 'TH' },
|
||||
{ name: 'Turkey', capital: 'Ankara', languages: ["Turkish"], population: 78741053, flag: 'https://restcountries.eu/data/tur.svg', currency: 'Turkish lira', code: 'TR' },
|
||||
{ name: 'Ukraine', capital: 'Kiev', languages: ["Ukrainian"], population: 42692393, flag: 'https://restcountries.eu/data/ukr.svg', currency: 'Ukrainian hryvnia', code: 'UA' },
|
||||
{ name: 'United Arab Emirates', capital: 'Abu Dhabi', languages: ["Arabic"], population: 9856000, flag: 'https://restcountries.eu/data/are.svg', currency: 'United Arab Emirates dirham', code: 'AE' },
|
||||
{ name: 'Uruguay', capital: 'Montevideo', languages: ["Spanish"], population: 3480222, flag: 'https://restcountries.eu/data/ury.svg', currency: 'Uruguayan peso', code: 'UY' },
|
||||
{ name: 'United States of America',capital: 'Washington, D.C.',languages: ['English'],population: 323947000,flag: 'https://restcountries.eu/data/usa.svg',code: 'US', currency: 'United States dollar'},
|
||||
{ name: 'Uzbekistan', capital: 'Tashkent', languages: ["Uzbek","Russian"], population: 31576400, flag: 'https://restcountries.eu/data/uzb.svg', currency: "Uzbekistani so'm", code: 'UZ' },
|
||||
{ name: 'Vanuatu', capital: 'Port Vila', languages: ["Bislama","English","French"], population: 277500, flag: 'https://restcountries.eu/data/vut.svg', currency: 'Vanuatu vatu', code: 'VU' },
|
||||
{ name: 'Wallis and Futuna', capital: 'Mata-Utu', languages: ["French"], population: 11750, flag: 'https://restcountries.eu/data/wlf.svg', currency: 'CFP franc', code: 'WF' },
|
||||
{ name: 'Western Sahara', capital: 'El Aaiún', languages: ["Spanish"], population: 510713, flag: 'https://restcountries.eu/data/esh.svg', currency: 'Moroccan dirham', code: 'EH' },
|
||||
{ name: 'Yemen', capital: "Sana'a", languages: ["Arabic"], population: 27478000, flag: 'https://restcountries.eu/data/yem.svg', currency: 'Yemeni rial', code: 'YE' },
|
||||
{ name: 'Zambia', capital: 'Lusaka', languages: ["English"], population: 15933883, flag: 'https://restcountries.eu/data/zmb.svg', currency: 'Zambian kwacha', code: 'ZM' },
|
||||
{ name: 'Zimbabwe', capital: 'Harare', languages: ["English","Shona","Northern Ndebele"], population: 14240168, flag: 'https://restcountries.eu/data/zwe.svg', currency: 'Botswana pula', code: 'ZW' }
|
||||
];
|
||||
@ -0,0 +1,22 @@
|
||||
export const countryCodes = [
|
||||
"AF", "AL", "DZ", "AD", "AO", "AG", "AR", "AM", "AU", "AT",
|
||||
"AZ", "BS", "BH", "BD", "BB", "BY", "BE", "BZ", "BJ", "BT",
|
||||
"BO", "BA", "BW", "BR", "BN", "BG", "BF", "BI", "CV", "KH",
|
||||
"CM", "CA", "CF", "TD", "CL", "CN", "CO", "KM", "CG", "CD",
|
||||
"CR", "HR", "CU", "CY", "CZ", "DK", "DJ", "DM", "DO", "EC",
|
||||
"EG", "SV", "GQ", "ER", "EE", "SZ", "ET", "FJ", "FI", "FR",
|
||||
"GA", "GM", "GE", "DE", "GH", "GR", "GD", "GT", "GN", "GW",
|
||||
"GY", "HT", "HN", "HU", "IS", "IN", "ID", "IR", "IQ", "IE",
|
||||
"IL", "IT", "JM", "JP", "JO", "KZ", "KE", "KI", "KP", "KR",
|
||||
"KW", "KG", "LA", "LV", "LB", "LS", "LR", "LY", "LI", "LT",
|
||||
"LU", "MG", "MW", "MY", "MV", "ML", "MT", "MH", "MR", "MU",
|
||||
"MX", "FM", "MD", "MC", "MN", "ME", "MA", "MZ", "MM", "NA",
|
||||
"NR", "NP", "NL", "NZ", "NI", "NE", "NG", "NO", "OM", "PK",
|
||||
"PW", "PA", "PG", "PY", "PE", "PH", "PL", "PT", "QA", "RO",
|
||||
"RU", "RW", "KN", "LC", "VC", "WS", "SM", "ST", "SA", "SN",
|
||||
"RS", "SC", "SL", "SG", "SK", "SI", "SB", "SO", "ZA", "SS",
|
||||
"ES", "LK", "SD", "SR", "SE", "CH", "SY", "TW", "TJ", "TZ",
|
||||
"TH", "TL", "TG", "TO", "TT", "TN", "TR", "TM", "UG", "UA",
|
||||
"AE", "GB", "US", "UY", "UZ", "VU", "VA", "VE", "VN", "YE",
|
||||
"ZM", "ZW"
|
||||
];
|
||||
@ -0,0 +1,159 @@
|
||||
export const countryIsoCode = [
|
||||
{ code: 'AF', name: 'Afghanistan' },
|
||||
{ code: 'AL', name: 'Albania' },
|
||||
{ code: 'DZ', name: 'Algeria' },
|
||||
{ code: 'AS', name: 'American Samoa' },
|
||||
{ code: 'AD', name: 'Andorra' },
|
||||
{ code: 'AO', name: 'Angola' },
|
||||
{ code: 'AI', name: 'Anguilla' },
|
||||
{ code: 'AG', name: 'Antigua and Barbuda' },
|
||||
{ code: 'AR', name: 'Argentina' },
|
||||
{ code: 'AM', name: 'Armenia' },
|
||||
{ code: 'AW', name: 'Aruba' },
|
||||
{ code: 'AU', name: 'Australia' },
|
||||
{ code: 'AT', name: 'Austria' },
|
||||
{ code: 'AZ', name: 'Azerbaijan' },
|
||||
{ code: 'BS', name: 'Bahamas' },
|
||||
{ code: 'BH', name: 'Bahrain' },
|
||||
{ code: 'BD', name: 'Bangladesh' },
|
||||
{ code: 'BB', name: 'Barbados' },
|
||||
{ code: 'BY', name: 'Belarus' },
|
||||
{ code: 'BE', name: 'Belgium' },
|
||||
{ code: 'BZ', name: 'Belize' },
|
||||
{ code: 'BJ', name: 'Benin' },
|
||||
{ code: 'BT', name: 'Bhutan' },
|
||||
{ code: 'BO', name: 'Bolivia' },
|
||||
{ code: 'BA', name: 'Bosnia and Herzegovina' },
|
||||
{ code: 'BW', name: 'Botswana' },
|
||||
{ code: 'BR', name: 'Brazil' },
|
||||
{ code: 'BN', name: 'Brunei' },
|
||||
{ code: 'BG', name: 'Bulgaria' },
|
||||
{ code: 'BF', name: 'Burkina Faso' },
|
||||
{ code: 'BI', name: 'Burundi' },
|
||||
{ code: 'CV', name: 'Cabo Verde' },
|
||||
{ code: 'KH', name: 'Cambodia' },
|
||||
{ code: 'CM', name: 'Cameroon' },
|
||||
{ code: 'CA', name: 'Canada' },
|
||||
{ code: 'CF', name: 'Central African Republic' },
|
||||
{ code: 'TD', name: 'Chad' },
|
||||
{ code: 'CL', name: 'Chile' },
|
||||
{ code: 'CN', name: 'China' },
|
||||
{ code: 'CO', name: 'Colombia' },
|
||||
{ code: 'KM', name: 'Comoros' },
|
||||
{ code: 'CG', name: 'Congo (Brazzaville)' },
|
||||
{ code: 'CD', name: 'Congo (Kinshasa)' },
|
||||
{ code: 'CR', name: 'Costa Rica' },
|
||||
{ code: 'HR', name: 'Croatia' },
|
||||
{ code: 'CU', name: 'Cuba' },
|
||||
{ code: 'CY', name: 'Cyprus' },
|
||||
{ code: 'CZ', name: 'Czechia' },
|
||||
{ code: 'DK', name: 'Denmark' },
|
||||
{ code: 'DJ', name: 'Djibouti' },
|
||||
{ code: 'DM', name: 'Dominica' },
|
||||
{ code: 'DO', name: 'Dominican Republic' },
|
||||
{ code: 'EC', name: 'Ecuador' },
|
||||
{ code: 'EG', name: 'Egypt' },
|
||||
{ code: 'SV', name: 'El Salvador' },
|
||||
{ code: 'GQ', name: 'Equatorial Guinea' },
|
||||
{ code: 'ER', name: 'Eritrea' },
|
||||
{ code: 'EE', name: 'Estonia' },
|
||||
{ code: 'ET', name: 'Ethiopia' },
|
||||
{ code: 'FJ', name: 'Fiji' },
|
||||
{ code: 'FI', name: 'Finland' },
|
||||
{ code: 'FR', name: 'France' },
|
||||
{ code: 'GA', name: 'Gabon' },
|
||||
{ code: 'GM', name: 'Gambia' },
|
||||
{ code: 'GE', name: 'Georgia' },
|
||||
{ code: 'DE', name: 'Germany' },
|
||||
{ code: 'GH', name: 'Ghana' },
|
||||
{ code: 'GR', name: 'Greece' },
|
||||
{ code: 'GD', name: 'Grenada' },
|
||||
{ code: 'GT', name: 'Guatemala' },
|
||||
{ code: 'GN', name: 'Guinea' },
|
||||
{ code: 'GW', name: 'Guinea-Bissau' },
|
||||
{ code: 'GY', name: 'Guyana' },
|
||||
{ code: 'HT', name: 'Haiti' },
|
||||
{ code: 'HN', name: 'Honduras' },
|
||||
{ code: 'HU', name: 'Hungary' },
|
||||
{ code: 'IS', name: 'Iceland' },
|
||||
{ code: 'IN', name: 'India' },
|
||||
{ code: 'ID', name: 'Indonesia' },
|
||||
{ code: 'IR', name: 'Iran' },
|
||||
{ code: 'IQ', name: 'Iraq' },
|
||||
{ code: 'IE', name: 'Ireland' },
|
||||
{ code: 'IL', name: 'Israel' },
|
||||
{ code: 'IT', name: 'Italy' },
|
||||
{ code: 'JM', name: 'Jamaica' },
|
||||
{ code: 'JP', name: 'Japan' },
|
||||
{ code: 'JO', name: 'Jordan' },
|
||||
{ code: 'KZ', name: 'Kazakhstan' },
|
||||
{ code: 'KE', name: 'Kenya' },
|
||||
{ code: 'KI', name: 'Kiribati' },
|
||||
{ code: 'KR', name: 'South Korea' },
|
||||
{ code: 'KW', name: 'Kuwait' },
|
||||
{ code: 'KG', name: 'Kyrgyzstan' },
|
||||
{ code: 'LA', name: 'Laos' },
|
||||
{ code: 'LV', name: 'Latvia' },
|
||||
{ code: 'LB', name: 'Lebanon' },
|
||||
{ code: 'LS', name: 'Lesotho' },
|
||||
{ code: 'LR', name: 'Liberia' },
|
||||
{ code: 'LY', name: 'Libya' },
|
||||
{ code: 'LI', name: 'Liechtenstein' },
|
||||
{ code: 'LT', name: 'Lithuania' },
|
||||
{ code: 'LU', name: 'Luxembourg' },
|
||||
{ code: 'MG', name: 'Madagascar' },
|
||||
{ code: 'MW', name: 'Malawi' },
|
||||
{ code: 'MY', name: 'Malaysia' },
|
||||
{ code: 'MV', name: 'Maldives' },
|
||||
{ code: 'ML', name: 'Mali' },
|
||||
{ code: 'MT', name: 'Malta' },
|
||||
{ code: 'MX', name: 'Mexico' },
|
||||
{ code: 'MD', name: 'Moldova' },
|
||||
{ code: 'MC', name: 'Monaco' },
|
||||
{ code: 'MN', name: 'Mongolia' },
|
||||
{ code: 'ME', name: 'Montenegro' },
|
||||
{ code: 'MA', name: 'Morocco' },
|
||||
{ code: 'MZ', name: 'Mozambique' },
|
||||
{ code: 'MM', name: 'Myanmar' },
|
||||
{ code: 'NA', name: 'Namibia' },
|
||||
{ code: 'NP', name: 'Nepal' },
|
||||
{ code: 'NL', name: 'Netherlands' },
|
||||
{ code: 'NZ', name: 'New Zealand' },
|
||||
{ code: 'NI', name: 'Nicaragua' },
|
||||
{ code: 'NG', name: 'Nigeria' },
|
||||
{ code: 'NO', name: 'Norway' },
|
||||
{ code: 'OM', name: 'Oman' },
|
||||
{ code: 'PK', name: 'Pakistan' },
|
||||
{ code: 'PH', name: 'Philippines' },
|
||||
{ code: 'PL', name: 'Poland' },
|
||||
{ code: 'PT', name: 'Portugal' },
|
||||
{ code: 'QA', name: 'Qatar' },
|
||||
{ code: 'RO', name: 'Romania' },
|
||||
{ code: 'RU', name: 'Russia' },
|
||||
{ code: 'SA', name: 'Saudi Arabia' },
|
||||
{ code: 'ZA', name: 'South Africa' },
|
||||
{ code: 'ES', name: 'Spain' },
|
||||
{ code: 'SE', name: 'Sweden' },
|
||||
{ code: 'CH', name: 'Switzerland' },
|
||||
{ code: 'SY', name: 'Syria' },
|
||||
{ code: 'TH', name: 'Thailand' },
|
||||
{ code: 'TR', name: 'Turkey' },
|
||||
{ code: 'UA', name: 'Ukraine' },
|
||||
{ code: 'AE', name: 'United Arab Emirates' },
|
||||
{ code: 'GB', name: 'United Kingdom' },
|
||||
//this is where chat gpt made an error
|
||||
{ code: 'US', name: 'United States' },
|
||||
{ code: 'UY', name: 'Uruguay' },
|
||||
{ code: 'UZ', name: 'Uzbekistan' },
|
||||
{ code: 'VU', name: 'Vanuatu' },
|
||||
{ code: 'VA', name: 'Vatican City' },
|
||||
{ code: 'VE', name: 'Venezuela' },
|
||||
{ code: 'VN', name: 'Vietnam' },
|
||||
{ code: 'WF', name: 'Wallis and Futuna' },
|
||||
{ code: 'EH', name: 'Western Sahara' },
|
||||
{ code: 'YE', name: 'Yemen' },
|
||||
{ code: 'ZM', name: 'Zambia' },
|
||||
{ code: 'ZW', name: 'Zimbabwe' },
|
||||
{ code: 'AX', name: 'Åland Islands' }
|
||||
];
|
||||
|
||||
@ -0,0 +1,16 @@
|
||||
|
||||
|
||||
#country-container{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left:400px ;
|
||||
}
|
||||
.image-container {
|
||||
width:"100";
|
||||
height:"100";
|
||||
margin-left: 400px;
|
||||
}
|
||||
|
||||
#background-button {
|
||||
padding-left:300px ;
|
||||
}
|
||||
@ -0,0 +1,114 @@
|
||||
/*Coding pattern
|
||||
class Main extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
//declare button variable here
|
||||
changeBackground,
|
||||
printCountries,
|
||||
|
||||
|
||||
} = this.props
|
||||
return (
|
||||
//Event hadler
|
||||
<Button text="Print Country" onClick={printCountries} style={buttonStyles} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
//Declare in App
|
||||
|
||||
|
||||
class App extends React.Component {
|
||||
//state, not used yet
|
||||
state = {
|
||||
count: 0,
|
||||
styles: {
|
||||
backgroundColor: '',
|
||||
color: '',
|
||||
},
|
||||
}
|
||||
//Button function
|
||||
printCountries = () => {
|
||||
// const firstCountry = countriesData[0]
|
||||
console.log('afghanisthan')
|
||||
}
|
||||
return (
|
||||
<Main
|
||||
//prop
|
||||
changeBackground={this.changeBackground}
|
||||
//declare it here
|
||||
printCountries = {this.printCountries}
|
||||
|
||||
/>
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Variable, eventhadler, function, prop
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
//using this.state.image is very annoying
|
||||
|
||||
//create the component
|
||||
class PrintImages extends React.Component {
|
||||
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
}
|
||||
|
||||
//step 2: initialize state
|
||||
|
||||
state = {
|
||||
imageLink: 'https://countryflagsapi.netlify.app/flag/NL.svg'
|
||||
}
|
||||
|
||||
//step 3: create a function
|
||||
|
||||
printCountries = () => {
|
||||
let firstCountry = 'https://countryflagsapi.netlify.app/flag/AF.svg'
|
||||
let secondCountry = 'https://countryflagsapi.netlify.app/flag/DE.svg'
|
||||
|
||||
let imageLink = this.state.imageLink === firstCountry ? secondCountry :firstCountry
|
||||
this.setState ({
|
||||
imageLink
|
||||
})
|
||||
|
||||
//console.log(firstCountry )
|
||||
// console.log(firstCountry)
|
||||
|
||||
//imageLink = this.printCountries()
|
||||
render() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div id ="country-container" >
|
||||
<img id="flag-image" src={this.state.imageLink} width="100" height="100"></img>
|
||||
<div>
|
||||
|
||||
<Button text="Print Country" onClick={this.printCountries} style={buttonStyles} />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
step 4: Declare the component
|
||||
<PrintImages />
|
||||
}
|
||||
*/
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue