Added new styles

src/App.css

@@ -0,0 +1,4 @@
+* {
+  margin: 0;
+  /* background-color: sandybrown; */
+}

src/App.js

@@ -1,13 +1,15 @@
-import React from 'react';
-import './App.css';
-import Country from './Country';
-import Countries from './Countries';
+import React from "react";
+import "./App.css";
+import Country from "./Country";
+import Countries from "./Countries";
+import Navbar from "./Navbar";
+import Appbar from "./Appbar";
 
 function App() {
-
   return (
     <div className="App">
-      <h1>Country - Capital - Flag</h1>
+      <Navbar />
+      {/* <Appbar /> */}
       <Countries />
     </div>
   );

src/Appbar.css

@@ -0,0 +1,3 @@
+.appbar__bar {
+  background-color: #fff !important;
+}

src/Appbar.js

@@ -0,0 +1,29 @@
+import React from "react";
+import AppBar from "@material-ui/core/AppBar";
+import Toolbar from "@material-ui/core/Toolbar";
+import Typography from "@material-ui/core/Typography";
+import InputBase from "@material-ui/core/InputBase";
+import "./Appbar.css";
+
+function Appbar() {
+  return (
+    <div className="appbar">
+      <AppBar className="appbar__bar">
+        <Toolbar>
+          <Typography className="appbar__appname" variant="h6" noWrap>
+            Country Capital
+          </Typography>
+          <div className="appbar__search">
+            <div className="appbar__searchicon"></div>
+            <InputBase
+              placeholder="Search..."
+              inputProps={{ "aria-label": "search" }}
+            />
+          </div>
+        </Toolbar>
+      </AppBar>
+    </div>
+  );
+}
+
+export default Appbar;

src/Countries.css

@@ -1,5 +1,12 @@
 .countries {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-}
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 80px;
+  /* margin-left: 5px; */
+  background-image: linear-gradient(
+    180deg,
+    transparent,
+    rgba(75, 75, 78, 0.61),
+    rgb(110, 17, 17)
+  );
+}

src/Countries.js

@@ -1,32 +1,46 @@
-import React, {useEffect,useState } from 'react';
+import React, { useEffect, useState } from "react";
 import "./Countries.css";
 import Country from "./Country";
+import Requestapi from "./requestapi";
 
