msb-public
/
30-Days-Of-React
mirror of https://github.com/Asabeneh/30-Days-Of-React
2
1
Code Issues Projects Releases Wiki Activity

country flags

Browse Source
pull/424/head
Rohan Kale 8 months ago
parent 1c5e0358e1
commit 73a377c17c
10 changed files with 698 additions and 49 deletions
Show Stats Download Patch File Download Diff File

29
08_Day_States/08_states_boilerplate/package-lock.json generated
Unescape View File

@ -4543,6 +4543,17 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/ansi-escapes/node_modules/type-fest": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.11.0.tgz",
"integrity": "sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==",
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/ansi-html": {
"version": "0.0.9",
"resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.9.tgz",
@ -15821,11 +15832,13 @@
}
},
"node_modules/type-fest": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.11.0.tgz",
"integrity": "sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==",
"version": "4.33.0",
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.33.0.tgz",
"integrity": "sha512-s6zVrxuyKbbAsSAD5ZPTB77q4YIdRctkTbJ2/Dqlinwz+8ooH2gd+YA7VA6Pa93KML9GockVvoxjZ2vHP+mu8g==",
"optional": true,
"peer": true,
"engines": {
"node": ">=8"
"node": ">=16"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
@ -15922,16 +15935,16 @@
}
},
"node_modules/typescript": {
"version": "5.7.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
"integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
"version": "4.9.5",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
"integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
"peer": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
},
"engines": {
"node": ">=14.17"
"node": ">=4.2.0"
}
},
"node_modules/unbox-primitive": {

2
08_Day_States/08_states_boilerplate/package.json
Unescape View File

@ -2,6 +2,7 @@
"name": "30-days-of-react",
"version": "0.1.0",
"private": true,
"type": "module",
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
@ -10,6 +11,7 @@
"react-dom": "^16.13.1",
"react-scripts": "^5.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",

77
08_Day_States/08_states_boilerplate/src/data/appendingIsoCodes.mjs
Unescape View File

@ -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 ()

142
08_Day_States/08_states_boilerplate/src/data/countriesAppended.js
Unescape View File

@ -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' }
];

22
08_Day_States/08_states_boilerplate/src/data/countryCodes.js
Unescape View File

@ -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"
];

158
08_Day_States/08_states_boilerplate/src/data/isoCode.js
Unescape View File

@ -0,0 +1,158 @@
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' },
{ 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' }
];

16
08_Day_States/08_states_boilerplate/src/index.css
Unescape View File

@ -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 ;
}

174
08_Day_States/08_states_boilerplate/src/index.js
Unescape View File

