Kirjautuminen

Haku

Tehtävät

Keskustelu: Koodit: HTML: Metri, kilometri, AU, valovuosi, tuuma, maili

PetriKeckman [01.11.2023 11:14:00]

#

Meneekö pituusyksiköt joskus sekaisin? Minulla menee, mutta ei enää:

https://www.petke.info/pituusmuunnin.html

Ohjelmaan syötetään luku ja valitaan sille pituusyksikkö metri, kilometri, AU, valovuosi, tuuma tai maili ja ohjelma ilmaisee pituuden kaikissa muissa yksiköissä.

Joo, käytin ohjelmoinnissa ChatGPT:tä hieman avuksi - jouduin kyllä taas tappelemaan sen kanssa kauan aikaa, ennen kuin se tajusi mitä halusin.

<!DOCTYPE html>
<html>
<head>
    <title>Pituusmuunnin</title>
</head>
<body>
    <h1>Pituusmuunnin</h1>

    <label for="length">Anna pituus:</label>
    <input type="number" id="length" step="0.01" placeholder="Pituus">

    <select id="unit">
        <option value="metri">Metri (m)</option>
        <option value="kilometri">Kilometri (km)</option>
        <option value="au">Astronominen yksikkö (AU)</option>
        <option value="valovuosi">Valovuosi (ly)</option>
        <option value="tuuma">Tuumat (in)</option>
        <option value="maili">Mailit (mi)</option>
    </select>

    <button onclick="muunnaPituus()">Muunna</button>

    <p>Tulos:</p>
    <ul id="tulokset">
    </ul>

    <script>
        function muunnaPituus() {
            const pituus = parseFloat(document.getElementById("length").value);
            const yksikko = document.getElementById("unit").value;

const muuntokertoimet = {
    metri: 1,
    kilometri: 1000,
    au: 149597870700,
    valovuosi: 9.461e+15,
    tuuma: 0.0254,
    maili: 1609.344
};


            const pituusMetreina = pituus * muuntokertoimet[yksikko];

            const tulokset = document.getElementById("tulokset");
            tulokset.innerHTML = "";

            for (const muunnettuYksikko in muuntokertoimet) {
                const kerroin = muuntokertoimet[muunnettuYksikko];
                const tulos = pituusMetreina / kerroin;
                const listItem = document.createElement("li");
                listItem.textContent = `${pituus} ${yksikko} = ${tulos} ${muunnettuYksikko}`;
                tulokset.appendChild(listItem);
            }
        }
    </script>
</body>
</html>

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta