Tag sudah ada dengan nama cabang yang disediakan. Banyak perintah Git menerima nama tag dan cabang, jadi membuat cabang ini dapat menyebabkan perilaku yang tidak diharapkan. Anda yakin ingin membuat cabang ini?

Dalam tutorial ini, kita akan membahas cara membuat konverter mata uang di JavaScript. Kami akan membahas berbagai langkah yang terlibat dalam membuat konverter semacam itu

Apa itu konverter mata uang?

Konverter mata uang adalah alat yang membantu Anda mengonversi satu mata uang ke mata uang lainnya. Misalnya, jika Anda berasal dari Amerika Serikat dan bepergian ke Eropa, Anda perlu menggunakan pengonversi mata uang untuk mengubah dolar AS menjadi Euro.

Mengapa menggunakan JavaScript untuk membuat pengonversi mata uang?

JavaScript adalah bahasa pemrograman serbaguna yang dapat digunakan untuk membuat berbagai macam aplikasi, termasuk aplikasi berbasis web. Saat membuat pengonversi mata uang, JavaScript memberikan sejumlah keuntungan, seperti

Kemudahan penggunaan − JavaScript relatif mudah dipelajari dan digunakan, dibandingkan dengan bahasa pemrograman lainnya. Ini menjadikannya pilihan ideal untuk membuat aplikasi pengonversi mata uang

Kompatibilitas lintas platform − Kode JavaScript dapat dijalankan pada platform yang berbeda, seperti Windows, Mac, dan Linux. Ini memungkinkan untuk membuat pengonversi mata uang yang dapat digunakan oleh orang-orang di berbagai platform

Popularitas − JavaScript adalah salah satu bahasa pemrograman paling populer di dunia. Artinya, ada komunitas besar pengembang yang dapat memberikan dukungan dan bantuan jika diperlukan

Contoh 1

Sekarang kita telah membahas beberapa alasan menggunakan JavaScript untuk membuat pengonversi mata uang, mari kita lihat kode untuk membuat pengonversi mata uang

Di bawah ini adalah kode kerja lengkap

   How to Create a Currency Converter in JavaScript


   Currency Converter
   
 Select Currency and enter Amount to convert.
   
      From:
      
         
         
         
         
      
      To:
      
         
         
         
         
      
      Amount:
      
      Convert
      
   
   

Pada kode di atas, kami telah membuat pengonversi mata uang yang dapat mengonversi USD ke EUR, GBP, dan INR

Catatan − Anda dapat dengan mudah memodifikasi kode untuk mendukung mata uang lain juga

Kesimpulan

Membuat konverter mata uang dalam JavaScript adalah tugas yang relatif mudah. Yang perlu Anda lakukan adalah menggunakan bahasa pemrograman JavaScript untuk membuat aplikasi berbasis web. Anda dapat menggunakan kode yang disediakan dalam tutorial ini untuk membuat pengonversi mata uang yang dapat mengonversi USD ke EUR, GBP, dan INR

Pada artikel ini, kami akan membuat Pengonversi Mata Uang sederhana menggunakan HTML dan JavaScript. Sebelum kita mulai, semua orang harus terbiasa dengan apa itu API dan bagaimana kita dapat menggunakannya untuk mengambil nilai tukar terbaru karena kita akan menggunakan api-tukar. com untuk mendapatkan tingkat konversi waktu nyata. Apa tujuan dari konverter saat ini, dan bagaimana cara membuatnya?

IKLAN

Apa itu API?

IKLAN

Antarmuka Pemrograman Aplikasi, atau API, adalah singkatan dari itu. Aplikasi adalah perangkat lunak apa pun dengan tujuan tertentu saat mengacu pada API. Kontrak layanan antara dua aplikasi dapat dibandingkan dengan antarmuka. Menggunakan permintaan dan tanggapan, perjanjian ini menentukan bagaimana keduanya akan berbicara satu sama lain. Bagaimana pengembang harus menata kueri dan respons tercakup dalam dokumentasi API mereka

