<main>
  <section class="in">
    <input class="in__input" id="name" data-model="name" placeholder="name" />
    <input class="in__input" id="address1" data-model="address1" placeholder="address 1" />
    <input class="in__input" id="address2" data-model="address2" placeholder="address 2" />
  </section>
  <section class="in">
    <input class="in__input" id="zip" data-model="zip" placeholder="zip" />
    <input class="in__input" id="city" data-model="city" placeholder="city" />
    <select class="in__select" id="state" data-model="state">
      <option value="" disabled selected>Choose a state...</option>
      <option value="AL">Alabama</option>
      <option value="AK">Alaska</option>
      <option value="AZ">Arizona</option>
      <option value="AR">Arkansas</option>
      <option value="CA">California</option>
      <option value="CO">Colorado</option>
      <option value="CT">Connecticut</option>
      <option value="DE">Delaware</option>
      <option value="DC">District Of Columbia</option>
      <option value="FL">Florida</option>
      <option value="GA">Georgia</option>
      <option value="HI">Hawaii</option>
      <option value="ID">Idaho</option>
      <option value="IL">Illinois</option>
      <option value="IN">Indiana</option>
      <option value="IA">Iowa</option>
      <option value="KS">Kansas</option>
      <option value="KY">Kentucky</option>
      <option value="LA">Louisiana</option>
      <option value="ME">Maine</option>
      <option value="MD">Maryland</option>
      <option value="MA">Massachusetts</option>
      <option value="MI">Michigan</option>
      <option value="MN">Minnesota</option>
      <option value="MS">Mississippi</option>
      <option value="MO">Missouri</option>
      <option value="MT">Montana</option>
      <option value="NE">Nebraska</option>
      <option value="NV">Nevada</option>
      <option value="NH">New Hampshire</option>
      <option value="NJ">New Jersey</option>
      <option value="NM">New Mexico</option>
      <option value="NY">New York</option>
      <option value="NC">North Carolina</option>
      <option value="ND">North Dakota</option>
      <option value="OH">Ohio</option>
      <option value="OK">Oklahoma</option>
      <option value="OR">Oregon</option>
      <option value="PA">Pennsylvania</option>
      <option value="RI">Rhode Island</option>
      <option value="SC">South Carolina</option>
      <option value="SD">South Dakota</option>
      <option value="TN">Tennessee</option>
      <option value="TX">Texas</option>
      <option value="UT">Utah</option>
      <option value="VT">Vermont</option>
      <option value="VA">Virginia</option>
      <option value="WA">Washington</option>
      <option value="WV">West Virginia</option>
      <option value="WI">Wisconsin</option>
      <option value="WY">Wyoming</option>
    </select>
  </section>
  <section class="out">
    <div class="out__card">
      <div class="out__address">
        <div class="out__address-line" data-model="name"></div>
        <div class="out__address-line" data-model="address1"></div>
        <div class="out__address-line" data-model="address2"></div>
        <div class="out__address-line">
          <span data-model="city"></span> <span data-model="state"></span> <span data-model="zip"></span>
        </div>
      </div>
    </div>
    <button id="get_data">get data</button>
  </section>
</main>

@import url('https://fonts.googleapis.com/css2?family=Caveat&family=Open+Sans&display=swap');

html,
body {
  height: 100vh;
  margin: 0;
  padding: 0;
}
body {
  display: grid;
  place-items: center;
}

main {
  display: flex;
  flex-direction: column;
  width: 90vw;
}

main input,
main select {
  border: 2px solid rebeccapurple;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  margin-bottom: 4px;
  margin-right: 4px;
  padding: 4px 8px;
}

main button {
  background-color: white;
  border: 3px solid rebeccapurple;
  border-radius: 7px;
  color: rebeccapurple;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  padding: 8px 16px;
}
main button:hover {
  background-color: lavender;
}
main button:active {
  background-color: rebeccapurple;
  color: white;
}
main button:focus-visible {
  box-shadow: 0 0 0 2px white, 0 0 0 5px rebeccapurple;
  outline: none;
}

.in {
  display: flex;
  font-family: 'Open Sans', sans-serif;
  justify-content: center;
}

.out {
  display: grid;
  flex-grow: 1;
  font-family: 'Caveat', cursive;
  height: 300px;
  place-items: center;
}
.out__card {
  border: 3px solid black;
  displaY: grid;
  height: 200px;
  place-items: center;
  position: relative;
  top: 16px;
  transform: rotate3d(0, 0, 1, -7deg);
  width: 400px;
}
.out__address-line {
  font-size: 32px;
  line-height: 1;
}

#get_data {
  left: 100px;
  position: relative;
}

const getDataBtn = document.querySelector('#get_data');
const model = new Proxy(
  {
    name: '',
    address1: '',
    address2: '',
    city: '',
    state: '',
    zip: '',
    getData() {
      return {
        name: this.name || 'no entry!',
        address1: this.address1 || 'no entry!',
        address2: this.address2 || 'no entry!',
        city: this.city || 'no entry!',
        state: this.state || 'no entry!',
        zip: this.zip || 'no entry!'
      };
    }
  },
  {
    get: function (target, prop) {
      return target[prop];
    },
    set: function (target, prop, value) {
      target[prop] = value;
      
      if (prop === 'zip' && value.length === 5) {
        fetch(`https://api.zippopotam.us/us/${value}`)
          .then(response => response.json())
          .then(data => {
            model.city = data.places[0]['place name'];
            document.querySelector('[data-model="city"]').value = target.city;
          
            model.state = data.places[0]['state abbreviation'];
            document.querySelector('[data-model="state"]').value = target.state;
          });
      }
      
      document.querySelectorAll(`[data-model="${prop}"]`).forEach(item => {
        if (item.tageName === 'INPUT' || item.tagName === 'SELECT') {
          item.value = value;
        } else {
          item.innerText = value;
        }
      })
      
      return true;
    }
  }
);

document.querySelector('main').addEventListener('input', (e) => {
  model[e.target.dataset.model] = e.target.value;
});

getDataBtn.addEventListener('click', () => {
  console.log(model.getData());
});