1. Buat data Input dengan menggunakan tag Html "input".Contoh seperti ini :
<input type='text' id='from' placeholder='from'/>
<input type='text' id='to' placeholder='to'/>2. Setelah itu silahkan bikin textarea untuk result dan button submit jika data dari input tadi sudah diisi maka untuk triggernya menggunakan button.Contohnya begini :
<input type='submit' id='submit'/>
<textarea id='result'></textarea>3. Setelah itu jika sudah selesai dan kalian sebelumnya sudah memahami tutorial sebelumnya (mengextrack data api endpoint) maka script itu di masukkan kedalam trigger button event. seperti ini :
document.getElementById('submit').addEventListener('click',function(){
fetch(`https://api.exchangerate.host/convert?from=${document.getElementById('from').value}&to=${document.getElementById('to').value}`)
.then(res => res.json())
.then(res => {
document.getElementById('result').value =`<div id='dataCurrency'>
<span class='from'>${res.query.from}</span>
<span class='from'>${res.query.to}</span>
</div>
<div id='dataRate'>
<span class='amount'>${res.query.amount}</span>
<span class='amount'>${res.info.rate}</span>
</div>`;
})
.catch(err => alert('err'));
})untuk struck data post itu kalian sesuaikan aja.
Untuk Full Code :
<style>
input[type='submit']{display:block;width:100%;margin-top:12px;padding:12px 0;cursor:pointer;}
textarea#result{width:100%;height:500px;margin-top:12px;}
</style>
<input type='text' id='from' placeholder='from'/>
<input type='text' id='to' placeholder='to'/>
<input type='submit' id='submit'/>
<textarea id='result'></textarea>
<script>
document.getElementById('submit').addEventListener('click',function(){
fetch(`https://api.exchangerate.host/convert?from=${document.getElementById('from').value}&to=${document.getElementById('to').value}`)
.then(res => res.json())
.then(res => {
document.getElementById('result').value =`<div id='dataCurrency'>
<span class='from'>${res.query.from}</span>
<span class='from'>${res.query.to}</span>
</div>
<div id='dataRate'>
<span class='amount'>${res.query.amount}</span>
<span class='amount'>${res.info.rate}</span>
</div>`;
})
.catch(err => alert('err'));
})
</script>
Similar Threads