Apa itu Konverter Mata Uang?

Konverter mata uang adalah perangkat yang memfasilitasi pertukaran satu mata uang dengan mata uang lainnya. Misalnya, Anda perlu menggunakan konverter mata uang untuk mengubah dolar AS menjadi Euro jika Anda bepergian ke Eropa dari Amerika Serikat

IKLAN

Prasyarat

indeks. html – Untuk menambahkan struktur ke proyek
gaya. css. Untuk menambahkan gaya ke proyek
naskah. js – Untuk menambahkan fitur seret dan lepas atau jelajahi

IKLAN

Saya harap sekarang Anda memiliki gambaran umum tentang apa yang diperlukan proyek ini. Dalam artikel kami, kami akan membahas proyek ini selangkah demi selangkah

Langkah 1. Menambahkan beberapa Kode HTML dasar

HTML adalah singkatan dari HyperText Markup Language. Ini adalah bahasa markup. Tugas utamanya adalah memberikan struktur proyek kami. Kami akan menyediakan struktur proyek kami dengan memanfaatkan bahasa markup ini. Jadi mari kita lihat kode HTML kita

<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>currency-convertor</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
        integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css" />
</head>

<body>

    <h1>Awesome Currency Converter</h1>
    <p class="convert">
        Convert :
        <input type="number" id="original-currency-amount" placeholder="0" value="1"> </input>
    </p>
    <div>
        <select id="from_currency">
            <option value="AED">AED</option>
            <option value="ARS">ARS</option>
            <option value="AUD">AUD</option>
            <option value="BGN">BGN</option>
            <option value="BRL">BRL</option>
            <option value="BSD">BSD</option>
            <option value="CAD">CAD</option>
            <option value="CHF">CHF</option>
            <option value="CLP">CLP</option>
            <option value="CNY">CNY</option>
            <option value="COP">COP</option>
            <option value="CZK">CZK</option>
            <option value="DKK">DKK</option>
            <option value="DOP">DOP</option>
            <option value="EGP">EGP</option>
            <option value="EUR">EUR</option>
            <option value="FJD">FJD</option>
            <option value="GBP">GBP</option>
            <option value="GTQ">GTQ</option>
            <option value="HKD">HKD</option>
            <option value="HRK">HRK</option>
            <option value="HUF">HUF</option>
            <option value="IDR">IDR</option>
            <option value="ILS">ILS</option>
            <option value="INR">INR</option>
            <option value="ISK">ISK</option>
            <option value="JPY">JPY</option>
            <option value="KRW">KRW</option>
            <option value="KZT">KZT</option>
            <option value="MXN">MXN</option>
            <option value="MYR">MYR</option>
            <option value="NOK">NOK</option>
            <option value="NZD">NZD</option>
            <option value="PAB">PAB</option>
            <option value="PEN">PEN</option>
            <option value="PHP">PHP</option>
            <option value="PKR">PKR</option>
            <option value="PLN">PLN</option>
            <option value="PYG">PYG</option>
            <option value="RON">RON</option>
            <option value="RUB">RUB</option>
            <option value="SAR">SAR</option>
            <option value="SEK">SEK</option>
            <option value="SGD">SGD</option>
            <option value="THB">THB</option>
            <option value="TRY">TRY</option>
            <option value="TWD">TWD</option>
            <option value="UAH">UAH</option>
            <option value="USD" selected>USD</option>
            <option value="UYU">UYU</option>
            <option value="VND">VND</option>
            <option value="ZAR">ZAR</option>
        </select>
        <button id="exchange">
            <i class="fas fa-exchange-alt"></i>
        </button>
        <select id="to_currency">
            <option value="AED">AED</option>
            <option value="ARS">ARS</option>
            <option value="AUD">AUD</option>
            <option value="BGN">BGN</option>
            <option value="BRL">BRL</option>
            <option value="BSD">BSD</option>
            <option value="CAD">CAD</option>
            <option value="CHF">CHF</option>
            <option value="CLP">CLP</option>
            <option value="CNY">CNY</option>
            <option value="COP">COP</option>
            <option value="CZK">CZK</option>
            <option value="DKK">DKK</option>
            <option value="DOP">DOP</option>
            <option value="EGP">EGP</option>
            <option value="EUR">EUR</option>
            <option value="FJD">FJD</option>
            <option value="GBP">GBP</option>
            <option value="GTQ">GTQ</option>
            <option value="HKD">HKD</option>
            <option value="HRK">HRK</option>
            <option value="HUF">HUF</option>
            <option value="IDR">IDR</option>
            <option value="ILS">ILS</option>
            <option value="INR" selected>INR</option>
            <option value="ISK">ISK</option>
            <option value="JPY">JPY</option>
            <option value="KRW">KRW</option>
            <option value="KZT">KZT</option>
            <option value="MXN">MXN</option>
            <option value="MYR">MYR</option>
            <option value="NOK">NOK</option>
            <option value="NZD">NZD</option>
            <option value="PAB">PAB</option>
            <option value="PEN">PEN</option>
            <option value="PHP">PHP</option>
            <option value="PKR">PKR</option>
            <option value="PLN">PLN</option>
            <option value="PYG">PYG</option>
            <option value="RON">RON</option>
            <option value="RUB">RUB</option>
            <option value="SAR">SAR</option>
            <option value="SEK">SEK</option>
            <option value="SGD">SGD</option>
            <option value="THB">THB</option>
            <option value="TRY">TRY</option>
            <option value="TWD">TWD</option>
            <option value="UAH">UAH</option>
            <option value="USD">USD</option>
            <option value="UYU">UYU</option>
            <option value="VND">VND</option>
            <option value="ZAR">ZAR</option>
        </select>
    </div>
    <p class="exchange">
        Exchange Rate:

        <input type="text" id="exchange-rate"></input>
    </p>
    <button id="exchange_button">Exchange my money now!</button>
    <p id="output-text">
        <span id="from"></span> converted to <span id="to"></span>
    </p>

    <footer><a href="https://instagram.com/codewith_random?igshid=YmMyMTA2M2Y=" title="share"><i
                class="fab fa-instagram"></i></a></footer>
    <script src="index.js"></script>
