Kalkulator HTML, JavaScript i CSS: Tworzenie kalkulatora BMI

Spis treści:

• Co zrobimy
• Przygotowanie środowiska programistycznego
• Utworzenie folderu projektu
• Utworzenie znaczników interfejsu
• Poprawa wyglądu
• Dodanie logiki
• Testowanie aplikacji

Wskaźnik masy ciała (BMI) to ważny wskaźnik, który pozwala ocenić stosunek masy ciała do wzrostu. Pomaga ustalić, czy dana osoba mieści się w zdrowym zakresie masy ciała, czy też powinna pomyśleć o dostosowaniu diety. Korzystając z BMI, możesz łatwo zrozumieć, czy powinieneś pozwolić sobie na kolejną porcję ulubionego deseru, czy lepiej tymczasowo powstrzymać się od nadmiernych ilości jedzenia, aby zachować optymalne zdrowie.

W tym artykule opracujemy od podstaw prosty kalkulator wskaźnika masy ciała (BMI). Utworzymy formularz HTML do wprowadzania danych, napiszemy skrypt JavaScript do obliczeń i dodamy style CSS do projektu. Wszystkie elementy będą działać w przeglądarce; wystarczy otworzyć plik HTML, aby skorzystać z kalkulatora.

• Co zrobimy
• Krok pierwszy. Przygotowanie środowiska programistycznego
• Krok drugi. Utwórz folder projektu
• Krok trzeci. Utwórz znaczniki interfejsu
• Krok czwarty. Popraw wygląd
• Krok piąty. Dodaj logikę
• Krok szósty. Przetestuj aplikację

Co zrobimy

Obliczanie wskaźnika masy ciała (BMI) jest bardzo proste: należy podzielić masę ciała w kilogramach przez kwadrat wzrostu w metrach. Wskaźnik ten jest również znany jako wskaźnik Queteleta, nazwany na cześć belgijskiego naukowca Adolphe'a Queteleta, który jako pierwszy wprowadził ten termin. BMI to ważne narzędzie do oceny stanu zdrowia i określania stosunku wagi do wzrostu.

Kalkulator zostanie utworzony przy użyciu HTML, JavaScript i CSS. W HTML utworzymy znaczniki interfejsu, umieszczając wszystkie niezbędne elementy funkcjonalne. JavaScript będzie odpowiedzialny za logikę aplikacji, w tym obliczanie indeksu Quetelet i inne funkcje. CSS nada Twojej aplikacji estetyczny wygląd, zapewniając stylowy design. W rezultacie otrzymamy nowoczesny i funkcjonalny kalkulator.

Przygotowanie środowiska programistycznego

Dowolny nowoczesny Edytor kodu idealnie nadaje się do tworzenia w HTML, CSS i JavaScript, ale zalecamy korzystanie z Visual Studio Code. Ten edytor jest jednym z najpopularniejszych ze względu na przyjazną dla użytkownika funkcjonalność. Jest całkowicie darmowy i kompatybilny z systemami operacyjnymi Windows, macOS i Linux. Visual Studio Code umożliwia łatwe dostosowywanie do różnych zadań dzięki wielu dostępnym rozszerzeniom, co czyni go doskonałym wyborem dla programistów stron internetowych.

Przeczytaj także:

Visual Studio Code: instalacja, konfiguracja, obsługa języka rosyjskiego i klawisze skrótu

Visual Studio Code to Potężny i popularny edytor tekstu, szeroko wykorzystywany przez programistów do pisania kodu. Aby rozpocząć pracę z programem Visual Studio Code, należy wykonać kilka kroków: zainstalować edytor, dostosować go do swoich potrzeb, zlokalizować interfejs na język rosyjski i nauczyć się podstawowych skrótów klawiszowych, aby zwiększyć swoją produktywność.

Aby zainstalować program Visual Studio Code, wystarczy odwiedzić oficjalną stronę internetową i pobrać najnowszą wersję dla swojego systemu operacyjnego. Proces instalacji jest intuicyjny i nie wymaga dodatkowej wiedzy.

Dostosowywanie programu Visual Studio Code pozwala dostosować edytor do indywidualnych preferencji. Można zmienić motyw graficzny, zainstalować rozszerzenia dla różnych języków programowania i skonfigurować ustawienia autouzupełniania. Pomoże to stworzyć komfortowe środowisko pracy.

Rusyfikacja programu Visual Studio Code odbywa się poprzez instalację specjalnego pakietu językowego. W tym celu należy otworzyć sekcję rozszerzeń, znaleźć pakiet języka rosyjskiego i go zainstalować. Po tej zmianie interfejs edytora będzie dostępny w języku rosyjskim, co znacznie ułatwi pracę użytkownikom rosyjskojęzycznym.

