JSFiddle - React, Tailwind, and code Playground

by Michał Oręziak

HTML

<form>
  <input type="text" placeholder="Imię" id="name">
  <input type="text" placeholder="Nazwisko" id="lastname">
  <input type="text" placeholder="Wiek" id="age">
  <input type="text" placeholder="Telefon" id="phone">
  <button type="submit">Zapisz</button>
</form>
<button id="clear">Wyczyść</button>
<table>
  <thead>
    <tr>
      <th>Imię</th>
      <th>Nazwisko</th>
      <th>Wiek</th>
      <th>Telefon</th>
    </tr>
  </thead>
  <tbody>
    
  </tbody>
</table>

CSS

input{
  display:block;
  margin:10px;
  
}

JavaScript

const users = []

const getFormData = () => {
return {
name: $('#name').value,
lastName: $('#lastname').value,
age: $('#age').value,
phone: $('#phone').value
}
}
const clearForm = () => {
document
}
const listData = () => {
$('tbody').innerHTML = users.map(createRow).join()
}
const createRow = ({name, lastName, age, phone}) => {
return `
<tr>
<td>${name}</td>
<td>${lastName}</td>
<td>${age}</td>
<td>${phone}</td>
</tr>
`
}
$('form').addEventListener('submit', e => {
e.preventDefault()
users.push(getFormData())
listData()
clearForm()
})
$('#clear').addEventListener('click', () => {
users.splice(0,users.length)
listData()
})