Merge pull request #7 from kushwahramkumar2003/pankaj

Pankaj to main

package.json

@@ -9,6 +9,7 @@
     "concurrently": "^8.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.19.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -38,6 +39,7 @@
     ]
   },
   "devDependencies": {
-    "react-scripts": "^5.0.1"
+    "react-scripts": "^5.0.1",
+    "tailwindcss": "^3.3.5"
   }
 }

src/App.js

@@ -1,10 +1,25 @@
-// import logo from './logo.svg';
-import Login from './Components/login';
+import Login from "./Components/login"
+import Signup from "./Components/SignUp"
+import Navbar from "./Components/Navbar"
+import { BrowserRouter as Router, Routes, Route} from "react-router-dom";
+
 import './App.css';
+import Quiz from "./Components/Quiz";
 
 function App() {
   return (
-    <Login></Login>
+
+   <Router>
+    <Routes>
+      <Route path="/" element={<Navbar/>}></Route>
+      <Route exact path="/login" element={<Login/>} ></Route>
+      <Route exact path="/SignUp" element={<Signup/>}></Route>
+      <Route exact path="/Quiz" element={<Quiz/>} ></Route>
+
+    </Routes>
+   </Router>
+
+
 
   );
 }

src/Components/Login.css

@@ -6,7 +6,7 @@
     overflow-x: hidden;
 }
 body {
-    background: #FFF;
+    background: #fff;
 }
 .main {
     height: 100vh;
@@ -700,4 +700,9 @@ font-weight: 400;
 .right-img img {
     width: 17.88881rem;
     height: 14.47794rem;
+}
+.link{
+    text-decoration: none;
+    color: #FCC822;
+
 }

src/Components/Navbar.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import  capLogo  from './Images/logo.svg'
+import rightimg from './Images/Right-img.svg'
+import {Link} from 'react-router-dom';
+
+const menuLinks = [
+  { name: "How it works", link: "#works" },
+  { name: "Features", link: "#features" },
+  { name: "About Us", link: "#about" },
+  { name: "Login", link: "#loginpage" },
+];
+const Navbar = () => {
+  return (
+    <>
+      <nav>
+      <div className="flex items-center justify-between">
+        <div className="mx-7">
+        <img src={capLogo} ></img>
+
+        </div>
+        <div>
+          <ul className="flex items-center gap-1 py-2 text-lg">
+            {menuLinks?.map((menu, i) => (
+              <li key={i} className="px-6 hover:text-[#FCC822]">
+                <a href={menu?.link}>{menu?.name}</a>
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div
+
+        >
+
+        </div>
+        <div>
+
+        </div>
+      </div>
+    </nav>
+    <div className='main'>
+    <div className='container'>
+
+      <h4 className="text-4xl font-bold">
+           Learn <span className="text-cyan-600">
+           <br/></span>
+            <span>New concepts
+           </span><br/>
+           for each question
+          </h4>
+          <p>We help you prepare for exams and quizes</p>
+          <div className='Btn-container'>
+         <button className='mt-8 w-28 h-12 bg-[#FCC822]'>Start Solving</button>
+          <img src={rightimg}></img>
+
+
+          </div>
+    </div>
+    <Link to="/login">Go to Login</Link>
+    </div>
+  </>
+  );
+}
+
+export default Navbar;

src/Components/Quiz.jsx

@@ -0,0 +1,95 @@
+import { useState } from 'react'
+import { quiz } from './quetions'
+import './quiz.css'
+
+const Quiz = () => {
+  const [activeQuestion, setActiveQuestion] = useState(0)
+  const [selectedAnswer, setSelectedAnswer] = useState('')
+  const [showResult, setShowResult] = useState(false)
+  const [selectedAnswerIndex, setSelectedAnswerIndex] = useState(null)
+  const [result, setResult] = useState({
+    score: 0,
+    correctAnswers: 0,
+    wrongAnswers: 0,
+  })
+
+  const { questions } = quiz
+  const { question, choices, correctAnswer } = questions[activeQuestion]
+
+  const onClickNext = () => {
+    setSelectedAnswerIndex(null)
+    setResult((prev) =>
+      selectedAnswer
+        ? {
+            ...prev,
+            score: prev.score + 5,
+            correctAnswers: prev.correctAnswers + 1,
+          }
+        : { ...prev, wrongAnswers: prev.wrongAnswers + 1 }
+    )
+    if (activeQuestion !== questions.length - 1) {
+      setActiveQuestion((prev) => prev + 1)
+    } else {
+      setActiveQuestion(0)
+      setShowResult(true)
+    }
+  }
+
+  const onAnswerSelected = (answer, index) => {
+    setSelectedAnswerIndex(index)
+    if (answer === correctAnswer) {
+      setSelectedAnswer(true)
+    } else {
+      setSelectedAnswer(false)
+    }
+  }
+
+  const addLeadingZero = (number) => (number > 9 ? number : `0${number}`)
+
+  return (
+    <div className="quiz-container">
+      {!showResult ? (
+        <div>
+          <div>
+            <span className="active-question-no">{addLeadingZero(activeQuestion + 1)}</span>
+            <span className="total-question">/{addLeadingZero(questions.length)}</span>
+          </div>
+          <h2>{question}</h2>
+          <ul>
+            {choices.map((answer, index) => (
+              <li
+                onClick={() => onAnswerSelected(answer, index)}
+                key={answer}
+                className={selectedAnswerIndex === index ? 'selected-answer' : null}>
+                {answer}
+              </li>
+            ))}
+          </ul>
+          <div className="flex-right">
+            <button onClick={onClickNext} disabled={selectedAnswerIndex === null}>
+              {activeQuestion === questions.length - 1 ? 'Finish' : 'Next'}
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div className="result">
+          <h3>Result</h3>
+          <p>
+            Total Question: <span>{questions.length}</span>
+          </p>
+          <p>
+            Total Score:<span> {result.score}</span>
+          </p>
+          <p>
+            Correct Answers:<span> {result.correctAnswers}</span>
+          </p>
+          <p>
+            Wrong Answers:<span> {result.wrongAnswers}</span>
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Quiz