</body>

</html>

IKLAN

Kami akan membahas proyek kami secara detail. Kami akan menunjukkan cara menambahkan setiap komponen ke struktur yang telah kami buat untuk pengonversi mata uang kami

Kami akan mulai dengan memberi judul pada proyek kami. Tag h1 akan digunakan untuk menambahkan header ke proyek kita. Kami sekarang akan membuat bidang bagi pengguna untuk memasukkan jumlah uang yang ingin mereka tukar menggunakan tag masukan

<h1>Awesome Currency Converter</h1>
<p class="convert">
    Convert :
    <input type="number" id="original-currency-amount" placeholder="0" value="1"> </input>
</p>

Ada banyak negara di dunia, dan masing-masing negara memiliki mata uangnya sendiri. Akibatnya, pertama-tama kita harus menyusun daftar semua mata uang untuk mendapatkan nilai tukar untuk setiap negara. Menggunakan opsi pilih, kami akan membuat dua daftar opsi untuk mata uang yang berbeda, dan kami akan menyisipkan ikon pertukaran di antara dua daftar menggunakan ikon font-awesome

IKLAN

<div>
        <select id="from_currency">
            <option value="AED">AED</option>
            <option value="ARS">ARS</option>
            <option value="AUD">AUD</option>
            <option value="BGN">BGN</option>
            <option value="BRL">BRL</option>
            <option value="BSD">BSD</option>
            <option value="CAD">CAD</option>
            <option value="CHF">CHF</option>
            <option value="CLP">CLP</option>
            <option value="CNY">CNY</option>
            <option value="COP">COP</option>
            <option value="CZK">CZK</option>
            <option value="DKK">DKK</option>
            <option value="DOP">DOP</option>
            <option value="EGP">EGP</option>
            <option value="EUR">EUR</option>
            <option value="FJD">FJD</option>
            <option value="GBP">GBP</option>
            <option value="GTQ">GTQ</option>
            <option value="HKD">HKD</option>
            <option value="HRK">HRK</option>
            <option value="HUF">HUF</option>
            <option value="IDR">IDR</option>
            <option value="ILS">ILS</option>
            <option value="INR">INR</option>
            <option value="ISK">ISK</option>
            <option value="JPY">JPY</option>
            <option value="KRW">KRW</option>
            <option value="KZT">KZT</option>
            <option value="MXN">MXN</option>
            <option value="MYR">MYR</option>
            <option value="NOK">NOK</option>
            <option value="NZD">NZD</option>
            <option value="PAB">PAB</option>
            <option value="PEN">PEN</option>
            <option value="PHP">PHP</option>
            <option value="PKR">PKR</option>
            <option value="PLN">PLN</option>
            <option value="PYG">PYG</option>
            <option value="RON">RON</option>
            <option value="RUB">RUB</option>
            <option value="SAR">SAR</option>
            <option value="SEK">SEK</option>
            <option value="SGD">SGD</option>
            <option value="THB">THB</option>
            <option value="TRY">TRY</option>
            <option value="TWD">TWD</option>
            <option value="UAH">UAH</option>
            <option value="USD" selected>USD</option>
            <option value="UYU">UYU</option>
            <option value="VND">VND</option>
            <option value="ZAR">ZAR</option>
        </select>
        <button id="exchange">
            <i class="fas fa-exchange-alt"></i>
        </button>
        <select id="to_currency">
            <option value="AED">AED</option>
            <option value="ARS">ARS</option>
            <option value="AUD">AUD</option>
            <option value="BGN">BGN</option>
            <option value="BRL">BRL</option>
            <option value="BSD">BSD</option>
            <option value="CAD">CAD</option>
            <option value="CHF">CHF</option>
            <option value="CLP">CLP</option>
            <option value="CNY">CNY</option>
            <option value="COP">COP</option>
            <option value="CZK">CZK</option>
            <option value="DKK">DKK</option>
            <option value="DOP">DOP</option>
            <option value="EGP">EGP</option>
            <option value="EUR">EUR</option>
            <option value="FJD">FJD</option>
            <option value="GBP">GBP</option>
            <option value="GTQ">GTQ</option>
            <option value="HKD">HKD</option>
            <option value="HRK">HRK</option>
            <option value="HUF">HUF</option>
            <option value="IDR">IDR</option>
            <option value="ILS">ILS</option>
            <option value="INR" selected>INR</option>
            <option value="ISK">ISK</option>
            <option value="JPY">JPY</option>
            <option value="KRW">KRW</option>
            <option value="KZT">KZT</option>
            <option value="MXN">MXN</option>
            <option value="MYR">MYR</option>
            <option value="NOK">NOK</option>
            <option value="NZD">NZD</option>
            <option value="PAB">PAB</option>
            <option value="PEN">PEN</option>
            <option value="PHP">PHP</option>
            <option value="PKR">PKR</option>
            <option value="PLN">PLN</option>
            <option value="PYG">PYG</option>
            <option value="RON">RON</option>
            <option value="RUB">RUB</option>
            <option value="SAR">SAR</option>
            <option value="SEK">SEK</option>
            <option value="SGD">SGD</option>
            <option value="THB">THB</option>
            <option value="TRY">TRY</option>
            <option value="TWD">TWD</option>
            <option value="UAH">UAH</option>
            <option value="USD">USD</option>
            <option value="UYU">UYU</option>
            <option value="VND">VND</option>
            <option value="ZAR">ZAR</option>
        </select>
    </div>