Znajomość skrótów klawiszowych w programie Visual Studio Code znacznie przyspiesza proces tworzenia oprogramowania. Podstawowe skróty klawiaturowe obejmują kopiowanie (Ctrl+C), wklejanie (Ctrl+V), zapisywanie pliku (Ctrl+S) i szybkie przełączanie się między plikami (Ctrl+Tab). Znajomość pełnej listy skrótów klawiaturowych pomoże Ci pracować szybciej i wydajniej.

Dlatego instalacja, konfiguracja, lokalizacja i używanie skrótów klawiaturowych w programie Visual Studio Code sprawia, że ​​ten edytor jest optymalnym narzędziem dla programistów, pozwalającym skupić się na kodzie i zwiększyć produktywność.

Aby uprościć pracę z plikami HTML, zalecamy zainstalowanie rozszerzenia Live Preview. To rozszerzenie umożliwia otwieranie strony internetowej w przeglądarce bezpośrednio z edytora i automatyczne odświeżanie jej po każdej zmianie kodu. Znacznie przyspiesza to proces rozwoju i testowania, pozwalając natychmiast zobaczyć efekty swoich zmian.

Po uruchomieniu edytora przejdź do zakładki Rozszerzenia, klikając ikonę składającą się z czterech kwadratów znajdującą się na pasku bocznym. Dzięki temu uzyskasz dostęp do dodatkowych funkcji i narzędzi, które mogą usprawnić Twój przepływ pracy.

Wprowadź swoje zapytanie «Live Podgląd w pasku wyszukiwania.

Wybierz rozszerzenie Microsoft i kliknij przycisk instalacji. Spowoduje to dodanie niezbędnych funkcji i poprawę funkcjonalności aplikacji. Upewnij się, że wybierasz najnowsze rozszerzenie, które spełnia Twoje potrzeby.

Po zainstalowaniu rozszerzenia na dolnym panelu edytora pojawi się przycisk do uruchomienia serwera. Po kliknięciu rozszerzenie otwiera stronę HTML w przeglądarce i rozpoczyna śledzenie wszystkich zmian w kodzie w czasie rzeczywistym. Pozwala to na natychmiastowe sprawdzenie efektów edycji i usprawnia proces tworzenia stron internetowych.

Nie są wymagane żadne dodatkowe rozszerzenia dla HTML, CSS ani JavaScript, ponieważ VS Code zapewnia wbudowaną obsługę tych języków. Dzięki temu programiści mogą natychmiast rozpocząć pracę bez konieczności instalowania dodatkowych narzędzi. Dzięki VS Code zyskujesz dostęp do zaawansowanych funkcji edycji, takich jak podświetlanie składni, uzupełnianie kodu i integracja z systemem kontroli wersji, co znacznie ułatwia tworzenie stron internetowych.

• Podświetlanie składni,
• Uzupełnianie kodu,
• Nawigacja po strukturze dokumentu,
• Wbudowane podpowiedzi i dokumentacja.

Tworzenie folderu projektu

Najpierw musisz utworzyć niezbędne pliki. Przed rozpoczęciem zaleca się utworzenie folderu o nazwie, na przykład bmi-calculator, w dogodnym miejscu na komputerze.

W jego wnętrzu utwórz trzy puste pliki.

• index.html – do oznaczania interfejsu aplikacji;
• style.css – style aplikacji definiujące jej wygląd;
• script.js – do opisywania logiki kalkulatora w JavaScript.

Teraz wszystko jest gotowe do rozpoczęcia tworzenia aplikacji.

Tworzenie znaczników interfejsu

Środowisko programistyczne jest skonfigurowane, a folder projektu został utworzony. Teraz możesz przejść do układu. Zanim zaczniesz pisać kod HTML, ważne jest, aby określić, jakie elementy będą potrzebne do utworzenia kalkulatora i do czego będą one służyć. Prawidłowe zaplanowanie struktury HTML pomoże zapewnić funkcjonalność i użyteczność kalkulatora. Należy pamiętać, że każdy element powinien spełniać swoje przeznaczenie, niezależnie od tego, czy są to przyciski, pola wprowadzania danych, czy obszary wyświetlania wyników. To nie tylko uprości proces tworzenia, ale także poprawi komfort użytkowania.

Aby obliczyć wskaźnik masy ciała (BMI), należy wprowadzić dwa parametry: wagę i wzrost. Użytkownik wprowadza te dane ręcznie, dlatego wymagane są dwa pola wprowadzania danych: jedno dla wagi i jedno dla wzrostu. Prawidłowe obliczenie BMI pozwala ocenić stan zdrowia i zidentyfikować potencjalne problemy związane z nadwagą lub niedowagą.

