<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());
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.