Kami sekarang akan merancang bilah yang menunjukkan nilai tukar bersama dengan tombol tukar. Pengguna akan melihat nilai tukar saat ini segera setelah mereka mengklik tombol berkat kode javascript. Jika Anda ingin mengikuti kami di Instagram untuk proyek front-end baru, kami akan menampilkan ikon Instagram dengan tautan menggunakan ikon font-awesome

IKLAN

<p class="exchange">
        Exchange Rate:

        <input type="text" id="exchange-rate"></input>
    </p>
    <button id="exchange_button">Exchange my money now!</button>
    <p id="output-text">
        <span id="from"></span> converted to <span id="to"></span>
    </p>

    <footer><a href="https://instagram.com/codewith_random?igshid=YmMyMTA2M2Y=" title="share"><i
                class="fab fa-instagram"></i></a></footer>
    <script src="index.js"></script>
</body>

</html>

Kami sekarang telah menambahkan struktur dasar halaman web kami. Sekarang kita akan menggunakan stylesheet kita untuk menambahkan gaya ke pengonversi mata uang kita, tetapi pertama-tama mari kita lihat keluaran kita

5+ Proyek HTML CSS Dengan Kode Sumber

Keluaran

Langkah 2. Menambahkan Kode CSS

Kelas-kelas yang kita definisikan di dalam elemen html kita akan digunakan terutama untuk menata struktur kita ke depannya. Namun, untuk memberikan tampilan yang menarik pada setiap bagian dalam postingan ini, kami juga menggunakan pemilih Id dalam proyek ini

