create a page with a name and date field in javascript

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br>

  <label for="date">Date:</label>
  <input type="date" id="date" name="date"><br>
</form>
180 chars
8 lines

form {
  border: 1px solid #ccc;
  padding: 10px;
  width: 300px;
}

label {
  display: inline-block;
  width: 100px;
  margin-bottom: 10px;
}

input[type="text"],
input[type="date"] {
  padding: 5px;
  width: 200px;
  border-radius: 3px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}
290 chars
21 lines

index.tsx
const form = document.querySelector('form');
const nameInput = document.querySelector('#name');
const dateInput = document.querySelector('#date');

form.addEventListener('submit', (event) => {
  event.preventDefault(); // Prevent the form from submitting normally
  
  const name = nameInput.value;
  const date = dateInput.value;
  
  // Do something with the name and date
  console.log(`Name: ${name}\nDate: ${date}`);
});
426 chars
14 lines