diff --git a/src/App.css b/src/App.css
index a12d240..12400a8 100644
--- a/src/App.css
+++ b/src/App.css
@@ -42,23 +42,21 @@
margin: 0;
padding: 0;
overflow: visible;
+ display: flex;
+ justify-content: center;
}
.mainnav ul li {
- display: inline-block;
- margin-right: 1 px;
+ margin: 0 24px;
font-size: 1em;
}
@media screen and (max-width: 500px) {
-
.mainnav ul {
- display: flex;
flex-direction: column;
}
.mainnav ul li {
- padding: 10px;
+ padding: 10px;
}
-
-}
\ No newline at end of file
+}
diff --git a/src/components/Confirm.js b/src/components/Confirm.js
index d74aee5..6b7e895 100644
--- a/src/components/Confirm.js
+++ b/src/components/Confirm.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
import "./bestbutton.css";
import wives from '../database/wives';
import { TwitterShareButton, TwitterFollowButton } from "react-twitter-embed";
@@ -8,27 +8,35 @@ import 'react-toastify/dist/ReactToastify.css';
import { useNavigate } from 'react-router-dom';
function ConfirmationCheckbox() {
+ const navigate = useNavigate();
+ const buttonStyle = {
+ backgroundColor: "#132a13",
+ color: "yellowgreen",
+ border: "3px solid currentcolor",
+ boxShadow: "0 0 3px currentcolor",
+ borderRadius: "20px",
+ };
+
const [person, setPerson] = useState(null);
const [isActive, setIsActive] = useState(false);
const [isChecked, setIsChecked] = useState(false);
const [buttonPlayed, setButtonPlayed] = useState(false);
const [inputValue, setInputValue] = useState("");
const [click, setClick] = useState(false);
- const navigate = useNavigate(); // for navigation
- // Define the buttonStyle after isActive is initialized
- const buttonStyle = {
- backgroundColor: isActive ? "#132a13" : "transparent", // Transparent when not active
- color: isActive ? "yellowgreen" : "grey",
- border: "3px solid currentcolor",
- boxShadow: isActive ? "0 0 3px currentcolor" : "none", // No shadow when not active
- borderRadius: "20px",
- cursor: isActive ? "pointer" : "not-allowed",
- transition: "background-color 0.3s ease, color 0.3s ease", // Smooth transition
+ useEffect(() => {
+ const storedName = localStorage.getItem("userName");
+ if (storedName) {
+ setInputValue(storedName);
+ }
+ }, []);
+
+ const storeInput = (input) => {
+ localStorage.setItem("userName", input);
};
function handleClick() {
- if(inputValue === "") {
+ if (inputValue === "") {
toast.error("You didn't enter your name!", {
position: "top-right",
autoClose: 3000,
@@ -43,13 +51,31 @@ function ConfirmationCheckbox() {
transition: Bounce,
});
} else {
- setIsChecked(true); // Move to the next step
+ setIsChecked(true);
}
}
function checkboxon(e) {
- setClick(e.target.checked);
- setIsActive(e.target.checked); // Button will be enabled only if checkbox is checked
+ setClick(true);
+ if (e.target.checked) {
+ if (inputValue === "") {
+ toast.error("You didn't enter your name!", {
+ position: "top-right",
+ autoClose: 3000,
+ theme: "dark",
+ transition: Bounce,
+ });
+ }
+ setIsActive(true);
+ } else {
+ setIsActive(false);
+ toast.error("You didn't click the Checkbox", {
+ position: "top-right",
+ autoClose: 3000,
+ theme: "dark",
+ transition: Bounce,
+ });
+ }
}
function generatorRandomNumber() {
@@ -58,6 +84,7 @@ function ConfirmationCheckbox() {
function handleInputChange(event) {
setInputValue(event.target.value);
+ storeInput(event.target.value);
}
const playGame = () => {
@@ -67,10 +94,10 @@ function ConfirmationCheckbox() {
};
const playAgain = () => {
- setButtonPlayed(false); // Reset the game state
- setIsChecked(false); // Reset the checkbox state
- setClick(false); // Uncheck the checkbox
- navigate("/"); // Navigate back to the main page
+ setButtonPlayed(false);
+ setIsChecked(false);
+ setClick(false);
+ navigate("/");
};
const wifestyle2 = {
@@ -107,7 +134,7 @@ function ConfirmationCheckbox() {
- checkboxon(e)}
- />
+
+
Whichever wife I get, I will accept for the rest of my life.
@@ -148,16 +171,15 @@ function ConfirmationCheckbox() {
Ready!
- I, {inputValue}, agree to marry the woman who is about to appear as
- my future wife. Backing away from this promise would mean that I am
- not a man.
+ I, {inputValue}, solemnly pledge to marry the woman revealed as my future wife.
+ To break this vow would be to question my honor and integrity as a man.
- Who's My Wife
+ Reveal My Wife
@@ -175,7 +197,7 @@ function ConfirmationCheckbox() {
>
- {inputValue}, your future wife is
+ {inputValue}, your life’s greatest chapter is
{person.name}
@@ -240,7 +263,6 @@ function ConfirmationCheckbox() {