Aby zapewnić przejrzystość interfejsu, dodamy etykiety za pomocą tagów obok każdego pola wprowadzania danych. Etykiety te będą służyć jako podpowiedzi, wskazując użytkownikowi, jakie informacje należy wprowadzić. Poprawi to komfort użytkowania i sprawi, że interakcja z interfejsem będzie bardziej intuicyjna.

Po pierwsze, będziemy potrzebować przycisku, który inicjuje proces obliczeń.

Wynik obliczeń zostanie zaprezentowany na stronie za pomocą dwóch tagów HTML. Umożliwi to efektywną wizualizację danych i poprawi odbiór informacji przez użytkownika. Prawidłowe użycie tagów zapewni strukturę treści i poprawi jej optymalizację SEO, co z kolei może pozytywnie wpłynąć na widoczność strony w wyszukiwarkach.

• Jeden będzie wyświetlał wartość liczbową wskaźnika BMI;
• Drugi – kategorię tekstową: na przykład „prawidłowa waga” lub „nadwaga”.

Wszystkie te elementy zostaną umieszczone w kontenerze. Zapewni to ich uporządkowanie i ułatwi dalszą pracę. Kontener pomoże ulepszyć strukturę strony i zoptymalizować ładowanie treści, co będzie miało pozytywny wpływ na doświadczenie użytkownika i optymalizację SEO.

W chwili obecnej Na tym etapie aplikacja ma minimalistyczny wygląd, składający się jedynie z tekstu i pól wprowadzania. Jest to całkowicie akceptowalne, ponieważ kod HTML został już przygotowany, a plik CSS został dołączony, choć brakuje jeszcze stylów. Kolejnym krokiem jest dodanie stylów, które poprawią wygląd interfejsu i uczynią go bardziej atrakcyjnym dla użytkowników. Optymalizacja wizualnej prezentacji aplikacji jest ważna dla poprawy wrażeń użytkownika i zwiększenia zaangażowania.

Każde pole wprowadzania danych ma wskazówkę określoną za pomocą atrybutu placeholder. Atrybut type=»number» określa, że ​​pole jest przeznaczone wyłącznie do wprowadzania wartości numerycznych, co zapobiega możliwości wprowadzania informacji tekstowych. Użycie atrybutu placeholder poprawia interfejs użytkownika, czyniąc go bardziej zrozumiałym i wygodnym. Prawidłowa konfiguracja pól wprowadzania danych z odpowiednimi atrybutami przyczynia się do poprawy jakości danych wprowadzanych przez użytkowników.

Kliknięcie przycisku aktywuje funkcję calculator(), która wykonuje obliczenia.

Wyniki są prezentowane w dwóch blokach, które znajdują się pod przyciskiem.

• Liczbowa wartość BMI jest wyświetlana w elemencie z klasą .bmi;
• Interpretacja tekstowa (na przykład „Normalna waga” lub „Otyłość”) jest wyświetlana w elemencie z klasą .category.

Style są dodawane za pomocą znacznika <link>, a skrypty za pomocą znacznika <script>. Prawidłowe dodawanie stylów i skryptów jest kluczowym elementem tworzenia stron internetowych, ponieważ pozwala poprawić wygląd witryny i jej funkcjonalność. Upewnij się, że ścieżki do plików są poprawnie określone, aby uniknąć błędów w wyświetlaniu i działaniu zasobów internetowych.

Poprawa wyglądu

Otwórzmy plik style.css i zacznijmy pracę nad projektem wizualnym aplikacji. Najpierw ustawimy podstawowe style dla znacznika body, definiując czcionkę, wyrównanie tekstu i kolor tła. To stworzy podstawę do dalszego stylizowania i udoskonalenia interfejsu użytkownika Twojej aplikacji. Prawidłowo dobrane style pomogą uczynić treść bardziej czytelną i atrakcyjną.

• font-family określa użytą rodzinę czcionek;
• text-align wyrównuje treść do środka strony;
• background-color ustawia kolor tła.

Aby zmienić kolor nagłówka i podtytułu w HTML, użyj właściwości color. Ta właściwość pozwala ustawić pożądany kolor tekstu, poprawiając wizualne postrzeganie treści i zwiększając jej czytelność. Właściwy wybór koloru pomaga wyróżnić ważne informacje i przyciągnąć uwagę odwiedzających. Użyj CSS, aby stylizować nagłówki, aby były bardziej atrakcyjne i spójne z ogólnym stylem Twojej witryny.

Oczywiście, mogę pomóc Ci w edycji tekstu. Podaj tekst źródłowy, który chcesz przerobić.

