JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<body>
  <main>
    <form id='submit'>
      <input type='text' class='name' placeholder='name' required />
      <input type='text' class='email' placeholder='email' required />
      <input type='number' class='number' />
      <button type='submit' >
       Submit
      </button>
    </form>
    <div>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Password</th>
          </tr>
        </thead>
        <tbody class='tbody'></tbody>
      </table>
    </div>
  </main>
</body>

JavaScript

/* const contactsList = []; */
const submitBtn = document.querySelector('#submit');
submitBtn.addEventListener('submit', handleSubmit);
function handleSubmit() {
  event.preventDefault(); 
  const name = document.querySelector('.name');
  const email = document.querySelector('.email');
  const number = document.querySelector('.number');
  
  console.log('1', name.value)
  console.log('2', email.value)
  console.log('3', number.value)


  if(!name || !email || !number){
     return;
  } else {
    const table = document.querySelector('.tbody');
    const newRow = table.insertRow();
    newRow.insertCell().textContent = name.value;
    newRow.insertCell().textContent = number.value;
    newRow.insertCell().textContent = email.value;

    name.value = '';
    email.value = '';
    number.value = '';
  }
  

};