@import url("https://fonts.googleapis.com/css2?family=Sansita+Swashed&display=swap");

html,
body {
  margin: 0;
  padding: 0;
}

body {
  text-align: center;
  font-family: sans-serif;
  background-color: #00539cff;
  display: flex;
  height: 80vh;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-top: 50px;
}

h1 {
  color: #ffd662ff;
  font-size: 3rem;
}

.convert,
.exchange {
  font-family: "Sansita Swashed", cursive;
  font-size: 25px;
  color: #ffffff;
  padding-right: 20px;
}

input {
  width: 150px;
  height: 30px;
  font-size: 20px;
  margin: 5px auto;
  outline: 0;
}

#original-currency-amount {
  padding-left: 50px;
}
button {
  width: 300px;
  height: 40px;
  font-size: 20px;
  font-weight: 600;
  color: #00539cff;
  font-family: "Sansita Swashed", cursive;
}

select {
  width: 80px;
  height: 35px;
  font-size: 20px;
  text-align: center;
  padding-left: 10px;
  outline: 0;
}

#exchange {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 0 20px;
  outline: 0;
  color: #00539cff;
  border: 4px solid #ffd662ff;
}

#exchange:active,
button:active {
  transform: scale(0.9);
}

#output-text {
  display: none;
  padding: 20px;
  font-size: 30px;
  color: #ffffff;
}

span {
  color: #ffd662ff;

  font-size: 35px;
}

#exchange-rate {
  cursor: default;
}

footer {
  position: absolute;
  right: 50px;
  bottom: 50px;
}

a {
  color: #ffffff;
  bottom: 0;
  font-size: 30px;
  text-decoration: none;
}

Untuk membuat komponen HTML yang menarik secara visual, diperlukan kode CSS. Konverter mata uang ditata menggunakan atribut CSS ini. Akan mudah bagi kalian untuk memahami jika kami memandu Anda melalui penataan langkah demi langkah

Langkah 1. Jenis huruf Sansita dan Swashed dari Google Fonts akan ditambahkan terlebih dahulu menggunakan tautan impor

IKLAN

Kami akan mengatur padding dan margin ke "nol" menggunakan pemilih tag tubuh

IKLAN

Sekarang setelah kita memiliki badan, kita akan memberi gaya pada badan halaman web. Layar diatur ke fleksibel, dan kami telah menambahkan padding 50 piksel ke atas. Kami memusatkan semua teks menggunakan properti text-align, dan dengan menggunakan properti warna latar belakang, kami akan membuat latar belakang biru. 80 vh telah ditentukan sebagai ketinggian

