added the quiz

ErrorEncountered

@@ -8,3 +8,7 @@
 import Requestapi from "./requestapi";
 Here the "./requestapi" should match exactly with the name of the file in the disk. Case sensitive.
 Even "Requestapi" should match the "export default Requestapi" in the component
+
+
+In useContext the object name is case sensitive. You need to use the same name in all the components
+where the context is used.

src/App.js

@@ -3,7 +3,10 @@ import "./App.css";
 import Countries from "./Countries";
 import Navbar from "./Navbar";
 import Footer from "./Footer";
+import QuizCountryCurrency from "./QuizCountryCurrency";
+import QuizMaster from "./QuizMaster";
 import { CountryContext } from "./CountryContext";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 
 function App() {
   const [countrydata, setCountrydata] = useState([]);
@@ -13,13 +16,20 @@ function App() {
   ]);
 
   return (
-    <div className="App">
-      <CountryContext.Provider value={countrydataProvider}>
-        <Navbar />
-        <Countries />
-      </CountryContext.Provider>
-      <Footer />
-    </div>
+    <Router>
+      <div className="App">
+        <CountryContext.Provider value={countrydataProvider}>
+          <Navbar />
+          <Switch>
+            <Route path="/" exact component={Countries} />
+            <Route path="/quiz" exact component={QuizMaster} />
+            {/* <QuizCountryCurrency /> */}
+            {/* <Countries /> */}
+          </Switch>
+        </CountryContext.Provider>
+        <Footer />
+      </div>
+    </Router>
   );
 }
 

src/Countries.css

@@ -2,15 +2,15 @@
   display: flex;
   /* flex-wrap: wrap; */
   /* margin-top: 80px; */
-  /* margin-left: 5px; */
+  margin-left: 10px;
   /* margin-bottom: 20px; */
 
-  background-image: linear-gradient(
+  /* background-image: linear-gradient(
     180deg,
     transparent,
     rgba(75, 75, 78, 0.61),
     rgb(110, 17, 17)
-  );
+  ); */
 }
 
 .countries__list {

src/Countries.js

@@ -30,7 +30,11 @@ function Countries() {
               name={country.name}
               flag={country.flag}
               capital={country.capital}
-              currency={country.currencies[0].name}
+              currency={
+                country.currencies[0].name +
+                " - " +
+                country.currencies[0].symbol
+              }
             />
           ))}
         </div>

src/CountryCapitalQuiz.css

@@ -0,0 +1,19 @@
+.countrycapitalquiz {
+  /* border: 1px solid red; */
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+}
+
+.countrycapitalquiz__question {
+  /* border: 2px solid blue; */
+}
+
+.countrycapitalquiz__answers {
+  /* border: 2px solid green; */
+  margin-top: 20px;
+}
+
+.countrycapitalquiz_checkanswer {
+  margin-top: 20px !important;
+}

src/CountryCapitalQuiz.js