Teraz musisz zaprojektować obszar, w którym zostaną umieszczone wszystkie elementy kalkulatora. Proces ten obejmuje stworzenie ustrukturyzowanego i przyjaznego dla użytkownika interfejsu, który zapewni użytkownikom łatwą interakcję z narzędziem. Należy pamiętać, że projekt powinien być intuicyjny, zapewniając łatwy dostęp do każdego elementu kalkulatora i jego zauważalność. Należy stosować wyraźne rozróżnienia wizualne i odpowiednie kolory, aby ułatwić zrozumienie. Warto również wziąć pod uwagę responsywność projektu, aby zapewnić poprawne wyświetlanie kalkulatora na różnych urządzeniach.

W tym przykładzie dostosowujemy kolor tła za pomocą właściwości background-color, ustawiamy marginesy wewnętrzne za pomocą padding, tworzymy zaokrąglone rogi za pomocą border-radius i dodajemy subtelny cień za pomocą box-shadow. Właściwość display: inline-block pozwala elementowi zachowywać się jak element blokowy, zajmując jednocześnie tylko niezbędną szerokość dla swojej zawartości. To połączenie właściwości pomaga stworzyć stylowy i funkcjonalny projekt elementów strony internetowej, zapewniając ich atrakcyjność wizualną i łatwość użytkowania.

W rezultacie otrzymasz schludny kontener, który idealnie wpasuje się w ogólny projekt Twojej strony internetowej. Prawidłowy projekt kontenera nie tylko poprawia percepcję wizualną, ale także ułatwia nawigację. Wykorzystanie nowoczesnych technologii i standardów HTML pozwala na stworzenie kontenera, który jest responsywny i funkcjonalny. Takie podejście zapewni użytkownikom komfortową interakcję z Twoją witryną, co pozytywnie wpłynie na jej ruch i pozycje SEO.

Określmy lokalizację Etykiety tekstowe, pola wprowadzania danych i przyciski. Prawidłowe rozmieszczenie tych elementów na stronie poprawi komfort użytkownika i zwiększy konwersję. Etykiety tekstowe powinny znajdować się blisko odpowiednich pól wprowadzania danych, aby użytkownicy mogli łatwo zrozumieć, jakie informacje wprowadzić. Pola wprowadzania danych powinny być ułożone pionowo lub poziomo, w zależności od projektu strony. Przycisk akcji powinien być widoczny i przyciągać uwagę użytkowników oraz ułatwiać im wykonanie docelowej czynności.

W tym przykładzie użyto właściwości display z wartością table-cell, która umożliwia rozmieszczenie elementów takich jak label, input i button w tabeli. Każdy z tych elementów zajmuje osobną komórkę w wierszu, zapewniając uporządkowany i ustrukturyzowany wygląd. Dodatkowo właściwość margin pozwala ustawić pionowe odstępy między elementami, co poprawia wygląd formularza i ułatwia interakcję z nim. Korzystanie z tych właściwości CSS pozwala tworzyć bardziej uporządkowane i atrakcyjne wizualnie interfejsy.

Elementy są rozmieszczone kompaktowo i równomiernie. Zapewnia to schludny i uporządkowany wygląd, co pomaga poprawić odbiór informacji. Prawidłowe rozmieszczenie elementów na stronie ułatwia nawigację i poprawia komfort użytkownika. Optymalizacja rozmieszczenia elementów ma również pozytywny wpływ na SEO, ponieważ wyszukiwarki preferują strony uporządkowane i zorganizowane.

Styl musi być Ukończono Ustawiamy kolor tła przycisku, definiujemy kolor tekstu, usuwamy obramowanie za pomocą właściwości border: none, dodajemy padding i zaokrąglamy rogi. Po najechaniu kursorem zmienia się on we wskaźnik. Stosujemy również efekt najechania, który zmienia kolor przycisku po najechaniu, dodając interaktywność i poprawiając doświadczenie użytkownika. W rezultacie stworzymy wysokiej jakości, zoptymalizowaną treść, która spełnia nowoczesne standardy SEO. Zwiększy to widoczność Twojej witryny w wyszukiwarkach i przyciągnie Twoją grupę docelową. Optymalizacja tekstu obejmuje użycie słów kluczowych, poprawę struktury i czytelności oraz tworzenie unikalnej i informacyjnej treści. Wszystkie te czynniki przyczyniają się do wzrostu ruchu i zainteresowania Twoim produktem lub usługą. Dążenie do tworzenia wysokiej jakości treści pozwoli Ci wyróżnić się na tle konkurencji i przyciągnąć więcej klientów.

Teraz wszystko idzie zgodnie z planem.

Oto ostateczny kod CSS:

