Untitled

<header>
        <h1>Sign Up</h1>
      </header>
      <form>
        <div className={`${styles["form-group"]}`}>
          <label htmlFor="firstName">First name:</label>
          <input
            type="text"
            id="firstName"
            name="firstName"
            placeholder="First name"
            onChange={(e) => setFName(e.target.value)}
          />
          <p
            className={
              fNameErrorMessage
                ? `${styles["error-message"]} ${styles.visible}`
                : `${styles["error-message"]} ${styles.hidden}`
            }
          >
            Field cannot be empty
          </p>
        </div>

        <div className={`${styles["form-group"]}`}>
          <label htmlFor="lastName">Last name:</label>
          <input
            type="text"
            id="lastName"
            name="lastName"
            placeholder="Last name"
            onChange={(e) => setLName(e.target.value)}
          />
          <p
            className={
              lNameErrorMessage
                ? `${styles["error-message"]} ${styles.visible}`
                : `${styles["error-message"]} ${styles.hidden}`
            }
          >
            Field cannot be empty
          </p>
        </div>

        <div className={`${styles["form-group"]}`}>
          <label>Grade:</label>
          <br />
          <input
            type="radio"
            id="grade9"
            name="grade"
            value="9"
            onChange={(e) => setGrade(parseInt(e.target.value))}
          />
          <label htmlFor="grade9">9</label>
          <br />
          <input
            type="radio"
            id="grade10"
            name="grade"
            value="10"
            onChange={(e) => setGrade(parseInt(e.target.value))}
          />
          <label htmlFor="grade10">10</label>
          <br />
          <input
            type="radio"
            id="grade11"
            name="grade"
            value="11"
            onChange={(e) => setGrade(parseInt(e.target.value))}
          />
          <label htmlFor="grade11">11</label>
          <br />
          <input
            type="radio"
            id="grade12"
            name="grade"
            value="12"
            onChange={(e) => setGrade(parseInt(e.target.value))}
          />
          <label htmlFor="grade12">12</label>
          <br />
          <p
            className={
              gradeErrorMessage
                ? `${styles["error-message"]} ${styles.visible}`
                : `${styles["error-message"]} ${styles.hidden}`
            }
          >
            Field cannot be empty
          </p>
        </div>

        <div className={`${styles["form-group"]}`}>
          <label htmlFor="birthdate">Birthday</label>
          <input
            type="date"
            id="birthdate"
            name="birthdate"
            placeholder="Birthday"
            onChange={(e) => setBirthday(e.target.value)}
          />
          <p
            className={
              birthdayErrorMessage
                ? `${styles["error-message"]} ${styles.visible}`
                : `${styles["error-message"]} ${styles.hidden}`
            }
          >
            Field cannot be empty
          </p>
        </div>

        <div className={`${styles["form-group"]}`}>
          <label>Are you a parent or a child?</label>
          <br />
          <input
            type="radio"
            id="parent"
            name="relationship"
            value="parent"
            onChange={() => setRelationship("parent")}
          />
          <label htmlFor="parent">Parent</label>
          <br />
          <input
            type="radio"
            id="child"
            name="relationship"
            value="child"
            onChange={() => setRelationship("child")}
          />
          <label htmlFor="child">Child</label>
          <br />
          <p
            className={
              relationshipErrorMessage
                ? `${styles["error-message"]} ${styles.visible}`
                : `${styles["error-message"]} ${styles.hidden}`
            }
          >
            Field cannot be empty
          </p>
        </div>

        <div className={`${styles["form-group"]}`}>
          <label htmlFor="email">Email:</label>
          <input
            type="email"
            id="email"
            name="email"
            placeholder="Email"
            onChange={(e) => setEmail(e.target.value)}
          />
          <p
            className={
              emailErrorMessage
                ? `${styles["error-message"]} ${styles.visible}`
                : `${styles["error-message"]}  ${styles.hidden}`
            }
          >
            Enter a valid email
          </p>
        </div>

        <div className={`${styles["form-group"]}`}>
          <label htmlFor="password">Password:</label>
          <input
            type="password"
            id="password"
            name="password"
            placeholder="Password"
            onChange={(e) => setPassword(e.target.value)}
          />
          <label htmlFor="password-again">Password Again:</label>
          <input
            type="password"
            id="password-again"
            name="password-again"
            placeholder="Reenter Password"
            onChange={(e) => setPasswordAgain(e.target.value)}
          />

          <PasswordChecklist
            rules={[
              "minLength",
              "specialChar",
              "number",
              "capital",
              "match",
              "noSpaces",
              "notEmpty",
            ]}
            minLength={8}
            value={password}
            valueAgain={passwordAgain}
            onChange={(isValid) => {
              if (isValid) {
                passwordValid = true;
              } else {
                passwordValid = false;
              }
            }}
          />
        </div>
        <button type="button" onClick={checkFields}>
          Submit
        </button>
        <nav>
          <a onClick={switchToLogin} href="#">
            Already have an account?
          </a>
        </nav>
      </form>