@ -1,9 +1,11 @@
import React from 'react'
import ReactDOM from 'react-dom'
import asabenehImage from './images/asabeneh.jpg'
import './index.css';
import { countriesData } from './data/countries.js'
import { countryCodes } from './data/countryCodes.js';
import { countryIsoCode } from './data/isoCode.js'
import { countriesAppended } from './data/countriesAppended.js';
// User Card Component
const UserCard = ({ user: { firstName, lastName, image } }) => (
<div className='user-card'>
@ -83,6 +85,112 @@ class TechList extends React.Component {
}
}
class PrintImages extends React.Component {
constructor(props) {
super(props)
}
state = {
country: {
imageLink: `https://countryflagsapi.netlify.app/flag/${countriesAppended[132].code}.svg`,
countryName: `${countriesAppended[132].name}`,
capital: `${countriesAppended[132].capital}`,
population: `${countriesAppended[132].population}`,
currency: `${countriesAppended[132].currency}`,
},
}
printCountries = () => {
// console.log('country ISO codes', countryIsoCode[0])
//console.log('countires appended', countriesAppended[0].code)
// console.log('random number', getRandomIntInclusive(0,140))
function getRandomIntInclusive(min, max) {
const minCeiled = Math.ceil(min);
const maxFloored = Math.floor(max);
return Math.floor(Math.random() * (maxFloored - minCeiled + 1) + minCeiled); // The maximum is inclusive and the minimum is inclusive
}
let randomNumberOne = getRandomIntInclusive(0,138)
let randomNumberTwo = getRandomIntInclusive(0,138)
let randomCountry = {
imageLink: `https://countryflagsapi.netlify.app/flag/${countriesAppended[132].code}.svg`,
countryName: `${countriesAppended[132].name}`,
capital: `${countriesAppended[132].capital}`,
population: `${countriesAppended[132].population}`,
currency: `${countriesAppended[132].currency}`,
}
console.log('random country',randomCountry)
let firstCountryObject = {
imageLink: `https://countryflagsapi.netlify.app/flag/${countriesAppended[randomNumberOne].code}.svg`,
countryName: `${countriesAppended[randomNumberOne].name}`,
capital: `${countriesAppended[randomNumberOne].capital}`,
population: `${countriesAppended[randomNumberOne].population}`,
currency: `${countriesAppended[randomNumberOne].currency}`,
}
let secondCountryObject = {
imageLink: `https://countryflagsapi.netlify.app/flag/${countriesAppended[randomNumberTwo].code}.svg`,
countryName: `${countriesAppended[randomNumberTwo].name}`,
capital: `${countriesAppended[randomNumberTwo].capital}`,
population: `${countriesAppended[randomNumberTwo].population}`,
currency: `${countriesAppended[randomNumberTwo].currency}`,
}
console.log('firstCountry object',firstCountryObject)
console.log('second country object', secondCountryObject)
// let firstCountry = `https://countryflagsapi.netlify.app/flag/${countriesAppended[randomNumberTwo].code}.svg`
//let secondCountry = `https://countryflagsapi.netlify.app/flag/${countriesAppended[randomNumberTwo].code}.svg`
//let imageLink = this.state.imageLink === firstCountry ? secondCountry :firstCountry
//let countryName = this.state.country.countryName
let country = this.state.country == firstCountryObject ? secondCountryObject: firstCountryObject
this.setState ({
country
})
//console.log(firstCountry )
// console.log(firstCountry)
}
//imageLink = this.printCountries()
render() {
return (
<>
<div id ="country-container" style={{backgroundColor: this.props.backgroundColor}} >
<div id="image-container">
<img id="flag-image" src={this.state.country.imageLink} width="100" height="100"></img>
</div>
<div id ="info-container"></div>
<b>Country Name:</b><p>{this.state.country.countryName}</p>
<b>Capital:</b><p>{this.state.country.capital}</p>
<b>Population:</b><p>{this.state.country.population}</p>
<b>Currency:</b><p>{this.state.country.currency}</p>
<div>
<Button text="Change Country" onClick={this.printCountries} style={buttonStyles} />
</div>
</div>
</>
)
}
}
// Main Component
// Class Component
class Main extends React.Component {
@ -96,6 +204,7 @@ class Main extends React.Component {
greetPeople,
handleTime,
changeBackground,
printCountries,
bgColor
} = this.props
@ -103,20 +212,18 @@ class Main extends React.Component {
<main style={{ backgroundColor: bgColor, color: "black" }}>
<div className='main-wrapper'>
<p>Prerequisite to get started react.js:</p>
<ul>
<TechList techs={techs} />
</ul>
<UserCard user={user} />
<Button
text='Greet People'
onClick={greetPeople}
style={buttonStyles}
/>
<Button text='Show Time' onClick={handleTime} style={buttonStyles} />
<div id ="flag-image-div">
</div>
<div id ="background-button">
<Button text="Change Background" onClick={changeBackground} style={buttonStyles} />
</div>
</div>
</div>
</main>
@ -134,7 +241,7 @@ class Footer extends React.Component {
return (
<footer style = {{backgroundColor: this.props.backgroundColor, position: 'relative'}}>
<div className='footer-wrapper'>
<p>Love</p>
<p>Copyright 2025</p>
{/* <p>Copyright {this.props.date.getFullYear()}</p> */}
</div>
</footer>
@ -143,11 +250,7 @@ class Footer extends React.Component {
}
class App extends React.Component {
/*
state = {
bgColor: '',
};
*/
state = {
count: 0,
@ -156,29 +259,19 @@ class App extends React.Component {
color: '',
},
}
//This would cause you to change color in 2 clicks
//mainBgColor = this.state.styles.backgroundColor
//otherElementBgColor = this.state.styles.color
//Without initialization you would need 2 clicks
/*
state = {
mainBgColor: "white",
otherElementBgColor: "", // Instead of an empty string
};
*/
// Function to toggle main background color
toggleMainBg = () => {
this.setState({
backgroundColor: this.state.backgroundColor === "white" ? "purple" : "white",
backgroundColor: this.state.backgroundColor === "white" ? "#2a176b" : "white",
});
};
// Function to toggle header and footer background color
toggleHeaderFooterBg = () => {
this.setState({
otherElementBgColor: this.state.otherElementBgColor === "" ? "purple" : "",
otherElementBgColor: this.state.otherElementBgColor === "" ? "#2a176b" : "",
});
};
@ -195,6 +288,12 @@ class App extends React.Component {
});
*/
};
printCountries = () => {
const firstCountry = 'AF'
//console.log(firstCountry )
//console.log(firstCountry)
return firstCountry
}
/*
state = {
mainBgColor: "white", // Initial background for Main
@ -257,17 +356,20 @@ class App extends React.Component {
return (
<div className='app' >
{this.state.backgroundColor }
<Header data={data} backgroundColor={this.state.otherElementBgColor} />
<PrintImages backgroundColor={this.state.otherElementBgColor} />
<Main
user={user}
techs={techs}
handleTime={this.handleTime}
greetPeople={this.greetPeople}
changeBackground={this.changeBackground}
printCountries = {this.printCountries}
bgColor={this.state.backgroundColor}
/>
<Footer backgroundColor={this.state.otherElementBgColor} />
</div>
@ -288,5 +390,3 @@ ReactDOM.render(<App />, rootElement)

114
08_Day_States/08_states_boilerplate/src/solutions.md
Unescape View File

@ -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 />
}
*/

13
08_Day_States/08_states_boilerplate/yarn.lock
Unescape View File

@ -9385,7 +9385,7 @@ type-detect@4.0.8:
resolved "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz"
integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
type-fest@^0.11.0, "type-fest@>=0.17.0 <5.0.0":
type-fest@^0.11.0:
version "0.11.0"
resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.11.0.tgz"
integrity sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==
@ -9400,6 +9400,11 @@ type-fest@^0.20.2:
resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz"
integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
"type-fest@>=0.17.0 <5.0.0":
version "4.33.0"
resolved "https://registry.npmjs.org/type-fest/-/type-fest-4.33.0.tgz"
integrity sha512-s6zVrxuyKbbAsSAD5ZPTB77q4YIdRctkTbJ2/Dqlinwz+8ooH2gd+YA7VA6Pa93KML9GockVvoxjZ2vHP+mu8g==
type-is@~1.6.18:
version "1.6.18"
resolved "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz"
@ -9461,9 +9466,9 @@ typedarray-to-buffer@^3.1.5:
is-typedarray "^1.0.0"
"typescript@^3.2.1 || ^4", "typescript@>= 2.7", "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta":
version "5.7.3"
resolved "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz"
integrity sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==
version "4.9.5"
resolved "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz"
integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
unbox-primitive@^1.1.0:
version "1.1.0"

Write Preview
Loading…
Cancel
Save