«`css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

h1 {
color: #333;
font-size: 24px;
margin-bottom: 20px;
}

p {
color: #666;
line-height: 1.5;
margin-bottom: 15px;
}

a {
color: #007BFF;
text-decoration: none;
}

a:hover {
text-decoration: underline;

.container {
max-width: 1200px;
margin: auto;
padding: 20px;

.header {
background-color: #f8f9fa;
padding: 15px;
text-align: center;

.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;

.button {
background-color: #007BFF;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;

.button:hover {
background-color: #0056b3;
}
«`

Ten kod CSS zapewnia podstawową stylizację strony internetowej, w tym projekt tekstu, linków, przycisków i kontenerów. Nadaje się do stworzenia nowoczesnego i przyjaznego dla użytkownika interfejsu, poprawiając percepcję wizualną i interakcję użytkownika z treścią.

Teraz przejdziemy do opracowania logiki kalkulatora. Ten etap obejmuje zdefiniowanie głównych funkcji i algorytmów, które będą używane do wykonywania obliczeń. Ważne jest, aby rozważyć wszystkie możliwe przypadki użycia, aby zapewnić dokładność i niezawodność kalkulatora. Zwróć uwagę na przetwarzanie danych wprowadzanych przez użytkownika i implementację operacji matematycznych. Efektywna logika kalkulatora powinna być intuicyjna i zapewniać szybkie wyniki, co pozytywnie wpłynie na doświadczenia użytkownika.

Dodawanie logiki

Nauczymy naszą aplikację obliczać wskaźnik masy ciała (BMI) i poprawnie interpretować wyniki.

Stworzymy podstawową strukturę funkcji o nazwie calculate(). Ta funkcja zostanie wywołana, gdy użytkownik kliknie przycisk „Oblicz”.

Przeczytaj również:

Funkcje w JavaScript: deklarowanie, wywoływanie i używanie bez błędów

Funkcje JavaScript stanowią podstawowy element programowania w tym języku. Umożliwiają one uporządkowanie kodu, czyniąc go bardziej czytelnym i nadającym się do ponownego użycia. Ważne jest, aby wiedzieć, jak poprawnie deklarować, wywoływać i używać funkcji, aby uniknąć typowych błędów.

Istnieje kilka sposobów deklarowania funkcji w JavaScript. Jedną z najczęstszych metod jest użycie słowa kluczowego «function». Na przykład, możesz zadeklarować funkcję w następujący sposób:

