From 0b99755ff1f15a03e977b751e9985b2f72d90f93 Mon Sep 17 00:00:00 2001 From: Kush-munot Date: Sun, 30 Oct 2022 16:45:07 +0530 Subject: [PATCH] Added Country Guide API Project --- Country Guide/ReadME.md | 31 +++++++++++++++ Country Guide/index.html | 24 ++++++++++++ Country Guide/style.css | 83 ++++++++++++++++++++++++++++++++++++++++ Country Guide/style.js | 51 ++++++++++++++++++++++++ 4 files changed, 189 insertions(+) create mode 100644 Country Guide/ReadME.md create mode 100644 Country Guide/index.html create mode 100644 Country Guide/style.css create mode 100644 Country Guide/style.js diff --git a/Country Guide/ReadME.md b/Country Guide/ReadME.md new file mode 100644 index 0000000..8137620 --- /dev/null +++ b/Country Guide/ReadME.md @@ -0,0 +1,31 @@ +# Welcome to Git-For-Geeks! + +Git-For-Geeks in as open source contribution event conducted by Geeks-for-Geeks Chapter of **Shri Ramdeobaba College of Engineering and Management, Nagpur**. + +**Make some awesome projects, put them in your directory and create a pull request.** + +- Use this project to make your first contribution to an open source project on GitHub. Practice making your first pull request to a public repository before doing the real thing! +- Celebrate Git-For-Geeks by getting involved in the open source community by completing some simple tasks in this project. +- This repository is for all members registered in Git-For-Geeks Event. + +# Problem Statement: Country Guide Application + +The user interface should have a search bar in which the users can search our country and you should use application programming interface or APIs for.Rendering the data.Of each and every country. It should have details like the country name, its capital, its national animal, national flower and some monuments that could be visited. It should also have the currency and the language spoken in that country. You can create your own JSON data or can use the application programming interface APIs. + +- If you are following a Youtube video, make sure you do some changes and *****not submit the exact code and UI*****. + +## *****How to contribute?***** + +- Fork this Repository +- Clone the Repository +- Choose a Problem statement from this Javascript Mini project Repository and provide a solution. +- Create an issue and wait for the assignment by the Mantainers. +- After the issue is assigned to you add your solution to the respective project folder, along with the problem statement file. +- Now, you are ready to make a pull request. +- Hola !! You made your PR and wait for the Mantainer to check the Plagarisim and project working. + +## Note + +- All contributors who have followed the rules to contribute get successfully merged PR. Don't forget to follow! +- Have some patience to get successfully merged PR. Keep Patience! +- If you are following a Youtube video, make sure you do some changes and *****not submit the exact code and UI*****. \ No newline at end of file diff --git a/Country Guide/index.html b/Country Guide/index.html new file mode 100644 index 0000000..3c7c1f9 --- /dev/null +++ b/Country Guide/index.html @@ -0,0 +1,24 @@ + + + + + + + country guide + + + + +
+
+ + +
+
+ +
+
+ + + + \ No newline at end of file diff --git a/Country Guide/style.css b/Country Guide/style.css new file mode 100644 index 0000000..92c2555 --- /dev/null +++ b/Country Guide/style.css @@ -0,0 +1,83 @@ +*{ + margin:0px; + padding: 0px; + box-sizing: border-box; + overflow: hidden; +} + +body{ + background-color: #A66CFF; + display: flex; + justify-content: center; + align-items:center; +} + +.main{ + display: flex; + justify-content: center; + display: grid; + position: absolute; + top: 0%; + background-color: #B1E1FF; + width: 80vw; + max-width: 37.5em; + border-radius: 0.62em; + box-shadow: 5px 5px 1px rgba(42, 42, 144, 0.453); +} + +.search-wrapper{ + margin-top: 20%; +} + +.inp{ + width: 200px; + border: none; + padding: 1vw; + margin: 1vw; + border-bottom: 1px solid rgb(253, 0, 0); +} + +.btn{ + width: 10vw; + padding: 1vw; + border-radius: .6em; + border: 1px solid red; + background-color: white; + font-size:small +} +.btn:hover{ + background-color: red; + cursor: pointer; + border: none; +} + +.info{ + display: flex; + flex-direction: column; + justify-content: center; + padding-top: 1vw; + margin-bottom: 2vw; +} +.img-div{ + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 1vw; + justify-content: center; + text-transform: uppercase; +} +h2{ + text-shadow: .5px .5px .5px rgb(77, 73, 73) ; +} +.img{ + width: 13vw; +} + +h4{ + font-size: large; + margin: .5vw; +} +span{ + font-weight: lighter; + color: rgb(91, 102, 113); +} diff --git a/Country Guide/style.js b/Country Guide/style.js new file mode 100644 index 0000000..8cb9d48 --- /dev/null +++ b/Country Guide/style.js @@ -0,0 +1,51 @@ +console.log("This is the brain of Web D") + +let input=document.getElementsByClassName("inp")[0]; +let submit_btn=document.getElementsByClassName("btn")[0]; +let res=document.getElementsByClassName("info")[0]; +submit_btn.addEventListener('click',search); + +function search(){ + res.style.color="black"; + let country_name=input.value; + let url=`https://restcountries.com/v3.1/name/${country_name}?fullText=true;`; + console.log(url); + fetch(url) + .then((response) => response.json()) + .then((data) => { + let d=data[0]; + res.innerHTML=` +
+
+ Couldn't find the flag +

${d.name.common}

+
+

Continent Name : ${d.continents}

+

Currency : + + ${data[0].currencies[Object.keys(d.currencies)].name} + - ${Object.keys(d.currencies)[0]} +

+

population : ${d.population}

+

Capital : ${d.capital[0]}

+

Border Country Code : ${d.borders.join(', ')}

+

Time Zones : ${d.timezones.join(', ')}

+

Languages : ${Object.values(data[0].languages).toString().split(",").join(", ")}

+
+ + ` + } + + ) + .catch(() =>{ + res.style.fontWeight="100"; + res.style.color="red"; + if(country_name.length == 0){ + res.innerHTML =`

Input field cannot be empty

`; + } + else{ + res.innerHTML =`

Please enter a valid Country Name.

`; + } + }); +} +