@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+import Radio from "@material-ui/core/Radio";
+import RadioGroup from "@material-ui/core/RadioGroup";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import FormControl from "@material-ui/core/FormControl";
+import FormLabel from "@material-ui/core/FormLabel";
+import FormHelperText from "@material-ui/core/FormHelperText";
+import Button from "@material-ui/core/Button";
+
+import "./CountryCapitalQuiz.css";
+
+function CountryCapitalQuiz(props) {
+  console.log("I am in CountryCapitalQuiz");
+  const [value, setValue] = useState("");
+  const [error, setError] = useState(false);
+  const [helperText, setHelperText] = useState("What do you think?");
+
+  const handleRadioChange = (event) => {
+    setValue(event.target.value);
+    setHelperText(" ");
+    setError(false);
+  };
+
+  const handleSubmit = (event) => {
+    console.log("Initial value of radio", value);
+    event.preventDefault();
+
+    if (value === props.question.capital) {
+      setHelperText("You got it!");
+      setError(false);
+    } else if (value === "") {
+      setHelperText("Please select an option.");
+      setError(true);
+    } else {
+      setHelperText("Sorry, wrong answer!");
+      setError(true);
+    }
+  };
+
+  return (
+    <div>
+      <div className="countrycapitalquiz">
+        <div className="countrycapitalquiz__question">
+          <h1>What is the capital of {props.question.name}?</h1>
+        </div>
+        <div className="countrycapitalquiz__answers">
+          <form onSubmit={handleSubmit}>
+            <FormControl component="fieldset" error={error}>
+              {/* <FormLabel component="legend">
+              What is the capital of {props.question.name}
+            </FormLabel> */}
+              <RadioGroup
+                aria-label={`Option${props.question.name}`}
+                name={`Option${props.question.name}`}
+                value={value}
+                onChange={handleRadioChange}
+              >
+                {props.question.options.map((o) => (
+                  <FormControlLabel value={o} control={<Radio />} label={o} />
+                ))}
+              </RadioGroup>
+              <FormHelperText>{helperText}</FormHelperText>
+              <Button
+                type="submit"
+                color="primary"
+                variant="contained"
+                className="countrycapitalquiz_checkanswer"
+              >
+                Check Answer
+              </Button>
+            </FormControl>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default CountryCapitalQuiz;

src/Footer.css

@@ -6,6 +6,11 @@
   background-color: rgb(0, 8, 59);
   /* z-index: 99; */
   height: 40px;
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
 }
 
 .footer__texts {

src/Navbar.css

@@ -22,11 +22,18 @@
 
 .nav__logo {
   /* position: fixed; */
-  width: 160px;
-  left: 10px;
+  width: 260px;
+  height: 40px;
+  /* left: 10px; */
   object-fit: contain;
 }
 
+.nav__quizlogo {
+  width: 100px;
+  height: 30px;
+  margin-left: 20px;
+  object-fit: contain;
+}
 .nav__logosearch {
   justify-content: space-evenly;
 }
@@ -48,7 +55,7 @@
 }
 
 .nav__badge {
-  margin-left: 20px;
+  margin-left: 10px;
 }
 
 .nav__badgeicon {

src/Navbar.js

@@ -1,9 +1,11 @@
 import React, { useState, useEffect, useContext } from "react";
 import "./Navbar.css";
 import logo from "./images/c3f2.png";
+import quiz_logo from "./images/quiz.png";
 import { CountryContext } from "./CountryContext";
 import Badge from "@material-ui/core/Badge";
 import PublicIcon from "@material-ui/icons/Public";
+import { Link } from "react-router-dom";
 
 const base_url = "https://restcountries.eu/rest/v2/all/";
 const url_country = "https://restcountries.eu/rest/v2/name/";
@@ -81,8 +83,9 @@ function Navbar() {
 
   return (
     <div className={`nav ${show && "nav__black"}`}>
-      <img className="nav__logo" src={logo} alt="C3F-Logo" />
-
+      <Link to="/">
+        <img className="nav__logo" src={logo} alt="C3F-Logo" />
+      </Link>
       <div className="nav__search">
         <input
           className="nav__searchtext"
@@ -91,15 +94,18 @@ function Navbar() {
           value={input}
           onChange={(event) => setInput(event.target.value)}
         />
-        <button className="nav__searchbutton" onClick={() => searchCountry()}>
+        {/* <button className="nav__searchbutton" onClick={() => searchCountry()}>
           Search
-        </button>
+        </button> */}
       </div>
       <div className="nav__badge">
         <Badge badgeContent={countrydata.length} color="error" max={999}>
           <PublicIcon className="nav__badgeicon" />
         </Badge>
       </div>
+      <Link to="/quiz">
+        <img className="nav__quizlogo" src={quiz_logo} alt="quiz-logo" />
+      </Link>
     </div>
   );
 }

src/QuizCountryCurrency.css

@@ -0,0 +1,4 @@
+.quizcountrycurrency {
+  display: flex;
+  margin-top: 100px;
+}