dev-resources.site
for different kinds of informations.
Currency converter in Rust + WebAssembly
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 class="container">
<h1>Currency Converter</h1>
<form id="convert-form">
<label for="base">Base Currency:</label>
<input type="text" id="base" name="base" placeholder="e.g., USD" required>
<label for="target">Target Currency:</label>
<input type="text" id="target" name="target" placeholder="e.g., EUR" required>
<label for="amount">Amount:</label>
<input type="number" id="amount" name="amount" placeholder="e.g., 100" required>
<button type="submit">Convert</button>
</form>
<div class="result" id="result"></div>
<div class="error" id="error"></div>
</div>
<script type="module">
import init, { convert_currency } from "../pkg/name of your folder.js";
async function main() {
await init();
const form = document.getElementById("convert-form");
const resultDiv = document.getElementById("result");
const errorDiv = document.getElementById("error");
form.addEventListener("submit", async (event) => {
event.preventDefault();
// Clear previous messages
resultDiv.textContent = "";
errorDiv.textContent = "";
const base = document.getElementById("base").value.toUpperCase();
const target = document.getElementById("target").value.toUpperCase();
const amount = parseFloat(document.getElementById("amount").value);
if (isNaN(amount) || amount <= 0) {
errorDiv.textContent = "Please enter a valid amount.";
return;
}
try {
const convertedAmount = await convert_currency(base, target, amount);
if (convertedAmount === null || isNaN(convertedAmount)) {
throw new Error("Invalid conversion result.");
}
resultDiv.textContent = `${amount} ${base} = ${convertedAmount.toFixed(2)} ${target}`;
} catch (err) {
errorDiv.textContent = `Error: ${err.message || err}`;
}
});
}
main();
</script>
</body>
</html>
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.
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:
python -m http.server
to install python refer to
(https://www.python.org/downloads/windows/)
after running the command, open web browser of your choice and type localhost:8000 or 127.0.0.1:8000 and the enter.
You need to enter currency codes for that check this website:
https://taxsummaries.pwc.com/glossary/currency-codes
Hope you enjoy it and apologies for the long post.
Featured ones: