DevAffan · codERSunny812 · Oct 2, 2024
diff --git a/Mini_projects/.DS_Store b/Mini_projects/.DS_Store
diff --git a/Mini_projects/Country Guide App/index.htm b/Mini_projects/Country Guide App/index.htm
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Country Guide </title>
+
+    <!-- style sheet  -->
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+    <div class="search-text">
+        <input type="text" name="" id="country-name" placeholder="enter a country name....">
+        <button id="Submit-btn" > Submit</button>
+    </div>
+    <div id="result"></div>
+    </div>
+
+    <!-- script tag -->
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Mini_projects/Country Guide App/netlify.toml b/Mini_projects/Country Guide App/netlify.toml
@@ -0,0 +1,4 @@
+[[redirects]]
+from ="/*"
+to ="/index.htm"
+status=200
diff --git a/Mini_projects/Country Guide App/notes.txt b/Mini_projects/Country Guide App/notes.txt
@@ -0,0 +1,3 @@
+add shimmer effctr until the data is fetched through the api 
+
+and do alert the user if he entred the country name wrong 
diff --git a/Mini_projects/Country Guide App/script.js b/Mini_projects/Country Guide App/script.js
@@ -0,0 +1,82 @@
+let btn= document.getElementById('Submit-btn');
+const inputCountry=document.getElementById('country-name');
+const resultCont=document.getElementById('result');
+btn.addEventListener("click",()=>{
+    let countryName=inputCountry.value; //spain
+    let Url=`https://restcountries.com/v3.1/name/${countryName}`;
+
+    async function getData(){
+        let data = await fetch(Url);
+        let value = await data.json();
+        // console.log(value);
+        console.log(value[0]);
+        console.log(value[0]?.name?.common);
+        console.log(value[0]?.capital[0]);
+        console.log(value[0]?.continents[0]);
+        console.log(value[0]?.flags?.svg);
+        console.log(value[0]?.timezones[0]);
+        console.log(value[0]?.population);
+        console.log(value[0]?.currencies);
+        console.log(value[0]?.area);
+        console.log(value[0]?.maps?.googleMaps);
+
+        resultCont.innerHTML=`
+          <img src=${value[0]?.flags?.svg} class="flag-image" >
+            <h2>${value[0]?.name?.common}</h2>
+           <div id="wrapper"> 
+            <div id="data-wrapper">
+            <h4>continents:</h4>
+           <span>${value[0]?.continents[0]}</span>
+           </div>
+           </div>
+           <div id="wrapper"> 
+           <div id="data-wrapper">
+           <h4>capital:</h4>
+           <span>${value[0]?.capital[0]}</span>
+           </div>
+           </div>
+           <div id="wrapper"> 
+           <div id="data-wrapper">
+           <h4>timezone:</h4>
+           <span>${value[0]?.timezones[0]}</span>
+           </div>
+           </div>
+           <div id="wrapper"> 
+           <div id="data-wrapper">
+           <h4>population:</h4>
+           <span>${value[0]?.population}</span>
+           </div>
+           </div>
+           <div id="wrapper"> 
+           <div id="data-wrapper">
+           <h4>currencies:</h4>
+           <span>${value[0]?.currencies[Object.keys(value[0]?.currencies)].name} - ${Object.keys(value[0]?.currencies)}</span>
+           </div>
+           </div>
+           <div id="wrapper"> 
+           <div id="data-wrapper">
+           <h4>total area :</h4>
+           <span>${value[0]?.area}</span>
+           </div>
+           </div>
+           <div id="wrapper"> 
+           <div id="data-wrapper">
+           <h4>map link:</h4>
+           <span>${value[0]?.maps?.googleMaps} </span>
+           </div>
+           </div>` 
+
+    }
+    getData();
+
+})
+
+
+
+
+
+
+
+
+
+
diff --git a/Mini_projects/Country Guide App/style.css b/Mini_projects/Country Guide App/style.css
@@ -0,0 +1,86 @@
+@import url('https://fonts.googleapis.com/css2?family=Anek+Odia&display=swap');
+*{
+    margin: 0;
+    padding: 0;
+    font-family: 'Anek Odia', sans-serif;
+    box-sizing: border-box;
+}
+
+body{
+    background-color: black;
+
+}
+.container{
+    background-color: white;
+    width: 80vw;
+    max-width: 37.5em;
+    position: absolute;
+    transform: translate(-50%,-50%);
+    top: 50%;
+    left: 50%;
+    padding: 1em 1.2em ;
+    border-radius: 8px;
+}
+
+.search-text{
+    display: grid;
+    grid-template-columns: 9fr 2fr;
+    grid-gap: 1.2em;
+}
+
+#Submit-btn{
+    font-size: 1rem;
+    background-color: yellow;
+    outline: none;
+    border: none;
+    padding: 0.7rem ;
+    border-radius: 8px;
+    text-transform: capitalize;
+    cursor: pointer;
+}
+
+.search-text input{
+    border: none;
+    outline:none;
+    text-transform: capitalize;
+    font-size: 0.9rem;
+    border-bottom: 1px solid orangered;
+}
+
+#result{
+    /* border: 2px solid red; */
+    margin: 1.2rem 0 ;
+}
+
+.container .flag-image{
+display: block;
+width: 45%;
+min-width:7.5rem;
+margin: 1.2rem auto 1.2rem auto ;
+}
+
+.container h2{
+    font-weight: 600;
+    text-align: center;
+    color: black;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+#wrapper{
+    /* border: 2px solid rebeccapurple; */
+}
+#data-wrapper{
+    /* border: 2px solid darkgoldenrod; */
+    margin-bottom: 1.2rem;
+    letter-spacing: 0.3px;
+}
+.container h4{
+    display: inline;
+    text-transform: capitalize;
+    font-weight: 800;
+    color: #050607;
+}
+.containe span{
+    font-weight: 400;
+    color: #5d625d;
+}
diff --git a/Mini_projects/Dictionary App/fee recipt.pdf b/Mini_projects/Dictionary App/fee recipt.pdf
diff --git a/Mini_projects/Dictionary App/index.htm b/Mini_projects/Dictionary App/index.htm
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dictionary App</title>
+    <!-- style sheet  -->
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="search-word">
+            <input type="text" name="" id="word-search" placeholder="enter the word ....">
+            <button id="submit-btn"> Search</button>
+        </div>
+        <div class="result" id="result"></div>
+        </div>
+        <script src="script.js"></script>
+</body>
+</html>
diff --git a/Mini_projects/Dictionary App/netlify.toml b/Mini_projects/Dictionary App/netlify.toml
@@ -0,0 +1,4 @@
+[[_redirects]]
+from ="/*"
+to ="/index.htm"
+status=200
diff --git a/Mini_projects/Dictionary App/script.js b/Mini_projects/Dictionary App/script.js
@@ -0,0 +1,75 @@
+const url="https://api.dictionaryapi.dev/api/v2/entries/en/";
+const result= document.getElementById("result");
+const btn=document.getElementById('submit-btn');
+
+btn.addEventListener(
+    "click",
+    ()=>{
+
+        let inputWord=document.getElementById("word-search").value;
+        console.log(inputWord);
+
+        async  function getData(){
+            let data= await fetch(`${url}${inputWord}`);
+            let jsonData= await data.json();
+            console.log(jsonData);
+            console.log(jsonData[0].word);
+            console.log(jsonData[0].meanings[0].partOfSpeech);
+            console.log(jsonData[0].phonetics[0].text);
+            console.log(jsonData[0].meanings[0].definitions[0].definition);
+            console.log(jsonData[0].meanings[1].synonyms);
+            console.log(jsonData[0].meanings[1].definitions[0].definition);
+            console.log(jsonData[0].meanings[2].definitions[0].definition);
+            result.innerHTML=`
+            <div class="word">
+             <h2>${jsonData[0].word}</h2>
+            </div>
+
+            <div class="details">
+             <p>${jsonData[0].meanings[0].partOfSpeech}</p>
+             <p>/${jsonData[0].phonetics[0].text}/</p>
+            </div>
+            <p className="defination">
+            ${jsonData[0].meanings[0].definitions[0].definition}
+            </p>
+            <p className="synonyms">
+            ${jsonData[0].meanings[1].synonyms}
+            </p>
+            <p class="word-meaning">
+            ${jsonData[0].meanings[1].definitions[0].definition}
+            </p>
+            <p class="word-example">
+            ${jsonData[0].meanings[2].definitions[0].definition} 
+             </p>
+            `;
+
+
+        }
+        getData();
+
+
+
+    }
+)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		add shimmer effctr until the data is fetched through the api

		and do alert the user if he entred the country name wrong