Uh oh! It looks like you've missed some parts of the assignment. Here are the results of the tests that we ran. A tick (✓) indicates a successful test, and a cross (✗) indicates a failed test.

✓ When loaded, the webpage should show these headings at the top of the table - Name, Email, Password, Dob, Accepted terms?

✗ After the registration form is submitted, it should show an entry in the table immediately

✗ After the registration form is submitted, it should show the entry added previously, even if the page is refreshed

✗ It should be possible to use the registration form multiple times to see many entries in the table

✓ The registration form should not accept invalid email addresses

✗ The registration form should only accept users between 18 and 55 years old

Please make sure that you go through the assignment instructions; make sure that your webpage contains a table element and that the input elements in the form have the correct id values. Our automated tests use these markers to interact with your application.

If you're having trouble with this assignment, please reach out to the Pupilfirst team on the Web Development community.
document.addEventListener("DOMContentLoaded", function () {
  const email = document.getElementById("email");
  email.addEventListener("input", () => validatemail(email));

  document.addEventListener("DOMContentLoaded", function () {
    const dobInput = document.getElementById("dob");
    const today = new Date();
    const minAge = 18;
    const maxAge = 56;

    const minDate = new Date(
      today.getFullYear() - maxAge,
      today.getMonth(),
      today.getDate() + 1
    );
    const maxDate = new Date(
      today.getFullYear() - minAge,
      today.getMonth(),
      today.getDate() + 1
    );

    dobInput.min = minDate.toISOString().split("T")[0];
    dobInput.max = maxDate.toISOString().split("T")[0];
  });

  const validatemail = (element) => {
    const value = element.value;
    let m = "";

    if (value === "") {
      m = "Email cann't be blank.";
    } else if (!/@/.test(value)) {
      m = "Email must contain '@'.";
    } else if (!/\./.test(value.split("@")[1])) {
      m = "Email must contain '.' after '@'.";
    } else {
      m = "";
    }

    element.setCustomValidity(m);
    element.reportValidity();
  };

  const userForm = document.getElementById("user-form");

  const saveUserForm = (event) => {
    event.preventDefault();
    const name = document.getElementById("name").value;
    const email = document.getElementById("email").value;
    const password = document.getElementById("password").value;
    const dob = document.getElementById("dob").value;
    const termsandconditions = document.getElementById("acceptTerms").checked;

    const entry = {
      name,
      email,
      password,
      dob,
      termsandconditions,
    };

    let userEntries = retrieveEntries();
    userEntries.push(entry);

    localStorage.setItem("users", JSON.stringify(userEntries));
    displayEntries();
  };

  userForm.addEventListener("submit", saveUserForm);

  const retrieveEntries = () => {
    let entries = localStorage.getItem("users");
    if (entries) {
      return JSON.parse(entries);
    } else {
      return [];
    }
  };

  const displayEntries = () => {
    const entries = retrieveEntries();
    const tableEntries = entries
      .map((entry) => {
        const namec = `<td class='border px-4 py-2'>${entry.name}</td>`;
        const emailc = `<td class='border px-4 py-2'>${entry.email}</td>`;
        const passwordc = `<td class='border px-4 py-2'>${entry.password}</td>`;
        const dobc = `<td class='border px-4 py-2'>${entry.dob}</td>`;
        const acceptTermsc = `<td class='border px-4 py-2'>${
          entry.termsandconditions ? "Yes" : "No"
        }</td>`;

        return `<tr>${namec}${emailc}${passwordc}${dobc}${acceptTermsc}</tr>`;
      })
      .join("\n");

    const table = `<table class="table table-striped"><thead>
      <tr>
        <th>Name</th> &nbsp
        <th>Email</th> &nbsp
        <th>Password</th> &nbsp
        <th>Dob</th> &nbsp
        <th>Accepted Terms?</th> &nbsp
      </tr>
    </thead><tbody>${tableEntries}</tbody></table>`;

    document.getElementById("user-entries").innerHTML = table;
  };

  displayEntries();
});
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Registration Form</title>
    <link href="styles.css" rel="stylesheet">
    <script src="index.js"></script>
  </head>
  <body class="bg-gray-900 text-gray-100">
    <div class="flex min-h-screen items-center justify-center p-6">
      <div class="bg-gray-800 p-8 rounded-lg shadow-lg max-w-lg w-full">
        <h2 class="text-4xl font-bold text-center mb-6">Registration Form</h2>
        <form id="user-form">
          <label for="name" class="block text-lg font-semibold mb-2">Name</label>
          <input
            required
            type="text"
            id="name"
            name="name"
            class="w-full bg-gray-700 text-gray-200 border border-gray-600 rounded-lg px-4 py-2 mb-4 focus:border-neon-green focus:ring focus:ring-neon-green focus:ring-opacity-50"
            placeholder="Enter full name"
          />
          <label for="email" class="block text-lg font-semibold mb-2">Email</label>
          <input
            required
            type="email"
            id="email"
            name="email"
            class="w-full bg-gray-700 text-gray-200 border border-gray-600 rounded-lg px-4 py-2 mb-4 focus:border-neon-green focus:ring focus:ring-neon-green focus:ring-opacity-50"
            placeholder="Enter email"
          />
          <label for="password" class="block text-lg font-semibold mb-2">Password</label>
          <input
            required
            type="password"
            id="password"
            name="password"
            class="w-full bg-gray-700 text-gray-200 border border-gray-600 rounded-lg px-4 py-2 mb-4 focus:border-neon-green focus:ring focus:ring-neon-green focus:ring-opacity-50"
            placeholder="Enter password"
          />
          <label for="dob" class="block text-lg font-semibold mb-2">Date of Birth</label>
          <input
            required
            type="date"
            id="dob"
            name="dob"
            class="w-full bg-gray-700 text-gray-200 border border-gray-600 rounded-lg px-4 py-2 mb-4 focus:border-neon-green focus:ring focus:ring-neon-green focus:ring-opacity-50"
          />
          <label for="acceptTerms" class="flex items-center mb-4">
            <input
              required
              type="checkbox"
              id="acceptTerms"
              name="acceptTerms"
              class="w-5 h-5 bg-gray-700 border-gray-600 rounded-lg mr-2"
            />
            <span class="text-lg font-semibold">Accept Terms & Conditions</span>
          </label>
          <button
            type="submit"
            id="submit"
            class="w-full py-3  rounded-lg"
          >
            Submit
          </button>
        </form>
      </div>
    </div>
    <div class="bg-gray-800 p-8 rounded-lg shadow-lg mt-6 max-w-lg mx-auto">
      <h2 class="text-3xl font-bold text-center mb-4">Entries</h2>
      <div id="user-entries"></div>
    </div>
    
  </body>
</html>