IKLAN

@import url("https://fonts.googleapis.com/css2?family=Sansita+Swashed&display=swap");

html,
body {
  margin: 0;
  padding: 0;
}

body {
  text-align: center;
  font-family: sans-serif;
  background-color: #00539cff;
  display: flex;
  height: 80vh;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-top: 50px;
}

IKLAN

Step2: Using the

tag selector, we will now style our heading. Yellow now replaces the original colour, and the size is now 3 rem.

IKLAN

50+ Proyek Html, Css & Javascript Dengan Kode Sumber

Sekarang kami telah menambahkan gaya ke bilah tampilan konversi dan pertukaran kami menggunakan pemilih kelas (. mengubah,. exchange), kami akan menambahkan font "Sansita Swashed" ke proyek Anda menggunakan atribut font-family. Putih adalah warna font yang dipilih, dan ukuran font 25px

Kami akan mengatur ukuran font menjadi 20px, tinggi menjadi 30px, dan lebar menjadi 150px menggunakan input pemilih tag. Margin 5 piksel dan 20 piksel telah dimasukkan

.convert,
.exchange {
  font-family: "Sansita Swashed", cursive;
  font-size: 25px;
  color: #ffffff;
  padding-right: 20px;
}

input {
  width: 150px;
  height: 30px;
  font-size: 20px;
  margin: 5px auto;
  outline: 0;
}

#original-currency-amount {
  padding-left: 50px;
}

Aplikasi Konverter Mata Uang Menggunakan HTML ,CSS & JavaScript

 

Langkah3. Tombol sekarang akan memiliki gaya yang ditambahkan, bersama dengan opsi pilih. Lebar dan tinggi tombol masing-masing disetel ke 300 piksel dan 40 piksel. Kami akan meningkatkan ukuran font menjadi 20 px, meningkatkan ketebalan menjadi 600, dan mengubah warna teks tombol menjadi biru dengan menggunakan px dan mengatur properti fproperty

Lebar dan tinggi ikon disetel ke 50px menggunakan pemilih id (#exchange), dan kami akan menggunakan properti border-radius untuk menyetel border-radius ke 50%. Perbatasannya adalah 4px berwarna kuning pekat, dan teksnya diatur menjadi biru

button {
  width: 300px;
  height: 40px;
  font-size: 20px;
  font-weight: 600;
  color: #00539cff;
  font-family: "Sansita Swashed", cursive;
}

select {
  width: 80px;
  height: 35px;
  font-size: 20px;
  text-align: center;
  padding-left: 10px;
  outline: 0;
}

#exchange {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 0 20px;
  outline: 0;
  color: #00539cff;
  border: 4px solid #ffd662ff;
}

#exchange:active,
button:active {
  transform: scale(0.9);
}

#output-text {
  display: none;
  padding: 20px;
  font-size: 30px;
  color: #ffffff;
}

span {
  color: #ffd662ff;

  font-size: 35px;
}

#exchange-rate {
  cursor: default;
}

Aplikasi Konverter Mata Uang Menggunakan HTML ,CSS & JavaScript

 

Langkah4. Langkah terakhir adalah menambahkan desain ke ikon Instagram kita di bagian bawah. Kami diatur ke posisi absolut, dan dengan menggunakan atribut yang tepat, kami akan memindahkannya 50 px ke kanan dan bawah dan mengubah warnanya menjadi putih

10+ Proyek Javascript Untuk Pemula Dengan Kode Sumber

footer {
  position: absolute;
  right: 50px;
  bottom: 50px;
}

a {
  color: #ffffff;
  bottom: 0;
  font-size: 30px;
  text-decoration: none;
}

_

Langkah3. Kode JavaScript

