Feet&Yard to meter converter-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Feet&Yard to meter converter

Jan 21, 2025 pm 12:10 PM

Let's build a simple Feet & Yards to Meters converter web app using Rust and WebAssembly! This guide provides a streamlined approach.

Feet&Yard to meter converter

First, ensure Rust is installed on your system. Download and install it from https://www.php.cn/link/29f81692d9af87c8826aafca8ff5dad3.

Next, create a new Rust project using Cargo:

cargo new yardandfeetconverter

Copy after login

Modify the Cargo.toml file to include the wasm-bindgen dependency and specify the crate type:

[dependencies]
wasm-bindgen = "0.2"

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

Copy after login

Navigate to the src directory and rename main.rs to lib.rs. Replace the contents of lib.rs with this conversion logic:

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn yards_to_meters(yards: f64) -&gt; f64 {
    yards * 0.9144
}

#[wasm_bindgen]
pub fn feet_to_meters(feet: f64) -&gt; f64 {
    feet * 0.3048
}

Copy after login

Build the WebAssembly module:

wasm-pack build --target web

Copy after login

This generates the necessary web files. Now, create an index.html file in the yardandfeetconverter directory. Paste the following code into index.html:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;Yard and Feet to Meters Converter&lt;/title&gt;
  &lt;style&gt;
    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;
    }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div class="container"&gt;
    &lt;h1&gt;Feet &amp; Yards to Meters Converter&lt;/h1&gt;
    &lt;input type="number" id="value" placeholder="Enter value"&gt;
    &lt;select id="unit"&gt;
      &lt;option value="yards"&gt;Yards&lt;/option&gt;
      &lt;option value="feet"&gt;Feet&lt;/option&gt;
    &lt;/select&gt;
    &lt;button id="convert"&gt;Convert&lt;/button&gt;
    &lt;p id="result"&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;script type="module"&gt;
    import init, { yards_to_meters, feet_to_meters } from "./pkg/yardandfeetconverter.js";

    async function setup() {
      await init();
      document.getElementById('convert').addEventListener('click', () =&gt; {
        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();
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

Start a local web server (e.g., using Python's http.server):

python -m http.server

Copy after login

Open your browser and navigate to localhost:8000. You can now convert feet and yards to meters!

The above is the detailed content of Feet&Yard to meter converter. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

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