question section added

Rakibhasaniu · Oct 12, 2022 · 5d20744 · 5d20744
1 parent a7310d8
commit 5d20744
Show file tree

Hide file tree

Showing 15 changed files with 821 additions and 32 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,14 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@heroicons/react": "^2.0.12",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "chart.js": "^3.9.1",
+    "daisyui": "^2.31.0",
     "react": "^18.2.0",
+    "react-chartjs-2": "^4.3.1",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.4.2",
     "react-scripts": "5.0.1",
     "react-toastify": "^9.0.8",
+    "recharts": "^2.1.15",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/src/App.js b/src/App.js
@@ -5,10 +5,12 @@ import Main from './layout/Main';
 import Home from './components/Home/Home'
 import Topics from './components/Topics/Topics'
 import Statictics from './components/Statictics/Statictics';
-import Question from './components/Question/Question';
+import Question from './components/Blog/Blog';
 import ErrorPage from './components/ErrorPage/Errorpage';
 import Quiz from './components/Quiz/Quiz';
 import Header from './components/Header/Header';
+import Blog from './components/Blog/Blog';
+import Item from './components/Item/Item';
 
 const router = createBrowserRouter([
   {
@@ -31,16 +33,23 @@ const router = createBrowserRouter([
       },
       {
         path:'/statictics',
+        loader: async () => fetch('https://openapi.programming-hero.com/api/quiz'),
         element: <Statictics></Statictics>
       },
       {
-        path:'/question',
-        element: <Question></Question>
+        path:'/blog',
+        element: <Blog></Blog>
       },
       {
         path:'/quiz/:id',
         loader: async({params}) => await fetch(`https://openapi.programming-hero.com/api/quiz/${params.id}`),
         element: <Topics></Topics>
+      },
+      {
+        path:'/topics',
+        loader: async () => {
+          return fetch('https://openapi.programming-hero.com/api/quiz')},
+        element: <Item></Item>
       }
 
     ]

diff --git a/src/components/Blog/Blog.js b/src/components/Blog/Blog.js
@@ -0,0 +1,23 @@
+import React from 'react';
+
+const Blog = () => {
+
+    return (
+        <div className='sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-4 lg:px-8 lg:py-4 justify-center'>
+            <div className='p-12  bg-slate-600  rounded'>
+                <h1 className='text-3xl py-4'>Question: What Is The Purpose Of React Router?</h1>
+                <p>ANS:React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL</p>
+            </div>
+            <div className='p-12  bg-slate-600 rounded'>
+                <h1 className='text-3xl py-4'>Question: How Does ContextApi Works? </h1>
+                <p>ANS:The React Context API is a way for a React app to effectively produce global variables that can be passed around. This is the alternative to "prop drilling" or moving props from grandparent to child to parent, and so on. Context is also touted as an easier, lighter approach to state management using Redux</p>
+            </div>
+            <div className='p-12   bg-slate-600  rounded'>
+                <h1 className='text-3xl py-4'>What Is useRef Hooks?</h1>
+                <p>ANS:The useRef Hook allows you to persist values between renders. It can be used to store a mutable value that does not cause a re-render when updated. It can be used to access a DOM element directly</p>
+            </div>
+        </div>
+    );
+};
+
+export default Blog;
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -2,9 +2,16 @@ import React from 'react';
 
 const Header = () => {
     return (
-        <div className='py-4 bg-slate-600 rounded mb-4'>
-            <h2 className='text-red-100 text-5xl:'>Web Dev Quiz</h2>
-        </div>
+        <div className="hero min-h-50 bg-base-200">
+  <div className="hero-content flex-col lg:flex-row-reverse">
+    <img src="https://placeimg.com/260/400/arch" className="max-w-sm rounded-lg shadow-2xl" />
+    <div>
+      <h1 className="text-5xl font-bold">Box Office News!</h1>
+      <p className="py-6">Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.</p>
+      <button className="btn btn-primary">Get Started</button>
+    </div>
+  </div>
+</div>
     );
 };
 

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
@@ -11,7 +11,7 @@ const Home = () => {
 
 
     return (
-        <div className='px-4 py-4 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-4 lg:px-8 lg:py-4'>
+        <div >
             <Header></Header>
             <div className='grid gap-8 row-gap-5 mb-8 lg:grid-cols-3 lg:row-gap-8'>
             {

diff --git a/src/components/Item/Item.js b/src/components/Item/Item.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { useLoaderData } from 'react-router-dom';
+
+import Topicdetails from '../Topicdetails/Topicdetails';
+
+const Item = () => {
+     const allData = useLoaderData().data;
+    console.log(allData);
+
+
+
+
+    return (
+        <div className='grid grid-cols-1 md:grid-cols-3 gap-5 ' > 
+            {
+                allData.map(topic => <Topicdetails key={topic.id} topic={topic}></Topicdetails>)
+            }
+        </div>
+    );
+};
+
+export default Item;
diff --git a/src/components/Navbar/Navbar.css b/src/components/Navbar/Navbar.css
@@ -0,0 +1,4 @@
+.dev{
+    display: flex;
+    justify-content: center;
+}
diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js
@@ -1,15 +1,21 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import './Navbar.css'
 
 const Navbar = () => {
     return (
-        <div className='text-center  bg-slate-500   mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-4 lg:px-4 lg:py-4 rounded '>
+        <div className='flex justify-evenly  bg-slate-500   mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-4 lg:px-4 lg:py-4 rounded '>
+            <div className='dev'>
+                <h4>Web Dev Quiz</h4>
+            </div>
+            <div >
             <Link className='mr-4' to='/home'> Home</Link>
-            <Link className='mr-4' to='/topics'>Quiz</Link>
+            <Link className='mr-4' to='/topics'>Topics</Link>
             <Link className='mr-4' to='/statictics'>Chart</Link>
-            <Link className='mr-4' to='/question'>Question</Link>
+            <Link className='mr-4' to='/blog'>Blog</Link>
 
         </div>
+        </div>
     );
 };
 

diff --git a/src/components/Question/Question.js b/src/components/Question/Question.js
diff --git a/src/components/Quiz/Quiz.js b/src/components/Quiz/Quiz.js
@@ -1,30 +1,43 @@
 import React, { useState } from "react";
+import { toast, ToastContainer } from "react-toastify";
 
+import 'react-toastify/dist/ReactToastify.css';
 
 
 const Quiz = ({ quiz }) => {
 
   const { options, question,correctAnswer } = quiz;
   console.log(quiz);
   const[correct, setCorrect] = useState(false);
+  const[isshow, setIsshow] = useState(false);
 
   const handleQuiz = (answer, correctAns) => { 
     if(answer == correctAns){
-      alert('correct')
+      toast.info('Info: Right Ans!', { autoClose: 500 })
     }
     else{
-      alert('false')
+      toast.info('Info: False Ans!', { autoClose: 500 })
     }
 
    }
+   if(isshow){
+    toast.success(`${correctAnswer}`)
+   }
 
   return (
-    <div>
-      <div className="rounded">
-        {<h1 className="py-4 ">Quiz: {question}</h1>}
+    <div className="">
+      <div className="fool">
+      <span onClick={() => setIsshow(true)}><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+  <path strokeLinecap="round" strokeLinejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
+  <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+</svg>
+</span>
+        {<h1 className="py-4 text-2xl ">Quiz: {question}</h1>}
+
         {options.map((option, i) => (
-          <div className="py-32 w-2/4 h-4 bg-gray-400 my-4 ">
+          <div className="py-12 p-4  h-4 bg-gray-400 my-4 ">
             {i}.<button onClick={()=>handleQuiz(option, correctAnswer)}>{option}</button>
+            <ToastContainer></ToastContainer>
           </div>
         ))}
       </div>

diff --git a/src/components/Statictics/Statictics.js b/src/components/Statictics/Statictics.js
@@ -1,9 +1,35 @@
 import React from 'react';
+import { useLoaderData } from 'react-router-dom';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import './Statistics.css'
+
 
 const Statictics = () => {
+    const datas = useLoaderData().data;
+    console.log(datas);
     return (
-        <div>
-            <h2>This is chart area</h2>
+        <div className='rechart'>
+             <div>
+             <LineChart
+          width={300}
+          height={400}
+          data={datas}
+          margin={{
+            top: 5,
+            right: 30,
+            left: 20,
+            bottom: 5,
+          }}
+        >
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis dataKey="name" />
+          <YAxis />
+          <Tooltip />
+          <Legend />
+          <Line type="monotone" dataKey="total" stroke="#8884d8" activeDot={{ r: 8 }} />
+          <Line type="monotone" dataKey="name" stroke="#82ca9d" />
+        </LineChart>
+             </div>
         </div>
     );
 };

diff --git a/src/components/Statictics/Statistics.css b/src/components/Statictics/Statistics.css
@@ -0,0 +1,4 @@
+.rechart div{
+    margin: 50px auto;
+
+}
diff --git a/src/components/Topicdetails/Topicdetails.js b/src/components/Topicdetails/Topicdetails.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+const Topicdetails = ({topic}) => {
+    const{name,total,logo} = topic;
+    return (
+        <div className='p-5 m-5 '>
+            <div className="card w-50 bg-yellow-500 shadow-xl">
+  <figure><img src={logo} alt="Shoes" /></figure>
+  <div className="card-body">
+    <h2 className="card-title">{name}</h2>
+    <p>{total}</p>
+    <div className="card-actions justify-end">
+      <button className="btn btn-primary">Buy Now</button>
+    </div>
+  </div>
+</div>
+        </div>
+    );
+};
+
+export default Topicdetails;
diff --git a/src/components/Topics/Topics.js b/src/components/Topics/Topics.js
@@ -13,9 +13,9 @@ const Topics = () => {
 
 
     return (
-        <div className='m-10'>
+        <div className= 'flex justify-center items-center '>
             <div className=''>
-            <h2>Quiz of {data.name}</h2>
+            <h2 className='text-2xl text-center m-4 font-bold '>Quiz of {data.name}</h2>
             {
                quizs.map(quiz => <Quiz key={quiz.id} quiz={quiz}></Quiz>) 
             }