diff --git a/index.css b/index.css new file mode 100644 index 0000000..1d3d6c3 --- /dev/null +++ b/index.css @@ -0,0 +1,117 @@ +header{ + box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1); + padding-inline: 24px; +} +body{ + font-family: Arial, Helvetica, sans-serif; +} +nav h3{ + margin-left: 10px; +} +nav{ + display: flex; + justify-content: space-between; +} +nav i{ + font-size: 25px; + margin: 10px 5px 0px 0px; +} +nav i:hover{ + cursor: pointer ; +} +.main-display{ + /* padding-bottom: 30px; */ + background-color: #F3F7F6; + height: 100%; + margin: 0px; +} +.filter-section{ + display: flex; + justify-content: space-between; +} +.search-section{ + margin: 18px 0 0 25px; +} +.filter-options p{ + font-size: 15px; + margin: 12px 20px 4px 0; +} +select{ + width: 100px; + height: 25px; + margin-left: 5px; +} +#countries-tempelate{ + padding: 20px; + display: flex; + flex-wrap: wrap; + justify-content: center; + margin: 10px; + +} + +.country-name{ + min-height: 230px; + width: 160px; + background-color: rgb(255, 255, 255); + text-align: center; + box-shadow: 1px 1px 10px #8e8e8e; + margin: 9px; + border-radius: 4px; + padding: 8px; +} +.country-name img{ + width: 100%; + border-radius: 2px 2px 0px 0px; + +} +.country-name button{ + height: 17px; + width: 50px; + font-size: 10px; + padding: 1px; + /* margin-top: -1px; */ +} +.country-name button:hover{ + cursor: pointer; +} +.country-name h3{ + font-size: 16px; + margin: 12px 0 12px 0; +} +.country-name p{ + font-size: 14px; + margin-top: 9px; + word-wrap: break-word; +} +#sample{ + display: none; +} +.favourite-section{ + height: 100%; + display: flex; + flex-wrap: wrap; + justify-content: center; + padding-bottom: 20px; +} +.outer-of-favourite{ + text-align: center; + display: none; + margin: 10px; + height: 100%; + padding-top: 10px; + background-color: rgb(255, 244, 252); +} +.favourite-section h3{ + color: grey; + margin-top: 10px; + display: none; +} +.outer-of-favourite h2{ + font-size: 25px; +} +.noMatchFound{ + color: grey; + font-size: 40px; + font-weight: 700; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..616300e --- /dev/null +++ b/index.html @@ -0,0 +1,50 @@ + + + + + + Document + + + + +
+ +
+
+

Favourites

+
+

˙◠˙ Nothing in your Favourites !!

+
+
+
+
+
+ + +
+
+

Filter by Region

+ +
+
+
+
No Match Found!
+
+ +

Aland islands

+

Capital: Mariehamn

+

Region: Europe

+ +
+
+
+ + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..e0520ba --- /dev/null +++ b/index.js @@ -0,0 +1,1057 @@ +let countriesData = [ + { + name: 'Afghanistan', + topLevelDomain: ['.af'], + alpha2Code: 'AF', + alpha3Code: 'AFG', + callingCodes: ['93'], + capital: 'Kabul', + altSpellings: ['AF', 'Afġānistān'], + subregion: 'Southern Asia', + region: 'Asia', + population: 40218234, + latlng: [33, 65], + demonym: 'Afghan', + area: 652230, + timezones: ['UTC+04:30'], + borders: ['IRN', 'PAK', 'TKM', 'UZB', 'TJK', 'CHN'], + nativeName: 'افغانستان', + numericCode: '004', + flags: { + svg: 'https://d3dyfaf3iutrxo.cloudfront.net/general/upload/35989054c1e74f4db3ecb4291b36c2dc.svg', + }, + currencies: [ + { + code: 'AFN', + name: 'Afghan afghani', + symbol: '؋', + }, + ], + languages: [ + { + iso639_1: 'ps', + iso639_2: 'pus', + name: 'Pashto', + nativeName: 'پښتو', + }, + { + iso639_1: 'uz', + iso639_2: 'uzb', + name: 'Uzbek', + nativeName: 'Oʻzbek', + }, + { + iso639_1: 'tk', + iso639_2: 'tuk', + name: 'Turkmen', + nativeName: 'Türkmen', + }, + ], + translations: { + br: 'Afghanistan', + pt: 'Afeganistão', + nl: 'Afghanistan', + hr: 'Afganistan', + fa: 'افغانستان', + de: 'Afghanistan', + es: 'Afganistán', + fr: 'Afghanistan', + ja: 'アフガニスタン', + it: 'Afghanistan', + hu: 'Afganisztán', + }, + flag: 'https://upload.wikimedia.org/wikipedia/commons/5/5c/Flag_of_the_Taliban.svg', + regionalBlocs: [ + { + acronym: 'SAARC', + name: 'South Asian Association for Regional Cooperation', + }, + ], + cioc: 'AFG', + independent: true, + }, + { + name: 'Aland Islands', + topLevelDomain: ['.ax'], + alpha2Code: 'AX', + alpha3Code: 'ALA', + callingCodes: ['358'], + capital: 'Mariehamn', + altSpellings: ['AX', 'Aaland', 'Aland', 'Ahvenanmaa'], + subregion: 'Northern Europe', + region: 'Europe', + population: 28875, + latlng: [60.116667, 19.9], + demonym: 'Alandish', + area: 1580, + timezones: ['UTC+02:00'], + nativeName: 'Aland', + numericCode: '248', + flags: { + svg: 'https://d3dyfaf3iutrxo.cloudfront.net/general/upload/8a03a3ef41ee48efb9d97990d224b35a.svg', + }, + currencies: [ + { + code: 'EUR', + name: 'Euro', + symbol: '€', + }, + ], + languages: [ + { + iso639_1: 'sv', + iso639_2: 'swe', + name: 'Swedish', + nativeName: 'svenska', + }, + ], + translations: { + br: 'Aland', + pt: 'Ilhas de Aland', + nl: 'Alandeilanden', + hr: 'Alandski otoci', + fa: 'جزایر الند', + de: 'Aland', + es: 'Alandia', + fr: 'Aland', + ja: 'オーランド諸島', + it: 'Isole Aland', + hu: 'Aland-szigetek', + }, + flag: 'https://flagcdn.com/ax.svg', + regionalBlocs: [ + { + acronym: 'EU', + name: 'European Union', + }, + ], + independent: false, + }, + { + name: 'Albania', + topLevelDomain: ['.al'], + alpha2Code: 'AL', + alpha3Code: 'ALB', + callingCodes: ['355'], + capital: 'Tirana', + altSpellings: ['AL', 'Shqipëri', 'Shqipëria', 'Shqipnia'], + subregion: 'Southern Europe', + region: 'Europe', + population: 2837743, + latlng: [41, 20], + demonym: 'Albanian', + area: 28748, + gini: 33.2, + timezones: ['UTC+01:00'], + borders: ['MNE', 'GRC', 'MKD', 'UNK'], + nativeName: 'Shqipëria', + numericCode: '008', + flags: { + svg: 'https://d3dyfaf3iutrxo.cloudfront.net/general/upload/9eba5b55042f41e1824ed494a0bb1ed6.svg', + }, + currencies: [ + { + code: 'ALL', + name: 'Albanian lek', + symbol: 'L', + }, + ], + languages: [ + { + iso639_1: 'sq', + iso639_2: 'sqi', + name: 'Albanian', + nativeName: 'Shqip', + }, + ], + translations: { + br: 'Albania', + pt: 'Albânia', + nl: 'Albanië', + hr: 'Albanija', + fa: 'آلبانی', + de: 'Albanien', + es: 'Albania', + fr: 'Albanie', + ja: 'アルバニア', + it: 'Albania', + hu: 'Albánia', + }, + flag: 'https://flagcdn.com/al.svg', + regionalBlocs: [ + { + acronym: 'CEFTA', + name: 'Central European Free Trade Agreement', + }, + ], + cioc: 'ALB', + independent: true, + }, + { + name: 'Algeria', + topLevelDomain: ['.dz'], + alpha2Code: 'DZ', + alpha3Code: 'DZA', + callingCodes: ['213'], + capital: 'Algiers', + altSpellings: ['DZ', 'Dzayer', 'Algérie'], + subregion: 'Northern Africa', + region: 'Africa', + population: 44700000, + latlng: [28, 3], + demonym: 'Algerian', + area: 2381741, + gini: 27.6, + timezones: ['UTC+01:00'], + borders: ['TUN', 'LBY', 'NER', 'ESH', 'MRT', 'MLI', 'MAR'], + nativeName: 'الجزائر', + numericCode: '012', + flags: { + svg: 'https://d3dyfaf3iutrxo.cloudfront.net/general/upload/40a032f9fd5f40be830b75508af0f91d.svg', + }, + currencies: [ + { + code: 'DZD', + name: 'Algerian dinar', + symbol: 'د.ج', + }, + ], + languages: [ + { + iso639_1: 'ar', + iso639_2: 'ara', + name: 'Arabic', + nativeName: 'العربية', + }, + ], + translations: { + br: 'Aljeria', + pt: 'Argélia', + nl: 'Algerije', + hr: 'Alžir', + fa: 'الجزایر', + de: 'Algerien', + es: 'Argelia', + fr: 'Algérie', + ja: 'アルジェリア', + it: 'Algeria', + hu: 'Algéria', + }, + flag: 'https://flagcdn.com/dz.svg', + regionalBlocs: [ + { + acronym: 'AU', + name: 'African Union', + otherNames: [ + 'الاتحاد الأفريقي', + 'Union africaine', + 'União Africana', + 'Unión Africana', + 'Umoja wa Afrika', + ], + }, + { + acronym: 'AL', + name: 'Arab League', + otherNames: [ + 'جامعة الدول العربية', + 'Jāmiʻat ad-Duwal al-ʻArabīyah', + 'League of Arab States', + ], + }, + ], + cioc: 'ALG', + independent: true, + }, + { + name: 'American Samoa', + topLevelDomain: ['.as'], + alpha2Code: 'AS', + alpha3Code: 'ASM', + callingCodes: ['1'], + capital: 'Pago Pago', + altSpellings: ['AS', 'Amerika Sāmoa', 'Amelika Sāmoa', 'Sāmoa Amelika'], + subregion: 'Polynesia', + region: 'Oceania', + population: 55197, + latlng: [-14.33333333, -170], + demonym: 'American Samoan', + area: 199, + timezones: ['UTC-11:00'], + nativeName: 'American Samoa', + numericCode: '016', + flags: { + svg: 'https://d3dyfaf3iutrxo.cloudfront.net/general/upload/f097dfb6588944b29ec6d6100c2e20e9.svg', + }, + currencies: [ + { + code: 'USD', + name: 'United States Dollar', + symbol: '$', + }, + ], + languages: [ + { + iso639_1: 'en', + iso639_2: 'eng', + name: 'English', + nativeName: 'English', + }, + { + iso639_1: 'sm', + iso639_2: 'smo', + name: 'Samoan', + nativeName: "gagana fa'a Samoa", + }, + ], + translations: { + br: 'Samoa Amerikan', + pt: 'Samoa Americana', + nl: 'Amerikaans Samoa', + hr: 'Američka Samoa', + fa: 'ساموآی آمریکا', + de: 'Amerikanisch-Samoa', + es: 'Samoa Americana', + fr: 'Samoa américaines', + ja: 'アメリカ領サモア', + it: 'Samoa Americane', + hu: 'Amerikai Szamoa', + }, + flag: 'https://flagcdn.com/as.svg', + cioc: 'ASA', + independent: false, + }, + { + name: 'Andorra', + topLevelDomain: ['.ad'], + alpha2Code: 'AD', + alpha3Code: 'AND', + callingCodes: ['376'], + capital: 'Andorra la Vella', + altSpellings: ['AD', 'Principality of Andorra', "Principat d'Andorra"], + subregion: 'Southern Europe', + region: 'Europe', + population: 77265, + latlng: [42.5, 1.5], + demonym: 'Andorran', + area: 468, + timezones: ['UTC+01:00'], + borders: ['FRA', 'ESP'], + nativeName: 'Andorra', + numericCode: '020', + flags: { + svg: 'https://d3dyfaf3iutrxo.cloudfront.net/general/upload/b3430a5668744077b4f62784c41f448e.svg', + }, + currencies: [ + { + code: 'EUR', + name: 'Euro', + symbol: '€', + }, + ], + languages: [ + { + iso639_1: 'ca', + iso639_2: 'cat', + name: 'Catalan', + nativeName: 'català', + }, + ], + translations: { + br: 'Andorra', + pt: 'Andorra', + nl: 'Andorra', + hr: 'Andora', + fa: 'آندورا', + de: 'Andorra', + es: 'Andorra', + fr: 'Andorre', + ja: 'アンドラ', + it: 'Andorra', + hu: 'Andorra', + }, + flag: 'https://flagcdn.com/ad.svg', + cioc: 'AND', + independent: true, + }, + { + name: 'Angola', + topLevelDomain: ['.ao'], + alpha2Code: 'AO', + alpha3Code: 'AGO', + callingCodes: ['244'], + capital: 'Luanda', + altSpellings: ['AO', 'República de Angola', "ʁɛpublika de an'ɡɔla"], + subregion: 'Middle Africa', + region: 'Africa', + population: 32866268, + latlng: [-12.5, 18.5], + demonym: 'Angolan', + area: 1246700, + gini: 51.3, + timezones: ['UTC+01:00'], + borders: ['COG', 'COD', 'ZMB', 'NAM'], + nativeName: 'Angola', + numericCode: '024', + flags: { + svg: 'https://d3dyfaf3iutrxo.cloudfront.net/general/upload/95602ea975374854a79c257ea611f902.svg', + }, + currencies: [ + { + code: 'AOA', + name: 'Angolan kwanza', + symbol: 'Kz', + }, + ], + languages: [ + { + iso639_1: 'pt', + iso639_2: 'por', + name: 'Portuguese', + nativeName: 'Português', + }, + ], + translations: { + br: 'Angola', + pt: 'Angola', + nl: 'Angola', + hr: 'Angola', + fa: 'آنگولا', + de: 'Angola', + es: 'Angola', + fr: 'Angola', + ja: 'アンゴラ', + it: 'Angola', + hu: 'Angola', + }, + flag: 'https://flagcdn.com/ao.svg', + regionalBlocs: [ + { + acronym: 'AU', + name: 'African Union', + otherNames: [ + 'الاتحاد الأفريقي', + 'Union africaine', + 'União Africana', + 'Unión Africana', + 'Umoja wa Afrika', + ], + }, + ], + cioc: 'ANG', + independent: true, + }, + { + name: 'Anguilla', + topLevelDomain: ['.ai'], + alpha2Code: 'AI', + alpha3Code: 'AIA', + callingCodes: ['1'], + capital: 'The Valley', + altSpellings: ['AI'], + subregion: 'Caribbean', + region: 'America', + population: 13452, + latlng: [18.25, -63.16666666], + demonym: 'Anguillian', + area: 91, + timezones: ['UTC-04:00'], + nativeName: 'Anguilla', + numericCode: '660', + flags: { + svg: 'https://d3dyfaf3iutrxo.cloudfront.net/general/upload/8cc599478b7a4c38b40b1a25e8146ea6.svg', + }, + currencies: [ + { + code: 'XCD', + name: 'East Caribbean dollar', + symbol: '$', + }, + ], + languages: [ + { + iso639_1: 'en', + iso639_2: 'eng', + name: 'English', + nativeName: 'English', + }, + ], + translations: { + br: 'Anguilla', + pt: 'Anguila', + nl: 'Anguilla', + hr: 'Angvila', + fa: 'آنگویلا', + de: 'Anguilla', + es: 'Anguilla', + fr: 'Anguilla', + ja: 'アンギラ', + it: 'Anguilla', + hu: 'Anguilla', + }, + flag: 'https://flagcdn.com/ai.svg', + independent: false, + }, + { + name: 'Antarctica', + topLevelDomain: ['.aq'], + alpha2Code: 'AQ', + alpha3Code: 'ATA', + callingCodes: ['672'], + subregion: 'Antarctica', + region: 'Polar', + population: 1000, + latlng: [-74.65, 4.48], + demonym: 'Antarctic', + area: 14000000, + timezones: [ + 'UTC-03:00', + 'UTC+03:00', + 'UTC+05:00', + 'UTC+06:00', + 'UTC+07:00', + 'UTC+08:00', + 'UTC+10:00', + 'UTC+12:00', + ], + nativeName: 'Antarctica', + numericCode: '010', + flags: { + svg: 'https://d3dyfaf3iutrxo.cloudfront.net/general/upload/ee9876d8fe61478b8fbdd12ff87450bb.svg', + }, + languages: [ + { + iso639_1: 'en', + iso639_2: 'eng', + name: 'English', + nativeName: 'English', + }, + { + iso639_1: 'ru', + iso639_2: 'rus', + name: 'Russian', + nativeName: 'Русский', + }, + ], + translations: { + br: 'Antarktika', + pt: 'Antárctida', + nl: 'Antarctica', + hr: 'Antarktika', + fa: 'جنوبگان', + de: 'Antarktika', + es: 'Antártida', + fr: 'Antarctique', + ja: '南極大陸', + it: 'Antartide', + hu: 'Antarktisz', + }, + flag: 'https://flagcdn.com/aq.svg', + independent: false, + }, + { + name: 'Antigua and Barbuda', + topLevelDomain: ['.ag'], + alpha2Code: 'AG', + alpha3Code: 'ATG', + callingCodes: ['1'], + capital: "Saint John's", + altSpellings: ['AG'], + subregion: 'Caribbean', + region: 'America', + population: 97928, + latlng: [17.05, -61.8], + demonym: 'Antiguan, Barbudan', + area: 442, + timezones: ['UTC-04:00'], + nativeName: 'Antigua and Barbuda', + numericCode: '028', + flags: { + svg: 'https://d3dyfaf3iutrxo.cloudfront.net/general/upload/d2e4cbbd0af24c388800bdc030ef6f33.svg', + }, + currencies: [ + { + code: 'XCD', + name: 'East Caribbean dollar', + symbol: '$', + }, + ], + languages: [ + { + iso639_1: 'en', + iso639_2: 'eng', + name: 'English', + nativeName: 'English', + }, + ], + translations: { + br: 'Antigua ha Barbuda', + pt: 'Antígua e Barbuda', + nl: 'Antigua en Barbuda', + hr: 'Antigva i Barbuda', + fa: 'آنتیگوا و باربودا', + de: 'Antigua und Barbuda', + es: 'Antigua y Barbuda', + fr: 'Antigua-et-Barbuda', + ja: 'アンティグア・バーブーダ', + it: 'Antigua e Barbuda', + hu: 'Antigua és Barbuda', + }, + flag: 'https://flagcdn.com/ag.svg', + regionalBlocs: [ + { + acronym: 'CARICOM', + name: 'Caribbean Community', + otherNames: [ + 'Comunidad del Caribe', + 'Communauté Caribéenne', + 'Caribische Gemeenschap', + ], + }, + ], + cioc: 'ANT', + independent: true, + }, + { + name: 'Argentina', + topLevelDomain: ['.ar'], + alpha2Code: 'AR', + alpha3Code: 'ARG', + callingCodes: ['54'], + capital: 'Buenos Aires', + altSpellings: ['AR', 'Argentine Republic', 'República Argentina'], + subregion: 'South America', + region: 'America', + population: 45376763, + latlng: [-34, -64], + demonym: 'Argentinean', + area: 2780400, + gini: 42.9, + timezones: ['UTC-03:00'], + borders: ['BOL', 'BRA', 'CHL', 'PRY', 'URY'], + nativeName: 'Argentina', + numericCode: '032', + flags: { + svg: 'https://d3dyfaf3iutrxo.cloudfront.net/general/upload/cfad6abad4144069ae425767cd28ee3b.svg', + }, + currencies: [ + { + code: 'ARS', + name: 'Argentine peso', + symbol: '$', + }, + ], + languages: [ + { + iso639_1: 'es', + iso639_2: 'spa', + name: 'Spanish', + nativeName: 'Español', + }, + { + iso639_1: 'gn', + iso639_2: 'grn', + name: 'Guaraní', + nativeName: "Avañe'ẽ", + }, + ], + translations: { + br: "Arc'hantina", + pt: 'Argentina', + nl: 'Argentinië', + hr: 'Argentina', + fa: 'آرژانتین', + de: 'Argentinien', + es: 'Argentina', + fr: 'Argentine', + ja: 'アルゼンチン', + it: 'Argentina', + hu: 'Argentína', + }, + flag: 'https://flagcdn.com/ar.svg', + regionalBlocs: [ + { + acronym: 'USAN', + name: 'Union of South American Nations', + otherAcronyms: ['UNASUR', 'UNASUL', 'UZAN'], + otherNames: [ + 'Unión de Naciones Suramericanas', + 'União de Nações Sul-Americanas', + 'Unie van Zuid-Amerikaanse Naties', + 'South American Union', + ], + }, + ], + cioc: 'ARG', + independent: true, + }, + { + name: 'Armenia', + topLevelDomain: ['.am'], + alpha2Code: 'AM', + alpha3Code: 'ARM', + callingCodes: ['374'], + capital: 'Yerevan', + altSpellings: [ + 'AM', + 'Hayastan', + 'Republic of Armenia', + 'Հայաստանի Հանրապետություն', + ], + subregion: 'Western Asia', + region: 'Asia', + population: 2963234, + latlng: [40, 45], + demonym: 'Armenian', + area: 29743, + gini: 29.9, + timezones: ['UTC+04:00'], + borders: ['AZE', 'GEO', 'IRN', 'TUR'], + nativeName: 'Հայաստան', + numericCode: '051', + flags: { + svg: 'https://d3dyfaf3iutrxo.cloudfront.net/general/upload/eec483f33a29458dbd9a23ea44f62de7.svg', + }, + currencies: [ + { + code: 'AMD', + name: 'Armenian dram', + symbol: '֏', + }, + ], + languages: [ + { + iso639_1: 'hy', + iso639_2: 'hye', + name: 'Armenian', + nativeName: 'Հայերեն', + }, + ], + translations: { + br: 'Armenia', + pt: 'Arménia', + nl: 'Armenië', + hr: 'Armenija', + fa: 'ارمنستان', + de: 'Armenien', + es: 'Armenia', + fr: 'Arménie', + ja: 'アルメニア', + it: 'Armenia', + hu: 'Örményország', + }, + flag: 'https://flagcdn.com/am.svg', + regionalBlocs: [ + { + acronym: 'EEU', + name: 'Eurasian Economic Union', + otherAcronyms: ['EAEU'], + }, + ], + cioc: 'ARM', + independent: true, + }, + { + name: 'Aruba', + topLevelDomain: ['.aw'], + alpha2Code: 'AW', + alpha3Code: 'ABW', + callingCodes: ['297'], + capital: 'Oranjestad', + altSpellings: ['AW'], + subregion: 'Caribbean', + region: 'America', + population: 106766, + latlng: [12.5, -69.96666666], + demonym: 'Aruban', + area: 180, + timezones: ['UTC-04:00'], + nativeName: 'Aruba', + numericCode: '533', + flags: { + svg: 'https://d3dyfaf3iutrxo.cloudfront.net/general/upload/bd6e6827a09b4a7983009a6938f32d48.svg', + }, + currencies: [ + { + code: 'AWG', + name: 'Aruban florin', + symbol: 'ƒ', + }, + ], + languages: [ + { + iso639_1: 'nl', + iso639_2: 'nld', + name: 'Dutch', + nativeName: 'Nederlands', + }, + { + iso639_1: 'pa', + iso639_2: 'pan', + name: '(Eastern) Punjabi', + nativeName: 'ਪੰਜਾਬੀ', + }, + ], + translations: { + br: 'Aruba', + pt: 'Aruba', + nl: 'Aruba', + hr: 'Aruba', + fa: 'آروبا', + de: 'Aruba', + es: 'Aruba', + fr: 'Aruba', + ja: 'アルバ', + it: 'Aruba', + hu: 'Aruba', + }, + flag: 'https://flagcdn.com/aw.svg', + cioc: 'ARU', + independent: true, + }, + { + name: 'Australia', + topLevelDomain: ['.au'], + alpha2Code: 'AU', + alpha3Code: 'AUS', + callingCodes: ['61'], + capital: 'Canberra', + altSpellings: ['AU'], + subregion: 'Australia and New Zealand', + region: 'Oceania', + population: 25687041, + latlng: [-27, 133], + demonym: 'Australian', + area: 7692024, + gini: 34.4, + timezones: [ + 'UTC+05:00', + 'UTC+06:30', + 'UTC+07:00', + 'UTC+08:00', + 'UTC+09:30', + 'UTC+10:00', + 'UTC+10:30', + 'UTC+11:30', + ], + nativeName: 'Australia', + numericCode: '036', + flags: { + svg: 'https://d3dyfaf3iutrxo.cloudfront.net/general/upload/b06ff5e71f784901be8268c1c6916325.svg', + }, + currencies: [ + { + code: 'AUD', + name: 'Australian dollar', + symbol: '$', + }, + ], + languages: [ + { + iso639_1: 'en', + iso639_2: 'eng', + name: 'English', + nativeName: 'English', + }, + ], + translations: { + br: 'Aostralia', + pt: 'Austrália', + nl: 'Australië', + hr: 'Australija', + fa: 'استرالیا', + de: 'Australien', + es: 'Australia', + fr: 'Australie', + ja: 'オーストラリア', + it: 'Australia', + hu: 'Ausztrália', + }, + flag: 'https://flagcdn.com/au.svg', + cioc: 'AUS', + independent: true, + }, + { + name: 'Austria', + topLevelDomain: ['.at'], + alpha2Code: 'AT', + alpha3Code: 'AUT', + callingCodes: ['43'], + capital: 'Vienna', + altSpellings: ['AT', 'Österreich', 'Osterreich', 'Oesterreich'], + subregion: 'Central Europe', + region: 'Europe', + population: 8917205, + latlng: [47.33333333, 13.33333333], + demonym: 'Austrian', + area: 83871, + gini: 30.8, + timezones: ['UTC+01:00'], + borders: ['CZE', 'DEU', 'HUN', 'ITA', 'LIE', 'SVK', 'SVN', 'CHE'], + nativeName: 'Österreich', + numericCode: '040', + flags: { + svg: 'https://d3dyfaf3iutrxo.cloudfront.net/general/upload/4f94890432194cfc95b9a69dbc240c57.svg', + }, + currencies: [ + { + code: 'EUR', + name: 'Euro', + symbol: '€', + }, + ], + languages: [ + { + iso639_1: 'de', + iso639_2: 'deu', + name: 'German', + nativeName: 'Deutsch', + }, + ], + translations: { + br: 'Aostria', + pt: 'Áustria', + nl: 'Oostenrijk', + hr: 'Austrija', + fa: 'اتریش', + de: 'Österreich', + es: 'Austria', + fr: 'Autriche', + ja: 'オーストリア', + it: 'Austria', + hu: 'Ausztria', + }, + flag: 'https://flagcdn.com/at.svg', + regionalBlocs: [ + { + acronym: 'EU', + name: 'European Union', + }, + ], + cioc: 'AUT', + independent: true, + }, + ] + for(let i of countriesData){ + i.isFavourite = false; + } + const mainData = [...countriesData]; + const sample = document.querySelector('.country-name'); + + let filterOptions = ["All","Africa","America","Asia","Europe","Oceania"]; + for(let i = 0;i < filterOptions.length;i++){ + let regionToFilter = document.createElement("option"); + regionToFilter.value = filterOptions[i]; + regionToFilter.textContent = filterOptions[i]; + document.querySelector(".region-list").append(regionToFilter); + } + + let areWeInFavouriteSection = false; + + function display(data){ + document.querySelector(".noMatchFound").style.display = "none"; + let countriesTempelate = document.querySelector("#countries-tempelate"); + let currentData = countriesTempelate.children; + let count = currentData.length; + while( count > 1){ + countriesTempelate.removeChild(currentData[1]); + count -= 1; + } + + for(let i of data){ + let newCountry = sample.cloneNode(true); + newCountry.id = i.name; + let elem = Array.from(newCountry.children); + elem[0].src = i.flags.svg; + elem[1].textContent = i.name; + elem[2].textContent = `Capital: ${i.capital}`; + elem[3].textContent = `Region: ${i.region}`; + + countriesTempelate.append(newCountry); + newCountry.lastElementChild.addEventListener("click",() => { + i.isFavourite = true; + if(areWeInFavouriteSection){ + displayFavourite(); + } + + }) + } + } + + display(countriesData); + function filterOutTheCountries(keyWord){ + countriesData = mainData.filter((country) => country.region == keyWord); + display(countriesData); + if(regionSelector.value == "All"){ + countriesData = [...mainData]; + display(countriesData); + } + } + + let regionSelector = document.querySelector(".region-list") + regionSelector.addEventListener("change", () =>{ + filterOutTheCountries(regionSelector.value); + }) + + function showEmptyMessage(){ + let favouriteSection = document.querySelector(".favourite-section"); + if(favouriteSection.children.length == 1){ + favouriteSection.children[0].style.display = "block"; + } + else{ + favouriteSection.children[0].style.display = "none"; + } + } + + function displayFavourite(){ + let favouriteSection = document.querySelector(".favourite-section"); + let favouriteCountries = countriesData.filter((i) => i.isFavourite == true); + document.querySelector(".outer-of-favourite").style.display = "block"; + for(let i of favouriteCountries){ + let newCountry = sample.cloneNode(true); + newCountry.id = i.name; + let elem = Array.from(newCountry.children); + elem[0].src = i.flags.svg; + elem[1].textContent = i.name; + elem[2].textContent = `Capital: ${i.capital}`; + elem[3].textContent = `Region: ${i.region}`; + + newCountry.lastElementChild.textContent = "Remove"; + let check = Array.from(favouriteSection.children).filter((q) => q.id == i.name); + if (check.length == 0){ + favouriteSection.append(newCountry); + } + newCountry.lastElementChild.addEventListener("click",(e) => { + + i.isFavourite = false; + favouriteSection.removeChild(e.target.closest(".country-name")); + showEmptyMessage(); + + }) + } + showEmptyMessage(); + areWeInFavouriteSection = true; + } + document.querySelector(".favourite-button").addEventListener("click", () =>{ + if(areWeInFavouriteSection){ + document.querySelector(".outer-of-favourite").style.display = "none"; + areWeInFavouriteSection = false; + document.querySelector("i").style.fontWeight = 100; + document.querySelector("i").style.color = "black"; + } + else{ + document.querySelector("i").style.fontWeight = 700; + document.querySelector("i").style.color = "red"; + displayFavourite(); + } + }); + + + let inputBox = document.querySelector(".search-box") + inputBox.addEventListener("input",(e) =>{ + let result = countriesData.filter((i) => i.name.toLocaleLowerCase().includes(inputBox.value.toLocaleLowerCase())); + display(result); + if(result.length == 0){ + document.querySelector(".noMatchFound").style.display = "block"; + } + }) \ No newline at end of file