-function Countries() {
-  //"https://restcountries.eu/rest/v2/name/india"
-  //"https://restcountries.eu/rest/v2/all"
-    const [countryList, setcountryList] = useState([]);
+const base_url = "https://restcountries.eu/rest/v2/all";
+const country_search_url = "https://restcountries.eu/rest/v2/name/ia";
 
-    useEffect(() => {
-        getAllCountries();
-    }, []);
+function Countries({ data_passed }) {
+  const [countryList, setcountryList] = useState([]);
 
-    const getAllCountries = async() => {
-        const response = await fetch("https://restcountries.eu/rest/v2/name/ia");
-        const data =  await response.json();
-        console.log("Data",data);
-        setcountryList(data);
-    }
+  useEffect(() => {
+    // if (data_passed.length === 0) {
+    console.log("data_passed", data_passed);
+    getAllCountries();
+    // } else setcountryList(data_passed);
+    //makeApicall();
+  }, [data_passed]);
 
-    return (
-        <div className="countries">
-            {/* <ul>{countryList.map(x => <li>{x.name} - {x.capital} - {x.currencies[0].name}</li>)}</ul> */}
-            {countryList.map(x => 
-             <Country name={x.name} flag={x.flag} capital={x.capital}/>
-            )}
-
-        </div>
-    )   
+  const getAllCountries = async () => {
+    const response = await fetch(country_search_url);
+    const data = await response.json();
+
+    setcountryList(data);
+  };
+
+  // const makeApicall = () => {
+  //   console.log("Countries --> ", countryList);
+  // };
+  //console.table(countryList);
+  return (
+    <div className="countries">
+      {/* <ul>{countryList.map(x => <li>{x.name} - {x.capital} - {x.currencies[0].name}</li>)}</ul> */}
+      {countryList.map((country) => (
+        <Country
+          key={country.alpha2Code}
+          name={country.name}
+          flag={country.flag}
+          capital={country.capital}
+        />
+      ))}
+    </div>
+  );
 }
 
-export default Countries
+export default Countries;

src/Country.css

@@ -1,7 +1,37 @@
 .country {
-    max-width: 300;
-    max-height: 270;   
-    margin-left: 10px;
-    margin-bottom: 10px; 
+  margin: 5px;
+  border: 1px solid #ccc;
+  float: left;
+  width: 180px;
+
+  background-color: rgb(83, 78, 78);
+}
+
+.country__flag {
+  object-fit: contain;
+  width: 100%;
+  height: auto;
+  transition: transform 450ms; /* use a delay while transforming. Here on mouse hover the picture grows */
+}
+
+.country__flag:hover {
+  transform: scale(1.08); /*Scales the picture it's 1.08 times */
+  /* transform: translate(0px, -10px); */
+  opacity: 1;
+}
+
+.country__name {
+  font-size: 15px;
+  font-weight: 500;
+  color: #fff;
+  margin-left: 5px;
+  background-color: rgb(83, 78, 78);
 }
 
+.country__capital {
+  font-size: 10px;
+  font-weight: 500;
+  margin-left: 5px;
+  color: lightgray;
+  background-color: rgb(83, 78, 78);
+}

src/Country.js

@@ -1,60 +1,22 @@
-import React, {useEffect,useState} from 'react';
+import React, { useEffect, useState } from "react";
 import "./Country.css";
-import Card from '@material-ui/core/Card';
-import { makeStyles } from '@material-ui/core/styles';
-import CardActionArea from '@material-ui/core/CardActionArea';
-import CardActions from '@material-ui/core/CardActions';
-import CardContent from '@material-ui/core/CardContent';
-import CardMedia from '@material-ui/core/CardMedia';
-import Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
+import Card from "@material-ui/core/Card";
+import { makeStyles } from "@material-ui/core/styles";
+import CardActionArea from "@material-ui/core/CardActionArea";
+import CardActions from "@material-ui/core/CardActions";
+import CardContent from "@material-ui/core/CardContent";
+import CardMedia from "@material-ui/core/CardMedia";
+import Button from "@material-ui/core/Button";
+import Typography from "@material-ui/core/Typography";
 
 function Country(props) {
-
-    const useStyles = makeStyles({
-        root: {
-          Width: 300,
-        //   marginBottom: 10,
-        //   marginLeft: 10
-        },
-        media: {
-            width:300,
-          height: 140,
-        },
-      });
-
-    const classes = useStyles();
-
-    return (
-        <div className="country">
-         <Card className={classes.root}>
-            <CardActionArea>
-                <CardMedia
-                    className={classes.media}
-                    image={props.flag}
-                    title="Country Capital"
-                />
-                {/* <img className="country__flag" src={props.flag} alt="" /> */}
-                <CardContent>
-                <Typography gutterBottom variant="h5" component="h2">
-                    {props.name}
-                </Typography>
-                <Typography variant="body2" color="textSecondary" component="p">
-                   Capital - {props.capital}
-                </Typography>
-                </CardContent>
-            </CardActionArea>
-            <CardActions>
-                <Button size="small" color="primary">
-                Share
-                </Button>
-                <Button size="small" color="primary">
-                Learn More
-                </Button>
-            </CardActions>
-      </Card>
+  return (
+    <div className="country">
+      <img className="country__flag" src={props.flag} alt={props.name} />
+      <h2 className="country__name">{props.name}</h2>
+      <h3 className="country__capital">{props.capital}</h3>
     </div>
-    )
+  );
 }
 
-export default Country
+export default Country;

src/Navbar.css

@@ -0,0 +1,48 @@
+.nav {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 20px;
+  padding: 20px;
+  display: flex;
+  /* justify-content: space-between; */
+  align-items: center;
+  z-index: 1;
+
+  transition-timing-function: ease-in;
+  transition: all 0.5s;
+  /* border: 1px solid black; */
+  background-color: rgb(0, 8, 59);
+}
+
+.nav__black {
+  background-color: rgb(27, 27, 27);
+  /* opacity: 85%; */
+}
+
+.nav__logo {
+  /* position: fixed; */
+  width: 160px;
+  left: 10px;
+  object-fit: contain;
+}
+
+.nav__logosearch {
+  justify-content: space-evenly;
+}
+
+.nav__search {
+  /* border: 1px solid red; */
+  margin-left: 40px;
+  align-items: center;
+}
+
+.nav__searchbutton {
+  margin-left: 5px;
+  /* background-color: #fff; */
+}
+
+.nav__searchtext {
+  /* background-color: #fff; */
+  width: 300px;
+}

src/Navbar.js

@@ -0,0 +1,67 @@
+import React, { useState, useEffect } from "react";
+import "./Navbar.css";
+import logo from "./images/c3f2.png";
+import SearchIcon from "@material-ui/icons/Search";
+import Countries from "./Countries";
+import Requestapi from "./requestapi";
+
+const url_country = "https://restcountries.eu/rest/v2/name/";
+
+function Navbar() {
+  const [show, handleShow] = useState(false);
+  const [input, setInput] = useState("");
+  const [search, setSearch] = useState("India");
+  const [countryList, setcountryList] = useState([]);
+
+  useEffect(() => {
+    window.addEventListener("scroll", () => {
+      if (window.scrollY > 100) {
+        handleShow(true);
+      } else handleShow(false);
+    });
+    return () => {
+      window.removeEventListener("scroll");
+    };
+  }, []);
+
+  useEffect(() => {
+    getCountriesBySearch();
+  }, [search]);
+
+  const getCountriesBySearch = async () => {
+    const response = await fetch(`${url_country}${search}`);
+    const data = await response.json();
+
+    console.table(data);
+    setcountryList(data);
+  };
+
+  const performSearch = (event) => {
+    console.log("Search Text: ", input);
+    setSearch(input);
+  };
+
+  return (
+    <div className={`nav ${show && "nav__black"}`}>
+      <img className="nav__logo" src={logo} alt="C3F-Logo" />
+      <div className="nav__search">
+        <input
+          className="nav__searchtext"
+          type="text"
+          placeholder="Search for a country"
+          value={input}
+          onChange={(event) => setInput(event.target.value)}
+        />
+        <button
+          className="nav__searchbutton"
+          type="submit"
+          onClick={performSearch}
+        >
+          Search
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export { Navbar as default };