Feet&Yard to meter converter

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: Yard and Feet to Meters Converter 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(); 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; } Yard & Feet to Meters Converter Enter a value and select the unit to convert: Yards Feet Convert 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.

Jan 21, 2025 - 05:05

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:




  
  
  Yard and Feet to Meters Converter
  
  


  
    Yard & Feet to Meters Converter
    Enter a value and select the unit to convert:

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.