Hello Everyone
I'm going to show you how to create a Feet & Yard to Meter converter web app in Rust with Web assembly.
First you need to install Rust on your PC using this link https://www.rust-lang.org/tools/install then we need to create the main folder "I named it yardandfeetconverter you can of course name it as you like" that will have all necessary files by using cargo command as the following:
cargo new yardandfeetconverter
After that we need to configure cargo.toml file by adding the following
[dependencies]
wasm-bindgen = "0.2"
[lib]
crate-type = ["cdylib"]
save the changes and then navigate to src folder in the main folder that we created and rename main.rs file to lib.rs and open it in an editor and add the following code to it:
use wasm_bindgen::prelude::*;
// Convert yards to meters
#[wasm_bindgen]
pub fn yards_to_meters(yards: f64) -> f64 {
yards * 0.9144
}
// Convert feet to meters
#[wasm_bindgen]
pub fn feet_to_meters(feet: f64) -> f64 {
feet * 0.3048
}
Then save it and open Powershell in windows to create files needed for web using webassembly :
wasm-pack build --target web
This will create files needed for web.
After that navigate to the main folder yardandfeetconverter and create index.html file then add the following code to it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yard and Feet to Meters Converter</title>
<script type="module">
import init, { yards_to_meters, feet_to_meters } from "./pkg/yardandfeetconverter.js";
async function setup() {
await init();
document.getElementById('convert').addEventListener('click', () => {
const value = parseFloat(document.getElementById('value').value);
const type = document.getElementById('unit').value;
let result;
if (type === 'yards') {
result = yards_to_meters(value);
} else {
result = feet_to_meters(value);
}
document.getElementById('result').innerText = `Result: ${result.toFixed(4)} meters`;
});
}
setup();
</script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(to right, #4facfe, #00f2fe);
}
.container {
text-align: center;
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
input, select, button {
margin: 10px;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background-color: #4facfe;
color: white;
cursor: pointer;
}
button:hover {
background-color: #00c4cc;
}
</style>
</head>
<body>
<div class="container">
<h1>Yard & Feet to Meters Converter</h1>
<p>Enter a value and select the unit to convert:</p>
<input type="number" id="value" placeholder="Enter value" />
<select id="unit">
<option value="yards">Yards</option>
<option value="feet">Feet</option>
</select>
<button id="convert">Convert</button>
<p id="result" style="margin-top: 20px; font-size: 20px;"></p>
</div>
</body>
</html>
and save the file and then open Powershell again navigate to the main folder and then start a local server on your computer using the following command:
python -m http.server
this will create a local server running on port 8000
so open a web browser page and type in the address field
localhost:8000
That's it you've done it now you can convert yards and feet to meters.
Thank you and happy coding.
Top comments (0)