header added

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

Hide file tree

Showing 10 changed files with 20 additions and 10 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Web Dev Quiz</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/src/App.js b/src/App.js
@@ -1,4 +1,4 @@
-import logo from './logo.svg';
+
 import './App.css';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import Main from './layout/Main';
@@ -7,6 +7,8 @@ import Topics from './components/Topics/Topics'
 import Statictics from './components/Statictics/Statictics';
 import Question from './components/Question/Question';
 import ErrorPage from './components/ErrorPage/Errorpage';
+import Quiz from './components/Quiz/Quiz';
+import Header from './components/Header/Header';
 
 const router = createBrowserRouter([
   {
@@ -23,6 +25,10 @@ const router = createBrowserRouter([
         path:'/home',
         element: <Home></Home>
       },
+      {
+        path:'/header',
+        element: <Header></Header>
+      },
       {
         path:'/statictics',
         element: <Statictics></Statictics>

diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -2,8 +2,8 @@ import React from 'react';
 
 const Header = () => {
     return (
-        <div>
-            <h2>This Is Header</h2>
+        <div className='py-4 bg-slate-600 rounded mb-4'>
+            <h2 className='text-red-100 text-5xl:'>Web Dev Quiz</h2>
         </div>
     );
 };

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 import { DataContext } from '../../layout/Main';
 import Display from '../Display/Display';
+import Header from '../Header/Header';
 
 const Home = () => {
 
@@ -10,7 +11,8 @@ const Home = () => {
 
 
     return (
-        <div className='px-4 py-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20'>
+        <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'>
+            <Header></Header>
             <div className='grid gap-8 row-gap-5 mb-8 lg:grid-cols-3 lg:row-gap-8'>
             {
                 dt.map(quiz => <Display key={quiz.id} quiz={quiz}></Display> )

diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 
 const Navbar = () => {
     return (
-        <div className='text-center p-8'>
+        <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 '>
             <Link className='mr-4' to='/home'> Home</Link>
             <Link className='mr-4' to='/topics'>Quiz</Link>
             <Link className='mr-4' to='/statictics'>Chart</Link>
@@ -13,4 +13,5 @@ const Navbar = () => {
     );
 };
 
-export default Navbar;
+export default Navbar;
+
diff --git a/src/components/Quiz/Quiz.js b/src/components/Quiz/Quiz.js
@@ -1,5 +1,7 @@
 import React, { useState } from "react";
 
+
+
 const Quiz = ({ quiz }) => {
 
   const { options, question,correctAnswer } = quiz;
@@ -8,10 +10,10 @@ const Quiz = ({ quiz }) => {
 
   const handleQuiz = (answer, correctAns) => { 
     if(answer == correctAns){
-      alert("Your answer is true")
+      alert('correct')
     }
     else{
-      alert("your answer is false")
+      alert('false')
     }
 
    }

diff --git a/src/logo.svg b/src/logo.svg