xxxxxxxxxx1
<div class="container mt-5">2
<div class="row">3
<div class="col-md">4
<div class="card text-center">5
<div class="card-header"></div>6
<div class="card-body"></div>7
<div class="card-footer text-muted"></div>8
</div>9
</div>10
<div class="col-md">11
<div class="form-outline">12
<input value="Example header" type="text" id="cardHeaderInput" class="form-control" />13
<label class="form-label" for="cardHeaderInput">Card header text</label>14
</div>15
16
<div class="form-outline">17
<input value="Example body" type="text" id="cardBodyInput" class="form-control mt-5" />18
<label class="form-label" for="cardBodyInput">Card body text</label>19
</div>20
21
<div class="form-outline">22
<input value="Example footer" type="text" id="cardFooterInput" class="form-control mt-5" />23
<label class="form-label" for="cardFooterInput">Card footer text</label>24
</div>25
</div>26
</div>27
</div>1
1
xxxxxxxxxx1
const headerInput = document.querySelector('#cardHeaderInput')2
const bodyInput = document.querySelector('#cardBodyInput')3
const footerInput = document.querySelector('#cardFooterInput')4
5
const cardHeader = document.querySelector('.card-header')6
const cardBody = document.querySelector('.card-body')7
const cardFooter = document.querySelector('.card-footer')8
9
10
headerInput.addEventListener('input', (e) => {11
cardHeader.innerText = e.target.value;12
})13
14
bodyInput.addEventListener('input', (e) => {15
cardBody.innerText = e.target.value;16
})17
18
footerInput.addEventListener('input', (e) => {19
cardFooter.innerText = e.target.value;20
}) Console errors: 0