Home >Web Front-end >JS Tutorial >Currency converter in Rust WebAssembly

Currency converter in Rust WebAssembly

DDDOriginal: 2024-12-05 06:01:12200browse

Hi everyone in this post I'm going to show you how to create a simple currency converter written in Rust with WebAssembly, first you need to install Rust using Rust official website below for windows:

(https://www.rust-lang.org/tools/install)

After you install Rust successfully we need to make sure we install WASM or WebAssembly using command below by opening Windows Powershell and run it as administrator:

cargo install wasm-pack

Cargo is a build system and package manager for Rust.

We install Wasm pack or WebAssembly to run Rust on Web view and run HTML code so after successfully installing WebAssembly in Windows Powershell choose the path you want to create files for Rust and then type the command below to create folder and files necessary:

cargo new **folder name of your choice here** --lib
this will create the folder name and files necessary for Rust to run with WebAssembly.

Then we need to modify Cargo.toml file located in your folder that you created with the above command, right click and edit I use notepad (to download notepad use this link (https://notepad-plus-plus.org/) so you will get the option to edit file directly.

in Cargo.toml file write this in it:

[dependencies]
reqwest = { version = "=0.11.7", features = ["json"] }
serde = { version = "1.0", features = ["derive"] }
serde_json = "1.0"
wasm-bindgen = "0.2"
wasm-bindgen-futures = "0.4"

[dev-dependencies]
wasm-bindgen-test = "0.3"

[lib]
crate-type = ["cdylib"]

Then inside src folder located inside your main folder that first created with Cargo command you will find another file we need to edit it's called lib.rs in this file we will write Rust code:

use wasm_bindgen::prelude::*;
use wasm_bindgen_futures::JsFuture;
use reqwest::Error;
use serde::Deserialize;
use std::collections::HashMap;

#[derive(Deserialize)]
struct ExchangeRates {
    rates: HashMap<String, f64>,
}

#[wasm_bindgen]
pub async fn convert_currency(base: String, target: String, amount: f64) -> Result<JsValue, JsValue> {
    let url = format!("https://api.exchangerate-api.com/v4/latest/{}", base);

    let response = reqwest::get(&url)
        .await
        .map_err(|err| JsValue::from_str(&format!("Failed to fetch rates: {}", err)))?;

    let rates: ExchangeRates = response.json()
        .await
        .map_err(|err| JsValue::from_str(&format!("Invalid response format: {}", err)))?;

    if let Some(&rate) = rates.rates.get(&target) {
        let converted = amount * rate;
        Ok(JsValue::from_f64(converted)) // Return the converted amount
    } else {
        Err(JsValue::from_str(&format!("Currency {} not found", target)))
    }
}

Then we will get to the part where we need to create folders and files needed for web view.
Open Powershell then navigate to your folder path make sure you're inside the main folder you created with Cargo new command then run this command:

wasm-pack build --target web

This will create folders named pkg and target and other files.

Then at your main folder that you created with cargo new folder name here --lib create HTML file named index.html inside it write this code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Currency Converter</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f8ff;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .container {
      background: #ffffff;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      padding: 20px 30px;
      width: 350px;
      text-align: center;
    }

    h1 {
      color: #333;
      margin-bottom: 20px;
    }

    label {
      display: block;
      margin: 10px 0 5px;
      font-weight: bold;
      color: #555;
    }

    input {
      width: 100%;
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 16px;
    }

    button {
      width: 100%;
      padding: 10px;
      background-color: #007bff;
      border: none;
      border-radius: 5px;
      color: white;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    button:hover {
      background-color: #0056b3;
    }

    .result {
      margin-top: 20px;
      font-size: 18px;
      color: green;
      font-weight: bold;
    }

    .error {
      margin-top: 20px;
      font-size: 16px;
      color: red;
    }
  </style>
</head>
<body>
  <div>



<p>Make sure that this line import init, { convert_currency } from "../pkg/**name of your folder.js**"; javascript file found in pkg folder make sure it points to the correct .js file normally it's named after your main folder name ends in .js found inside pkg folder.</p>

<p>To run your server on local machine navigate to your main folder that we created with cargo new **folder name here** --lib and run this command to start server on your machine:<br>
python -m http.server<br><br>
to install python refer to <br>
(https://www.python.org/downloads/windows/)</p>

<p>after running the command, open web browser of your choice and type localhost:8000 or 127.0.0.1:8000 and the enter.</p>

<p>You need to enter currency codes for that check this website:<br>
https://taxsummaries.pwc.com/glossary/currency-codes</p>

<p>Hope you enjoy it and apologies for the long post.</p>

The above is the detailed content of Currency converter in Rust WebAssembly. For more information, please follow other related articles on the PHP Chinese website!

Python JavaScript rust html for Error using pointer JS this display margin padding border viewport background transition flex input windows http https wasm Other

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How Do I Properly Include a Hyphen in a Regex Character Set?Next article：How Do I Properly Include a Hyphen in a Regex Character Set?

See more

Currency converter in Rust WebAssembly

Related articles