JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<div>
  <form id='formData'>
    <input type='text' class='name' placeholder='name' />
    <input type='text' class='email' placeholder='email' />
    <input type='text' class='number' placeholder='number' />
    <button type='submit'>
    Submit
    </button>
  </form>
  <hr>
  <table>
  <thead>
    <tr>
      <td>Name</td>
      <td>Email</td>
      <td>Phone</td>
    </tr>
  </thead>
  <tbody class='tbody'>
  </tbody>
  </table>
  <button class='prev'>
    prev
  </button>
  <button class='next'>
    next
  </button>
</div>

JavaScript

function init() {
  const formData = document.querySelector('#formData');
  const pageSize = 3;
  let currPage = 1;
  
  formData.addEventListener('submit', handleSubmit);
  const storeData = [];
  
  function displayTable() {
  	const tbody = document.querySelector('.tbody');
  	tbody.innerHTML = '';
    
    storeData.filter((row, index) => {
    	let start = (currPage - 1) * pageSize;
      let end = currPage * pageSize;
      if (index >= start && index < end) return true;
    }).forEach((data) => {
    	const row = document.createElement('tr');
      const nameCell = document.createElement('td')
      const emailCell = document.createElement('td')
      const phoneCell = document.createElement('td')
      
      nameCell.textContent = data.name;
      emailCell.textContent = data.email;
      phoneCell.textContent = data.number;
      
      row.appendChild(nameCell)
      row.appendChild(emailCell)
      row.appendChild(phoneCell)
      tbody.appendChild(row);
    })
  }
  
  function next() {
  	console.log('next')
    if ((currPage * pageSize) < storeData.length) currPage++;
    displayTable();
  }
  
  function prev() {
  	console.log('prev')
    if(currPage > 1) currPage--;
    displayTable();
  }
  
  const nextBtn = document.querySelector('.next');
  const prevBtn = document.querySelector('.prev');
  
  nextBtn.addEventListener('click', next);
  prevBtn.addEventListener('click', prev);
  
  function reset(n, m, p) {
  	n.textContent = ''
  	m.textContent = ''
  	p.textContent = ''
  }

	function handleSubmit() {
    event.preventDefault();
    
    const name = document.querySelector('.name').value;
    const email = document.querySelector('.email').value;
    const number = document.querySelector('.number').value;
    
    storeData.push({
      name,
      email,
      number
    });
    
    console.log(storeData)

    displayTable();
    formData.reset();
  }
}

init();