Scribd
Upload
3 views

quizquest Frontend codes

Uploaded by

hasini.thota.04
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

quizquest Frontend codes

Uploaded by

hasini.thota.04
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

C:\Users\hasin\Desktop\prog\MERN\quiz\FINAL\finalest\QuizQuest\frontend\src\hooks

hooks.js
import { useState, useEffect } from "react";

export const useGetData = () => {


const [data, setData] = useState({success: false, quizes: []});

useEffect(() => {
getData();
}, []);

async function getData() {


const respond = await fetch("http://localhost:5500/api/get-all");
const res = await respond.json();
if(res.status || res.length === 0) {
setData({success: true, quizes: []});
}
else setData({success: true, quizes: res});

return data;

export const useGetQuiz = (id) => { //hook to get a particular quiz from the servrer
const [data, setData] = useState({success: false});

useEffect(() => {
getData();
}, []);

async function getData() {


const response = await fetch(`http://localhost:5500/api/get-quiz/${id}`);
const res = await response.json();
if(res.status || !res._id) {
setData({success:true});
}
else setData({success:true, quizData: res});

return data;

}
export const useTimer = (duration) => { //hook to implement the Timer. It calculates the time left in
miliseconds and coverts that to hrs, mins, secs and returns it.

const end = Date.now() + duration + 500; // 500 ms is added to compensate the time taken to load
the quiz

const getTimeLeft = () => {


const timeLeft = end - Date.now();
const hours = Math.floor(
(timeLeft / (1000 * 60 * 60)) % 24
);
const minutes = Math.floor((timeLeft / 1000 / 60) % 60);
const seconds = Math.floor((timeLeft / 1000) % 60);

return [hours, minutes, seconds];


}

const[h, m, s] = getTimeLeft();
const [hrs, setHrs] = useState(h);
const [mins, setMins] = useState(m);
const [secs, setSecs] = useState(s);

useEffect(() => {
const timer = setInterval(() => {
const [hours, minutes, seconds] = getTimeLeft();
setHrs(hours);
setMins(minutes);
setSecs(seconds);
}, 1000);

return () => clearInterval(timer);

}, []);

return [hrs, mins, secs];

C:\Users\hasin\Desktop\prog\MERN\quiz\FINAL\finalest\QuizQuest\server\models

userSchema.js
const mongoose = require('mongoose')

const userSchema = new mongoose.Schema({


email: { type: String, required: true },
username: { type: String, required: true, unique: true },
password: { type: String, required: true }
})

const User = mongoose.model('User', userSchema)

module.exports = User

C:\Users\hasin\Desktop\prog\MERN\quiz\FINAL\finalest\QuizQuest\frontend\src\routes
routes.js
import { createBrowserRouter } from "react-router-dom";
import Register from "../components/title/register.js";
import Login from '../components/title/login.jsx';
import Home from "../components/home/home.js";
import Quizes from "../components/getAll/getAll.js";
import NewQuiz from "../components/newQuiz/newQuiz.js";
import Quiz from "../components/quiz/quiz.js";

const router = createBrowserRouter([ //routes for the app


{
path: "/",
element: <Home />
},
{
path: "/register",
element: <Register />
},
{
path: "/login",
element: <Login />
},
{
path: "/home",
element: <Home />
},
{
path: "/quizes",
element: <Quizes />
},
{
path: "/new-quiz",
element: <NewQuiz />
}
]);

export default router;

C:\Users\hasin\Desktop\prog\MERN\quiz\FINAL\finalest\QuizQuest\frontend\src

app.js
// import './App.css';
import { RouterProvider } from 'react-router-dom';
import router from "./routes/routes.js";

function App() {
return (
<RouterProvider router={router} />
)
}

export default App;

C:\Users\hasin\Desktop\prog\MERN\quiz\FINAL\finalest\QuizQuest\frontend\src\components

Components contain:
Assests
Error
getAll
home
newQuiz
pages
questionCard
quiz
quizCard
result
shimmer
subittedQues
timer
title
Navbar

You might also like