Setup Form Structure

Author: pktcodes

src/SetupForm.js

@@ -1,8 +1,73 @@
-import React from 'react'
-import { useGlobalContext } from './context'
+import React from "react";
+import { useGlobalContext } from "./context";
 
 const SetupForm = () => {
-  return <h2>setup form</h2>
-}
+  const { quiz, handleChange, handleSubmit, error } = useGlobalContext();
 
-export default SetupForm
+  return (
+    <main>
+      <section className="quiz quiz-small">
+        <form className="setup-form">
+          <h2>setup quiz</h2>
+
+          {/* amount */}
+          <div className="form-control">
+            <label htmlFor="amount">number of questions</label>
+            <input
+              type="number"
+              name="amount"
+              id="amount"
+              className="form-input"
+              value={quiz.amount}
+              onChange={handleChange}
+              min={1}
+              max={50}
+            />
+          </div>
+
+          {/* category */}
+          <div className="form-control">
+            <label htmlFor="category">category</label>
+            <select
+              name="category"
+              id="category"
+              className="form-input"
+              value={quiz.category}
+              onChange={handleChange}
+            >
+              <option value="sports">sports</option>
+              <option value="history">history</option>
+              <option value="politics">politics</option>
+            </select>
+          </div>
+
+          {/* difficulty */}
+          <div className="form-control">
+            <label htmlFor="difficulty">select difficulty</label>
+            <select
+              name="difficulty"
+              id="difficulty"
+              className="form-input"
+              value={quiz.difficulty}
+              onChange={handleChange}
+            >
+              <option value="easy">easy</option>
+              <option value="medium">history</option>
+              <option value="hard">politics</option>
+            </select>
+          </div>
+          {error && (
+            <div className="error">
+              can't generate questions, please try different options
+            </div>
+          )}
+          <button className="submit-btn" onClick={handleSubmit}>
+            play quiz
+          </button>
+        </form>
+      </section>
+    </main>
+  );
+};
+
+export default SetupForm;

src/context.js

@@ -23,6 +23,11 @@ const AppProvider = ({ children }) => {
   const [index, setIndex] = useState(0);
   const [correct, setCorrect] = useState(0);
   const [error, setError] = useState(false);
+  const [quiz, setQuiz] = useState({
+    amount: 10,
+    category: "sports",
+    difficulty: "easy",
+  });
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   const fetchQuestions = async (url) => {
@@ -76,9 +81,13 @@ const AppProvider = ({ children }) => {
     setIsModalOpen(false);
   };
 
-  useEffect(() => {
-    fetchQuestions(tempUrl);
-  }, []);
+  const handleChange = (event) => {
+    console.log(event);
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+  };
 
   return (
     <AppContext.Provider
@@ -93,6 +102,9 @@ const AppProvider = ({ children }) => {
         nextQuestion,
         checkAnswer,
         closeModal,
+        quiz,
+        handleChange,
+        handleSubmit,
       }}
     >
       {children}