JSFiddle - React, Tailwind, and code Playground

by enginustun

HTML

<form action="#" id="demographics" method="get">
  <span>Name</span>
  <input type="text" id="name" name="name">
  <span>Address</span>
  <input type="text" id="address" name="address">
  <span>City</span>
  <input type="text" id="city" name="city">
  <span>State</span>
  <input type="text" id="state" name="state">
  <span>Zip Code</span>
  <input type="number" id="zip_code" name="zip_code">
  <span>Phone Number</span>
  <input type="number" id="phone_num" name="phone_num">
  <span>Snapchat</span>
  <input type="text" id="snapchat" name="snapchat">
  <span>Twitter Usernme</span>
  <input type="text" id="twitter" name="twitter">
  <span>Instagram</span>
  <input type="text" id="instagram" name="instagram">
  <span>Favorite Video Game</span>
  <input type="text" id="favorite_game" name="favorite_game">
  <button type="submit">Submit</button>
</form>
<ul id="data">
  <li>Name</li>
  <li>Address</li>
  <li>City</li>
  <li>State</li>
  <li>Zip Code</li>
  <li>Phone #</li>
  <li>Snapchat</li>
  <li>Twitter</li>
  <li>Instagram</li>
  <li>Favorite Video Game</li>
</ul>

JavaScript

let form = document.getElementById("demographics");
let table = document.getElementById('data');

form.addEventListener("submit", (e) => {
  e.preventDefault();
  submit();
})

const submit = () => {
  let name = document.getElementById("name").value;
  let address = document.getElementById("address").value;
  let city = document.getElementById("city").value;
  let state = document.getElementById("state").value;
  let zip_code = document.getElementById("zip_code").value;
  let phone = document.getElementById("phone_num").value;
  let snapchat = document.getElementById("snapchat").value;
  let twitter = document.getElementById("twitter").value;
  let instagram = document.getElementById("instagram").value;
  let game = document.getElementById("favorite_game").value;

  let array = [name, address, city, state, zip_code, phone, snapchat, twitter, instagram, game];
  array.forEach((item) => {
    var li = document.createElement("li");
    var text = document.createTextNode(item);
    li.appendChild(text);
    table.appendChild(li);
  })
  form.reset();
}