Added Country Guide API Project

UNO-Coders · Oct 30, 2022 · 0b99755 · 0b99755
1 parent d67e1f7
commit 0b99755
Show file tree

Hide file tree

Showing 4 changed files with 189 additions and 0 deletions.
diff --git a/Country Guide/ReadME.md 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*****.
diff --git a/Country Guide/index.html b/Country Guide/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>country guide</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+    <div class="main">
+        <div class="search-wrapper">
+            <input type="text" class="inp" placeholder="Write the name of a Country">
+            <button class="btn">search</button>
+        </div>
+        <div class="info">
+
+        </div>
+    </div>
+
+    <script src="style.js"></script>
+</body>
+</html>
diff --git a/Country Guide/style.css 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
@@ -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=`
+            <div class="info">
+            <div class="img-div">
+            <img src="${data[0].flags.svg}" class="img" alt="Couldn't find the flag">
+            <h2>${d.name.common}</h2>
+            </div>
+            <h4>Continent Name : <span>${d.continents}</span></h4>
+            <h4>Currency : 
+            <span>
+            ${data[0].currencies[Object.keys(d.currencies)].name} 
+            - ${Object.keys(d.currencies)[0]}
+            </span></h4>
+            <h4>population : <span>${d.population}</span></h4>
+            <h4>Capital : <span>${d.capital[0]}</span></h4>
+            <h4>Border Country Code : <span>${d.borders.join(', ')}</span></h4>
+            <h4>Time Zones : <span>${d.timezones.join(', ')}</span></h4>
+            <h4>Languages : <span>${Object.values(data[0].languages).toString().split(",").join(", ")}</span></h4>
+            </div>
+            
+            `
+        }
+
+        )
+        .catch(() =>{
+            res.style.fontWeight="100";
+            res.style.color="red";
+            if(country_name.length == 0){
+                res.innerHTML =`<h4>Input field cannot be empty</h4>`;
+            }
+            else{
+                res.innerHTML =`<h4>Please enter a valid Country Name.</h4>`;
+            }    
+        });
+}
+