added the modified file

public/index.html

@@ -45,6 +45,8 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+
 </body>
 
+
 </html>

src/components/Confirm.js

@@ -13,6 +13,7 @@ function ConfirmationCheckbox() {
     border: "3px solid currentcolor",
     boxShadow: "0 0 3px currentcolor",
     borderRadius: "20px",
+
   };
 
   const [person, setPerson] = useState(null);
@@ -21,9 +22,10 @@ function ConfirmationCheckbox() {
   const [buttonPlayed, setButtonPlayed] = useState(false);
   const [inputValue, setInputValue] = useState("");
   const [click,setClick]=useState(false);
-
+  const [name, setName] = useState("");
   function handleClick() {
     if(inputValue===""){
+
       toast.error('Enter Your Name!', {
         position: "top-right",
         autoClose: 3000,
@@ -43,9 +45,27 @@ function ConfirmationCheckbox() {
   }
 
   function checkboxon(e) {
+
     if(e.target.checked){
+      if(inputValue===""){
+
+        toast.error('Enter Your Name!', {
+          position: "top-right",
+          autoClose: 3000,
+          hideProgressBar: false,
+          closeOnClick: true,
+          pauseOnHover: true,
+          draggable: true,
+          progress: undefined,
+          theme: "dark",
+          color:"red",
+          transition: Bounce,
+          });
+
+      }
     setIsActive(oldIsActive => !oldIsActive);
     setClick(true);
+
     }else{
       setIsActive(oldIsActive => !oldIsActive);
       toast.error('Please tick checkbox!', {
@@ -61,7 +81,7 @@ function ConfirmationCheckbox() {
         });
     }
   }
-
+ 
   function generatorRandomNumber() {
     return Math.floor(Math.random() * wives.length);
   }
@@ -77,6 +97,8 @@ function ConfirmationCheckbox() {
     setPerson(wives[randomNum]);
   };
 
+
+
   const wifestyle2 = {
     margin: "0",
     color: "white",
@@ -102,7 +124,7 @@ function ConfirmationCheckbox() {
             paddingBottom: "120px",
           }}
         >
-          <div className="form-group container">
+          <div className="form-group container" >
             <label htmlFor="exampleInputEmail1">
               <h4>What's your name?</h4>
             </label>
@@ -126,7 +148,7 @@ function ConfirmationCheckbox() {
               />
             </div>
           </div>
-          <input className="mycheckbox" type="checkbox" onChange={(e)=>{checkboxon(e)}} />
+          <input className="mycheckbox" type="checkbox" id="input"  value={inputValue} onChange={(e)=>{checkboxon(e)}} />
           &nbsp; Whichever wife I get, I will accept for the rest of my life.
           <p></p>
           <button