function FunctionName() {
// kod funkcji

Możesz również użyć wyrażeń funkcyjnych i funkcji strzałkowych. Wyrażenia funkcyjne wyglądają tak:

const FunctionName = function() {
// kod funkcji
};

Funkcje strzałkowe, wprowadzone w ES6, mają bardziej zwartą składnię:

const FunctionName = () => {
// kod funkcji
};

Po zadeklarowaniu funkcji można ją wywołać, podając jej nazwę i dodając nawiasy:

functionName();

Jeśli funkcja przyjmuje parametry, muszą one być podane w nawiasach. Na przykład:

function addition(a, b) {
return a + b;
}

Możesz przekazać wartości za pomocą wywołania funkcji:

addition(2, 3); // wynik wynosi 5

Podczas pracy z funkcjami ważne jest, aby pamiętać o kontekście wykonania. JavaScript oferuje wiele sposobów wiązania kontekstu, co może prowadzić do błędów, jeśli nie będziesz świadomy tego, jak i gdzie funkcje są wywoływane.

Ponadto, aby uniknąć błędów, powinieneś używać trybu ścisłego. Możesz to zrobić, dodając «use strict» na początku skryptu lub funkcji. Pomaga identyfikować problemy w kodzie, takie jak użycie niezainicjowanych zmiennych.

Funkcje w JavaScript zapewniają elastyczność i wydajność podczas tworzenia aplikacji internetowych. Zrozumienie, jak je poprawnie deklarować, wywoływać i używać, pomoże Ci uniknąć typowych błędów i zwiększyć wydajność kodu.

JavaScript umożliwia modyfikację zawartości strony internetowej poprzez interakcję z elementami HTML. W tym celu musi uzyskać dostęp do określonych elementów, takich jak pola wprowadzania, przyciski i kontenery, które wyświetlą wynik. Ta interakcja pozwala dynamicznie aktualizować informacje na stronie, poprawiając komfort użytkowania i zapewniając interaktywność.

Do realizacji tego zadania używane jest polecenie document.querySelector. Ta metoda umożliwia wybranie elementu na stronie internetowej za pomocą selektorów CSS. document.querySelector to potężne narzędzie do manipulacji DOM, ponieważ zapewnia dostęp do pierwszego znalezionego elementu pasującego do określonego selektora. Korzystając z tej metody, programiści mogą efektywnie uzyskiwać dostęp do elementów, zmieniać ich właściwości, dodawać zdarzenia i manipulować zawartością strony. Możliwość wybierania elementów za pomocą document.querySelector znacznie upraszcza proces tworzenia i poprawia komfort użytkowania.

• Dokument to cała strona HTML.
• querySelector() to polecenie, które wyszukuje element na stronie według jego klasy, znacznika, identyfikatora lub dowolnego innego selektora.

Aby uzyskać dostęp do pola wprowadzania danych z klasą weight w JavaScript, można użyć metody document.querySelector. Na przykład, aby pobrać element, można napisać następujący kod:

const weightInput = document.querySelector(‘.weight’);

Ten kod ułatwia interakcję z polem wprowadzania danych, zmianę jego wartości lub obsługę zdarzeń. Użycie klas dla selektorów upraszcza wybieranie elementów na stronie i sprawia, że ​​kod jest bardziej czytelny.

• «.weight» — to selektor klasy CSS (kropka oznacza, że ​​szukamy według klasy).
• weightInput — zmienna, w której przechowujemy znaleziony element.

Możemy również wyodrębnić inne elementy.

Teraz wyodrębnimy wartości wprowadzone przez użytkownika w polach „Waga” i „Wysokość”. Dane te są niezbędne do dalszych obliczeń i analiz. Uzyskane wartości pozwolą nam na dostarczenie dokładniejszych wyników i rekomendacji.

Gdy użytkownik wprowadza dane do pola tekstowego, są one zapisywane jako zwykły tekst. Aby wykonać operacje matematyczne, takie jak dzielenie i potęgowanie, konieczne jest przekształcenie tego tekstu do formatu liczbowego. W tym celu używana jest funkcja parseFloat(), która umożliwia przekształcenie ciągu znaków na liczbę zmiennoprzecinkową. Ta konwersja jest ważnym krokiem w dalszych obliczeniach.

• weightInput.value to wartość wprowadzona przez użytkownika w polu „Waga”.
• heightInput.value to wartość wprowadzona przez użytkownika w polu „Wysokość”.
• parseFloat() — konwertuje tekst na liczbę, w tym ułamki dziesiętne.

Przed zatwierdzeniem danych wprowadzonych przez użytkownika należy upewnić się, że rzeczywiście wypełnił on wymagane pola. W przypadku, gdy użytkownik przypadkowo kliknie przycisk „Oblicz” bez wprowadzenia informacji, powinno zostać wyświetlone powiadomienie z prośbą o wprowadzenie danych. Ponadto kursor powinien znajdować się w polu wymagającym wypełnienia, aby zapewnić wygodę i przyspieszyć proces wprowadzania informacji.

isNaN() to funkcja, która sprawdza, czy wartość jest liczbą. Jeśli funkcja zwraca wartość true, oznacza to, że wprowadzone dane są brakujące lub zawierają błąd. Korzystanie z isNaN() pozwala na efektywne przetwarzanie danych wprowadzonych przez użytkownika i zapobieganie błędom w obliczeniach na danych liczbowych.

Kontrola wzrostu to ważny proces, który pomaga zidentyfikować możliwości poprawy i optymalizacji. Ten etap obejmuje analizę bieżących wskaźników i ocenę czynników sprzyjających lub hamujących wzrost. Regularna kontrola pozwala nie tylko śledzić zmiany, ale także dostosowywać strategię w oparciu o uzyskane dane. Wykorzystanie różnych metod analitycznych, takich jak analiza SWOT czy analiza konkurencji, przyczynia się do głębszego zrozumienia sytuacji i pomaga w opracowaniu skutecznych rozwiązań umożliwiających osiągnięcie celów. Włączenie regularnych kontroli do procesów biznesowych zapewnia zrównoważony wzrost i rozwój firmy.

Jeśli wprowadzone dane są prawidłowe, obliczymy Twój wskaźnik masy ciała (BMI). Wskaźnik masy ciała (BMI) to ważny wskaźnik, który pomaga ocenić zależność między wagą a wzrostem danej osoby. Prawidłowe obliczenie BMI pozwala określić, czy Twoja waga jest prawidłowa, czy też istnieje ryzyko nadwagi, niedowagi lub otyłości. Aby to zrobić, musisz wprowadzić prawidłowe wartości wzrostu i wagi. Po otrzymaniu wyników będziesz mógł wyciągnąć wnioski na temat swojego stanu zdrowia i, jeśli to konieczne, skonsultować się ze specjalistą.

• Podziel wagę w kilogramach przez kwadrat wzrostu w metrach;
• wzrost / 100 — przelicz centymetry na metry;
• ** 2 — podnieś wzrost do kwadratu.

Utwórz zmienną kategorii, która później będzie zawierać tekst wyjaśniający wynik. Ta zmienna pomoże ustrukturyzować informacje i poprawić zrozumienie danych wyjściowych.

Teraz ustawiamy wartość zmiennej kategorii w zależności od wartości zmiennej bmi. Po wprowadzeniu danych przez użytkownika i obliczeniu jego wskaźnika masy ciała (BMI), musimy określić, do której kategorii należy: niedowaga, prawidłowa waga, nadwaga lub otyłość. W tym celu używamy konstrukcji warunkowej if…else, która pozwala na wykonywanie różnych działań w zależności od wartości zmiennej bmi. To ważny krok w analizie stanu zdrowia użytkownika.

Oto jak to działa:

Każdy stan porównuje wartość wskaźnika masy ciała (BMI) z ustalonymi progami. Jeśli wartość spełnia określone kryteria, do zmiennej kategorii przypisywana jest tekstowa interpretacja stanu. Dodatkowo tło kalkulatora (.calculator) zmienia kolor w zależności od wybranej kategorii. Pomaga to wizualnie wyróżnić wyniki i ułatwia zrozumienie stanu zdrowia użytkownika.

• jasnoczerwony — jeśli niedowaga;
• zielony — jeśli waga jest prawidłowa;
• jasnoczerwony — jeśli nadwaga;
• ciemnoczerwony — jeśli otyłość.

Zmieniony tekst:

Przejrzyj nasz artykuł Po cenne informacje. Oferujemy dogłębną analizę i praktyczne zalecenia, które pomogą Ci lepiej zrozumieć temat. Naszym celem jest dostarczanie czytelnikom wysokiej jakości treści dostosowanych do ich potrzeb. Zagłębiając się w materiał, poszerzysz swoją wiedzę i znajdziesz przydatne wskazówki. Nie przegap okazji, aby dowiedzieć się więcej o kluczowych aspektach, które mogą mieć wpływ na Twoje życie lub biznes.

Przeczytaj również:

Operatory warunkowe w JavaScript: if, else i switch – podstawy programowania dla początkujących. Konstrukcje te pozwalają na wykonywanie różnych akcji w zależności od określonych warunków. Zrozumienie ich działania jest kluczowe w programowaniu w JavaScript.

Instrukcja if służy do testowania warunku i wykonania bloku kodu, jeśli warunek jest prawdziwy. Jeśli warunek jest fałszywy, możesz użyć instrukcji else, aby wykonać alternatywny blok kodu. Na przykład możesz sprawdzić, czy liczba jest dodatnia i wyświetlić odpowiedni komunikat.

Instrukcja switch to wygodniejszy sposób obsługi wielu warunków. Pozwala porównać jedną wartość z kilkoma możliwymi opcjami. Jest to szczególnie przydatne, gdy trzeba przetestować to samo wyrażenie na kilku różnych wartościach.

Podczas korzystania z instrukcji warunkowych ważne jest, aby zapewnić poprawną składnię i logikę. Błędy w wyrażeniach warunkowych mogą prowadzić do nieprawidłowego wykonania kodu. Zaleca się korzystanie z konsoli do debugowania i testowania warunków.

Znajomość i poprawne użycie instrukcji if, else i switch znacznie uprości proces pisania kodu i uczyni go bardziej czytelnym. Opanowanie tych konstrukcji pozwoli Ci tworzyć bardziej złożone i funkcjonalne aplikacje w JavaScript.

Oto ostateczna wersja funkcji:

Funkcja calculate() wykonuje kilka zadań: odbiera dane, weryfikuje je, oblicza wskaźnik masy ciała (BMI) i formatuje wynik. Chociaż to podejście działa poprawnie, kod staje się nieporęczny, co utrudnia czytanie i konserwację. Aby ułatwić pracę z kodem, podzielimy go na kilka mniejszych funkcji. Ułatwi to nawigację w kodzie i ułatwi wprowadzanie przyszłych zmian.

Ta funkcja służy do wyszukiwania pól wprowadzania wzrostu i wagi, a także do pobierania wprowadzonych wartości i sprawdzania ich poprawności. W przypadku wykrycia błędu wyświetlany jest komunikat, a funkcja zwraca wartość null.

Funkcja oblicza wskaźnik masy ciała (BMI) na podstawie wprowadzonych parametrów: wagi i wzrostu. BMI to ważny wskaźnik, który pomaga ocenić stan zdrowia i określić stosunek masy ciała do wzrostu. Za pomocą tej funkcji można szybko i dokładnie uzyskać wartość BMI, która pomoże w monitorowaniu stanu zdrowia i kondycji fizycznej.

Funkcja zwraca obiekt zawierający kategorię i kolor tła w zależności od wartości wskaźnika masy ciała (BMI). Prawidłowa interpretacja BMI pozwala klasyfikować stan zdrowia i wizualnie wyróżniać odpowiadające im kategorie za pomocą schematów kolorów.

Funkcja główna została uproszczona i uczyniona bardziej zrozumiałą. Teraz wywołuje ona funkcje pomocnicze, zbiera uzyskane wyniki i wyświetla je na stronie. To ulepszenie pozwala na efektywniejsze zarządzanie kodem i ułatwia jego konserwację.

Cały kod będzie prezentowany w następujący sposób:

Testowanie aplikacji

Po ukończeniu kodu możesz przetestować kalkulator bezpośrednio we wbudowanej przeglądarce, korzystając z rozszerzenia Live Preview. Pozwoli Ci to natychmiast zobaczyć wyniki działania kodu, usprawniając proces tworzenia aplikacji. Nie przegap okazji do przetestowania funkcjonalności kalkulatora w czasie rzeczywistym, aby upewnić się, że działa poprawnie i jest łatwy w użyciu.

Rozważmy prosty scenariusz: jeśli oba pola pozostaną puste, a użytkownik kliknie przycisk, aplikacja natychmiast powiadomi go o konieczności wprowadzenia wartości wagi. Kursor automatycznie przesunie się do pola wprowadzania wagi, co ułatwi interakcję z aplikacją.

Scenariusz drugi: wprowadzamy wagę wartość, podczas gdy pole wzrostu pozostaje puste. W takim przypadku system nie będzie mógł poprawnie przetworzyć danych i zwróci błąd. Aby uzyskać dokładne wyniki i zalecenia, wypełnij pola wagi i wzrostu. Dzięki temu system będzie mógł zapewnić niezbędne obliczenia i zalecenia odpowiadające Twoim parametrom.

Po kliknięciu przycisku pojawi się komunikat „Podaj swój wzrost!” pojawi się. Kursor automatycznie przesunie się do odpowiedniego pola wprowadzania. Wprowadź swój wzrost i kliknij przycisk, aby kontynuować.

Teraz wprowadzimy wartości wagi i wzrostu, a następnie klikniemy przycisk. Aplikacja obliczy Twój wskaźnik masy ciała (BMI) i wyświetli wynik. Jeśli Twoje BMI mieści się w normie, tło kalkulatora zmieni kolor na zielony, a na ekranie pojawi się komunikat informujący o Twojej prawidłowej wadze. Dzięki temu użytkownicy będą mogli szybko ocenić swoją kondycję fizyczną i podjąć niezbędne kroki w celu utrzymania zdrowia.

Zmieńmy parametry, na przykład zmniejszmy wzrost.

Wskaźnik masy ciała (BMI) wzrośnie, a tło strony zmieni kolor na czerwony. Na ekranie pojawi się komunikat informujący o otyłości użytkownika.

Kalkulator działa poprawnie, ponieważ poprawnie przetwarza wprowadzone dane, oblicza wskaźnik masy ciała (BMI) i dokładnie interpretuje wyniki. Potwierdza to jego wiarygodność i dokładność obliczeń.

Kalkulator można uruchomić nie tylko za pomocą podglądu na żywo, ale również bezpośrednio w przeglądarce. Aby to zrobić, wykonaj następujące kroki. Najpierw upewnij się, że masz zainstalowany wymagany serwer WWW, aby zapewnić prawidłowe działanie aplikacji. Następnie otwórz przeglądarkę i wprowadź ścieżkę do pliku kalkulatora. Umożliwi to korzystanie z jego funkcji bez konieczności korzystania ze środowiska programistycznego. Uruchomienie kalkulatora w ten sposób pozwala ocenić jego wydajność i użyteczność w warunkach rzeczywistych, co jest szczególnie ważne dla użytkowników.

• Znajdź plik index.html w folderze projektu.
• Kliknij go dwukrotnie – domyślnie otworzy się w przeglądarce.
• Jeśli zamiast przeglądarki otworzy się edytor tekstu, kliknij plik prawym przyciskiem myszy i wybierz „Otwórz za pomocą”, a następnie wybierz żądaną przeglądarkę (np. Google Chrome lub Firefox).

Działający kalkulator w przeglądarce Firefox może wyglądać tak:

Dowiedz się więcej o kodowaniu i programowaniu na naszym kanale Telegram. Subskrybuj, aby być na bieżąco z przydatnymi informacjami i ciekawymi treściami!

Przeczytaj także:

• Czym jest JavaScript i dlaczego jest potrzebny?
• Jak stworzyć prosty slider za pomocą HTML, CSS i JavaScript
• Cykle w JavaScript: czym są, czym się różnią i dlaczego są potrzebne
• Operatory warunkowe if, else i switch w JavaScript: od czego zacząć i jak uniknąć błędów

Dowiedz się więcej o kodowaniu i programowaniu na naszym kanale Telegram. Subskrybuj, aby być na bieżąco z istotnymi treściami i przydatnymi wskazówkami.