Kako u JavaScriptu napraviti kalkulator pretvorbe jedinica mase

Ovo je primjer JavaScript koda koji omogućava korisniku da unese masu u jednoj jedinici (npr. kilogramima) i konvertuje je u druge jedinice (npr. grame, funte, unce). Ovaj kod uključuje HTML i JavaScript za interaktivnu stranicu.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Konverter jedinica mase</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .converter {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        label, select, input {
            display: block;
            width: 100%;
            margin-bottom: 10px;
            padding: 8px;
            font-size: 1rem;
        }
        button {
            width: 100%;
            padding: 10px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
        }
        button:hover {
            background-color: #0056b3;
        }
        .result {
            margin-top: 20px;
            font-size: 1.2rem;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="converter">
        <h2>Konverter jedinica mase</h2>
        <label for="mass">Unesite masu:</label>
        <input type="number" id="mass" placeholder="Unesite vrijednost mase" />

<label for="unit">Odaberite početnu jedinicu:</label>
        <select id="unit">
            <option value="kg">Kilogram (kg)</option>
            <option value="g">Gram (g)</option>
            <option value="lb">Funta (lb)</option>
            <option value="oz">Unca (oz)</option>
        </select>

<label for="targetUnit">Odaberite ciljnju jedinicu:</label>
        <select id="targetUnit">
            <option value="kg">Kilogram (kg)</option>
            <option value="g">Gram (g)</option>
            <option value="lb">Funta (lb)</option>
            <option value="oz">Unca (oz)</option>
        </select>

<button onclick="convertMass()">Preračunaj</button>

if (isNaN(mass) || mass <= 0) {
                resultDiv.innerHTML = "<span style='color: red;'>Unesite validnu masu!</span>";
                return;
            }

// Konverzije u kilogram
            let massInKg;
            switch (unit) {
                case "kg":
                    massInKg = mass;
                    break;
                case "g":
                    massInKg = mass / 1000;
                    break;
                case "lb":
                    massInKg = mass * 0.453592;
                    break;
                case "oz":
                    massInKg = mass * 0.0283495;
                    break;
            }

// Konverzije iz kilograma u ciljnu jedinicu
            let convertedMass;
            switch (targetUnit) {
                case "kg":
                    convertedMass = massInKg;
                    break;
                case "g":
                    convertedMass = massInKg * 1000;
                    break;
                case "lb":
                    convertedMass = massInKg / 0.453592;
                    break;
                case "oz":
                    convertedMass = massInKg / 0.0283495;
                    break;
            }

// Prikaz rezultata
            resultDiv.innerHTML = `Rezultat: <strong>${convertedMass.toFixed(2)} ${targetUnit}</strong>`;
        }
    </script>
</body>
</html>

HTML Dio

1. Osnovna struktura dokumenta

<!DOCTYPE html>
<html lang="en">

Ovaj redak označava da je dokument HTML5.
lang="en" postavlja jezik dokumenta na engleski.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Konverter jedinica mase</title>
    <style>

<meta charset="UTF-8">: Osigurava da se koriste svi Unicode znakovi.
<meta name="viewport"...>: Omogućava responzivni dizajn na mobilnim uređajima.
<title>: Naslov stranice koji se prikazuje na kartici pretraživača.

2. Stilizacija (CSS)

body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

Postavlja osnovni font na Arial i dodaje razmak od 20px oko stranice.

.converter {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Centrira konverter sa margin: 0 auto;.
Dodaje border, zaokružene ivice i efekat senke.

button {
    width: 100%;
    padding: 10px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
}

Stilizuje dugme sa bojom pozadine (#007BFF) i omogućava da postane klikabilno (cursor: pointer).

Glavni sadržaj (HTML struktura)

<div class="converter">
    <h2>Konverter jedinica mase</h2>

Ovaj blok predstavlja glavni kontejner za konverter. Sadrži naslov (<h2>).

Polja za unos i selekciju

<label for="mass">Unesite masu:</label>
<input type="number" id="mass" placeholder="Unesite vrijednost mase" />

<label>: Tekst koji opisuje unos mase.
<input>: Polje gde korisnik unosi vrednost mase. Tip je number, što ograničava unos na brojeve.

<label for="unit">Odaberite početnu jedinicu:</label>
<select id="unit">
    <option value="kg">Kilogram (kg)</option>
    <option value="g">Gram (g)</option>
    <option value="lb">Funta (lb)</option>
    <option value="oz">Unca (oz)</option>
</select>

<select>: Padajući meni gde korisnik bira početnu jedinicu.
<option>: Svaka opcija predstavlja jednu jedinicu mase.

<button onclick="convertMass()">Preračunaj</button>
<div id="result" class="result"></div>

Dugme: Kada se klikne, poziva funkciju convertMass().
Rezultat: Prikazuje konvertovanu masu.

JavaScript Dio

Funkcija `convertMass`

Čitanje korisničkog unosa

const mass = parseFloat(document.getElementById("mass").value);

Uzima vrednost iz polja za unos mase (<input>).
Koristi parseFloat() da pretvori unos u decimalni broj.

const unit = document.getElementById("unit").value;
const targetUnit = document.getElementById("targetUnit").value;

Čita izabrane vrednosti iz oba padajuća menija (unit i targetUnit).

Validacija unosa

if (isNaN(mass) || mass <= 0) {
    resultDiv.innerHTML = "<span style='color: red;'>Unesite validnu masu!</span>";
    return;
}

Proverava da li je unos validan (nije prazan, nije tekst i veći je od 0).
Ako unos nije validan, prikazuje crvenu poruku greške i prekida funkciju.

Konverzija u kilograme

let massInKg;
switch (unit) {
    case "kg":
        massInKg = mass;
        break;
    case "g":
        massInKg = mass / 1000;
        break;
    case "lb":
        massInKg = mass * 0.453592;
        break;
    case "oz":
        massInKg = mass * 0.0283495;
        break;
}

Koristi switch za konverziju mase u osnovnu jedinicu – kilograme.
Npr. ako je jedinica grami, deli se sa 1000 da bi se dobili kilogrami.

Konverzija u ciljnju jedinicu

let convertedMass;
switch (targetUnit) {
    case "kg":
        convertedMass = massInKg;
        break;
    case "g":
        convertedMass = massInKg * 1000;
        break;
    case "lb":
        convertedMass = massInKg / 0.453592;
        break;
    case "oz":
        convertedMass = massInKg / 0.0283495;
        break;
}

Nakon što dobijemo masu u kilogramima, konvertujemo je u izabranu ciljnju jedinicu.

Prikaz rezultata

resultDiv.innerHTML = `Rezultat: <strong>${convertedMass.toFixed(2)} ${targetUnit}</strong>`;

Prikazuje rezultat sa zaokruženom vrednošću na dve decimale.

Rezime

HTML pravi korisničko sučelje.
CSS stilizira stranice za bolji vizualni izgled.
JavaScript omogućava interakciju: čita unose, vrši konverzije i prikazuje rezultat.

Kako u JavaScriptu napraviti kalkulator pretvorbe jedinica mase

HTML Dio

1. Osnovna struktura dokumenta

2. Stilizacija (CSS)

Glavni sadržaj (HTML struktura)

Polja za unos i selekciju

JavaScript Dio

Funkcija `convertMass`

Rezime

Odgovori Otkaži odgovor

O platformi

Kodiraj kako vidiš

Prednosti Tehničara

Zašto odabrati Tehničar.net?

HTML Dio

1. Osnovna struktura dokumenta

2. Stilizacija (CSS)

Glavni sadržaj (HTML struktura)

Polja za unos i selekciju

JavaScript Dio

Funkcija convertMass

Rezime

Odgovori Otkaži odgovor

O platformi

Funkcija `convertMass`