JSFiddle - React, Tailwind, and code Playground

by andyjh07

HTML

<div class="container" style="height: 100vh; overflow-y:scroll; scroll-snap-type: y mandatory;">
  <!-- Intro ---------------------------->
  <div class="row scroll-snap">
    <div class="col-6 booking-left min-vh-100 d-flex align-items-center justify-content-center">
      <div class=" ">
        <div class="div">
          <img src="/img/tbw-logo.svg" style="width: 50%" alt="" class="pb-5 margin-auto">
          <h1 class="display-5">Welcome Nicola!</h1>
          <p class="text-muted">Let's get your wedding booked in.</p>
          <a href="#step-1" class="btn gradient-primary text-white">Start</a>
        </div>

      </div>

    </div>
    <div class="col-6 booking-right gradient-primary-lr min-vh-100">

    </div>
  </div>

  <!-- Step 1 - Your Details ---------------------------->
  <div class="row scroll-snap" id="step-1">
    <div class="col-6 booking-left min-vh-100 d-flex align-items-center justify-content-center">
      <div class=" ">
        <div class="div" style="width: 300px">
          <h4 class="pb-4">Your Details</h4>
          <div class="pb-3">
            <label for="spouseA_name">Name</label>
            <input type="text" name="spouseA_name" id="spouseA_name" class="form-control" onkeyup="formUpdate()">
          </div>
          <div class="pb-3">
            <label for="spouseA_lastName">Last Name</label>
            <input type="text" name="spouseA_Lastname" id="spouseA_lastName" class="form-control" onkeyup="formUpdate()">
          </div>
          <div class="pb-3">
            <label for="spouseA_email">Email</label>
            <input type="email" name="spouseA_email" id="spouseA_email" class="form-control">
          </div>
          <div class="pb-3">
            <label for="spouseA_instagram">Instagram</label>
            <input type="text" name="spouseA_instagram" id="spouseA_instagram" class="form-control">
          </div>
          <div class="pb-3">
            <label for="spouseA_twitter">Twitter</label>
           ...

JavaScript

function packageUpdate(id) {
  console.log(id)
  var packageSelect = document.getElementById('package');
  packageSelect.value = id;

  packages = document.querySelectorAll('.package-select');
  for (i = 0; i < packages.length; ++i) {
    packages[i].classList.remove("gradient-primary", "text-white");
  }

  selected = document.getElementById(id)
  selected.classList.add("gradient-primary", "text-white");
}


function formUpdate() {
  spouseA_name = document.getElementById('spouseA_name').value;
  spouseA_lastName = document.getElementById('spouseA_lastName').value;

  spouseB_name = document.getElementById('spouseB_name').value;
  spouseB_lastName = document.getElementById('spouseB_lastName').value;

  weddingDate = document.getElementById('weddingDate').value;
  weddingDate = weddingDate.split('-').reverse().join('/'); //output is 09/08/2018

  document.getElementById('spouseA_contract').innerHTML = spouseA_name + ' ' + spouseA_lastName;
  document.getElementById('spouseB_contract').innerHTML = spouseB_name + ' ' + spouseB_lastName;
  document.getElementById('weddingDate_contract').innerHTML = weddingDate;

  console.log(spouseA_name);
}