Merge pull request #11 from Anubhavprogramer/Anubhav

fix issues
technojam · Oct 6, 2023 · cd74c4a · cd74c4a
2 parents 5a7590a + 89316ab
commit cd74c4a
Show file tree

Hide file tree

Showing 18 changed files with 53 additions and 17,148 deletions.
diff --git a/countries/src/index.html b/countries/src/index.html
@@ -13,7 +13,8 @@
     <div class="container">
         <h2 class="heading">Where in the World?</h2>
         <div class="mode-container ">
-            <img class="night-mode moon" src="noun-dark-mode-4066359.png" alt="">
+
+            <img class="night-mode moon" src="noun-dark-mode-4066359.png" alt="error">
             <button class="mode">Dark mode</button>
         </div>
     </div>

diff --git a/countries/src/next_page.css b/countries/src/next_page.css
@@ -1,7 +1,7 @@
 * {
     padding: 0;
     margin: 0;
-    background-color: hsl(207, 26%, 17%);
+    /* background-color: hsl(207, 26%, 17%); */
     background-color: hsl(0, 0%, 98%);
 }
 
@@ -10,33 +10,33 @@
     justify-content: space-between;
     align-items: center;
     padding: 30px 11%;
-    background-color: hsl(209, 23%, 22%);
+    /* background-color: hsl(209, 23%, 22%); */
     background-color: hsl(0, 0%, 100%);
 }
 
 .heading {
-    background-color: hsl(209, 23%, 22%);
+    /* background-color: hsl(209, 23%, 22%); */
     background-color: hsl(0, 0%, 100%);
     color: white;
     color: black;
     font-family: Nunito Sans;
 }
 
 .mode-container {
-    background-color: hsl(209, 23%, 22%);
+    /* background-color: hsl(209, 23%, 22%); */
     background-color: hsl(0, 0%, 100%);
     display: flex;
     align-items: center;
 }
 
 .night-mode {
     width: 15px;
-    background-color: hsl(209, 23%, 22%);
+    /* background-color: hsl(209, 23%, 22%); */
     background-color: hsl(0, 0%, 100%);
 }
 
 .mode {
-    background-color: hsl(209, 23%, 22%);
+    /* background-color: hsl(209, 23%, 22%); */
     background-color: hsl(0, 0%, 100%);
     padding: 0px 12px;
     color: #fff;
@@ -60,7 +60,7 @@
     color: white;
     color: black;
     border-radius: 5px;
-    background-color: hsl(209, 23%, 22%);
+    /* background-color: hsl(209, 23%, 22%); */
     background-color: hsl(0, 0%, 100%);
     box-shadow: 0px 0px 10px 0px black;
     font-family: Nunito Sans;
@@ -79,11 +79,7 @@
 
 
 
-.flag-container {
 
-    width: 500px;
-    overflow: hidden;
-}
 
 
 
@@ -126,7 +122,7 @@
 .footer>span {
     font-size: 13px;
     padding: 5px 30px;
-    background-color: hsl(209, 23%, 22%);
+    /* background-color: hsl(209, 23%, 22%); */
     background-color: hsl(0, 0%, 100%);
 }
 

diff --git a/countries/src/script.js b/countries/src/script.js
@@ -13,7 +13,7 @@ document.addEventListener("DOMContentLoaded", () => {
     const url = await fetch("https://restcountries.com/v3.1/all");
     const res = await url.json();
     console.log(res);
-    const countriesToShow = res.slice(0, 6);
+    const countriesToShow = res.slice(0,);
     countriesToShow.forEach((element) => {
       showcountry(element);
     });
@@ -75,7 +75,7 @@ document.addEventListener("DOMContentLoaded", () => {
   })
 
   mode.addEventListener("click",()=>{
-    document.body.classList.toggle("light")
+    document.body.classList.toggle("light");
 
   })
 });
@@ -101,9 +101,9 @@ function showcountrydetails(data){
   <div class="country-data">
       <h4>${data.name.common}</h4>
       <div class="data">
-          <span><strong>Native Name :</strong>${data.name.nativeName.fra.common}</span>
+          <span><strong>Native Name :</strong>${data.name}</span>
           <span><strong>Population :</strong>${data.population}</span>
-          <span><strong>Region :</strong>${data.region}</span>
+          <span><strong>Region :</strong>${data.name}</span>
           <span><strong>Sub-region :</strong>${data.subregion}</span>
           <span><strong>Capital :</strong>${data.capital}</span>
           <span><strong>Currencies :</strong>${data.currencies.XPF.name}</span>

diff --git a/countries/src/style.css b/countries/src/style.css
@@ -4,13 +4,13 @@
     padding: 0;
     margin: 0;
     background-color: var(--bgcolor);
-    background-color: hsl(207, 26%, 17%);
-    background-color: hsl(0, 0%, 98%);
+    /* background-color: hsl(207, 26%, 17%); */
+    /* background-color: hsl(0, 0%, 98%); */
 }
 
 
 .card-container {
-    background-color: hsl(207, 26%, 17%);
+    /* background-color: hsl(207, 26%, 17%); */
 
     background-color: var(--bgcolor);
     padding-top: 70px;
@@ -20,7 +20,7 @@
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
 
-    background: hsl(0, 0%, 98%);
+    /* background: hsl(0, 0%, 98%); */
     height: 100vh;
     display: flex;
     flex-wrap: wrap;
@@ -34,11 +34,14 @@
     height: 400px;
 }
 
+.flag-container-details img{
+    width: 500px;
+}
 .card {
     margin: 50px 30px;
     margin-bottom: 50px ;
-    background-color: hsl(209, 23%, 22%);
-    background-color: hsl(0, 0%, 100%);
+    /* background-color: hsl(209, 23%, 22%); */
+    /* background-color: hsl(0, 0%, 100%); */
     height: 300px;
     width: 250px;
     border-radius: 7px;
@@ -55,8 +58,7 @@
 
 
 
-.flag-container>img {
-    object-fit: cover;
+
 
 .flag-container>img {
 
@@ -65,34 +67,35 @@
 }
 
 .country-container {
-    color: white;
-    color: black;
+    color: rgb(0, 0, 0);
+
     font-family: Nunito Sans;
     padding: 10%;
-    background-color: hsl(209, 23%, 22%);
-    background-color: hsl(0, 0%, 100%);
+   border: 1px solid black;
+   border-radius: 5px;
+    /* background-color: hsl(0, 0%, 100%); */
     display: flex;
     flex-direction: column;
 }
 
 .country-container>h4 {
     padding-bottom: 10px;
-    background-color: hsl(209, 23%, 22%);
-    background-color: hsl(0, 0%, 100%);
+
+    /* background-color: hsl(0, 0%, 100%); */
 }
 
 .country-container>span>strong {
     font-size: 13px;
-    background-color: hsl(209, 23%, 22%);
-    background-color: hsl(0, 0%, 100%);
+    /* background-color: hsl(209, 23%, 22%); */
+    /* background-color: hsl(0, 0%, 100%); */
     padding-right: 10px;
 }
 
 .country-container>span {
     padding: 10px 0px;
     font-size: 13px;
-    background-color: hsl(209, 23%, 22%);
-    background-color: hsl(0, 0%, 100%);
+    /* background-color: hsl(209, 23%, 22%); */
+    /* background-color: hsl(0, 0%, 100%); */
 }
 
 
@@ -104,13 +107,13 @@
     justify-content: space-between;
     align-items: center;
     padding: 30px 11%;
-    background-color: hsl(209, 23%, 22%);
-    background-color: hsl(0, 0%, 100%);
+    /* background-color: hsl(209, 23%, 22%); */
+    /* background-color: hsl(0, 0%, 100%); */
 }
 
 .heading {
-    background-color: hsl(209, 23%, 22%);
-    background-color: hsl(0, 0%, 100%);
+    /* background-color: hsl(209, 23%, 22%); */
+    /* background-color: hsl(0, 0%, 100%); */
     color: white;
     color: black;
     font-family: Nunito Sans;
@@ -121,8 +124,8 @@
 
     background-color: var(--bgcolor);
 
-    background-color: hsl(209, 23%, 22%);
-    background-color: hsl(0, 0%, 100%);
+    /* background-color: hsl(209, 23%, 22%); */
+    /* background-color: hsl(0, 0%, 100%); */
 
     display: flex;
     align-items: center;
@@ -136,13 +139,13 @@
 
 .mode {
 
-    background-color: hsl(209, 23%, 22%);
-    background-color: hsl(0, 0%, 100%);
+    /* background-color: hsl(209, 23%, 22%); */
+    /* background-color: hsl(0, 0%, 100%); */
 }
 
 .mode {
-    background-color: hsl(209, 23%, 22%);
-    background-color: hsl(0, 0%, 100%);
+    /* background-color: hsl(209, 23%, 22%); */
+    /* background-color: hsl(0, 0%, 100%); */
 
     padding: 0px 12px;
     color: #fff;
@@ -167,7 +170,7 @@
     align-items: center;
     justify-content: center;
     background-color: hsl(209, 23%, 22%);
-    background-color: hsl(0, 0%, 100%);
+    /* background-color: hsl(0, 0%, 100%); */
     padding: 10px;
     border-radius: 5px;
     /* background-color: var(--bgcolor); */
@@ -179,7 +182,7 @@
 
     background-color: var(--bgcolor);
 
-    background-color: hsl(0, 0%, 100%);
+    /* background-color: hsl(0, 0%, 100%); */
 
 }
 
@@ -198,7 +201,7 @@
 
     background-color: var(--bgcolor);
 
-    background-color: hsl(0, 0%, 100%);
+    /* background-color: hsl(0, 0%, 100%); */
 
     width: 300px;
     font-size: 15px;
@@ -209,17 +212,17 @@
 .dropdowncol{
     color: white;
     width: 150px;
-    position: relative;
+    position: relative;}
 
 #continentSelect {
     border: none;
     border-right: 10px solid hsl(209, 23%, 22%);
-    background-color: hsl(0, 0%, 100%);
+    /* background-color: hsl(0, 0%, 100%); */
     padding: 15px 25px;
     width: 200px;
     height: 60px;
     background-color: hsl(209, 23%, 22%);
-    background-color: hsl(0, 0%, 100%);
+    /* background-color: hsl(0, 0%, 100%); */
     color: white;
     color: black;
 
@@ -310,7 +313,7 @@
         padding-right: 80px;
         justify-content: center;
     }
-=======
+
 
 
     .container-2 {
@@ -328,4 +331,4 @@
     }
 }
 
-/* Add more media queries for other screen sizes if necessary */
+}}
diff --git a/rest-countries-api-with-color-theme-switcher-master/.gitignore b/rest-countries-api-with-color-theme-switcher-master/.gitignore