var input_amount = document.getElementById("original-currency-amount");
var from_currency = document.getElementById("from_currency");
var to_currency = document.getElementById("to_currency");
var exchange_rate = document.getElementById("exchange-rate");
var exchange = document.getElementById("exchange");
var output_amount = document.getElementById("output-text");
var output_from = document.getElementById("from");
var output_to = document.getElementById("to");

exchange.addEventListener("click", () => {
  [from_currency.value, to_currency.value] = [
    to_currency.value,
    from_currency.value,
  ];
  calculate();
});

var to_amount = 0;
function calculate() {
  const from_currency_value = from_currency.value;
  const to_currency_value = to_currency.value;

  fetch(`https://api.exchangerate-api.com/v4/latest/${from_currency_value}`)
    .then((res) => res.json())
    .then((res) => {
      const rate = res.rates[to_currency_value];
      exchange_rate.value = `${rate}`;
      to_amount = (input_amount.value * rate).toFixed(3);
      output_from.innerText = `${input_amount.value} ${from_currency_value}`;
      output_to.innerText = `${to_amount} ${to_currency_value}`;
      output_amount.style.display = "block";
    });
}

document.getElementById("exchange_button").addEventListener("click", () => {
  calculate();
});

• Dengan menggunakan metode getElementById() pada dokumen, pertama-tama kita akan memilih elemen HTML sebelum membuat beberapa variabel dan menyimpannya di sana
• Kami sekarang akan menggunakan variabel untuk menambahkan pendengar acara ke HTML kami. Tambahkan pendengar acara dengan menggunakan addEventlistener. Segera setelah pengguna menekan ikon tukar, kami akan menambahkan peristiwa klik yang akan menyebabkan nilai mata uang dikonversi menjadi satu sama lain. Kami juga akan menambahkan fungsi ke acara klik kami

Portfolio Website menggunakan HTML dan CSS (Source Code)

• Sekarang kita akan membuat variabel to_amount dan menetapkan nilainya menjadi “nol”
• Kita sekarang akan membuat fungsi hitung() di dalam fungsi yang akan kita buat ke variabel dan di dalam variabel itu kita akan mengambil nilai dari mata uang. Di sini kami menggunakan metode fetch () untuk membuat permintaan API dari mata uang utama yang dipilih. Jika permintaan berhasil, kami meneruskan nilai dari api ke elemen HTML dan kemudian akan ditampilkan kepada pengguna
• Sekarang, kami akan memilih tombol tukar menggunakan dokumen. getelementbyId() , dan kami akan menambahkan klik EventListener untuk menjalankan fungsi perhitungan

Sekarang kami telah menyelesaikan Konverter Mata Uang kami menggunakan HTML, CSS & javascript. Saya harap Anda memahami keseluruhan proyek. Mari kita lihat Pratinjau Langsung kami

https. // www. codewithrandom. com/wp-content/uploads/2022/11/currency. mp4

Pratinjau Langsung Konverter Mata Uang menggunakan HTML, CSS & Javascript

Lihat Pena
Konverter mata uang yang luar biasa oleh RAJ (@verreauxblack)
di CodePen

Sekarang Kami telah Berhasil membuat Konverter Mata Uang kami menggunakan HTML, CSS & javascript. Anda dapat menggunakan proyek ini secara langsung dengan menyalin ke IDE Anda. KAMI harap Anda memahami proyek ini, Jika Anda ragu, jangan ragu untuk berkomentar

Membuat Header Menggunakan HTML dan CSS (Header Source Code)

Jika Anda menemukan Blog ini bermanfaat, maka pastikan untuk mencari kode dengan acak di google untuk Proyek Front End dengan kode Sumber dan pastikan untuk Ikuti Kode dengan halaman Instagram Acak

Bagaimana cara mengonversi mata uang menggunakan JavaScript?

Bagaimana cara mengubah mata uang dalam HTML?

Bagaimana cara mendapatkan kurs mata uang saat ini di JavaScript?

Bagaimana Anda mengubah mata uang menjadi dua arah?