Frontend Mentor – Body-Mass-Index-Rechner
Willkommen! ?
Vielen Dank, dass Sie sich für diese Premium-Frontend-Mentor-Codierungsherausforderung entschieden haben.
Frontend-Mentor-Herausforderungen helfen Ihnen, Ihre Programmierfähigkeiten zu verbessern, indem Sie realistische Projekte erstellen. Diese Premium-Herausforderungen sind perfekte Portfolio-Teile. Sie können also gerne das, was Sie in Ihrem Portfolio erstellen, verwenden, um es anderen zu zeigen.
Um diese Herausforderung zu meistern, benötigen Sie ein ausgeprägtes Verständnis von HTML, CSS und JavaScript.
Die Herausforderung
Ihre Herausforderung besteht darin, diese Seite mit dem Body-Mass-Index-Rechner so zu gestalten, dass sie dem Design so nahe wie möglich kommt.
Sie können beliebige Tools verwenden, die Ihnen bei der Bewältigung der Herausforderung helfen. Wenn Sie also etwas haben, das Sie gerne üben möchten, probieren Sie es einfach aus.
Ihre Benutzer sollten in der Lage sein:
1. Geben Sie ihre Größe und ihr Gewicht ein.
2. Berechnen Sie ihren BMI basierend auf den von ihnen eingegebenen Werten.
3. Sehen Sie sich das BMI-Ergebnis in der Ergebniskomponente an.
4. Sehen Sie sich ihre Gewichtsklassifizierung in der Ergebniskomponente an.
5. Sehen Sie sich den gesunden Gewichtsbereich an, der in der Ergebniskomponente angezeigt wird.
Brauchen Sie Unterstützung bei der Herausforderung? Treten Sie unserer Community bei und stellen Sie Fragen im #help-Kanal.
Erwartetes Verhalten
Nachfolgend finden Sie die BMI-Bereiche und deren Gewichtsklassifizierungen. Fügen Sie basierend auf den BMI-Ergebnissen der Person deren Gewichtsklassifizierung zum Satz „Ihr BMI deutet darauf hin, dass Sie sind“ in der Ergebniskomponente hinzu.
| BMI-Bereich | Gewichtsklassifizierung |
| ------------------- | --------------------- |
| Weniger als 18,5 | Untergewicht |
| 18,5 bis 24,9 | Gesundes Gewicht |
| 25 bis 29,9 | Übergewicht |
| 30 oder mehr | Fettleibig |
Fügen Sie den gesunden Gewichtsbereich der Person basierend auf der unteren und oberen BMI-Kategorisierung und der Körpergröße der Person hinzu.
Wo man alles findet
Ihre Aufgabe besteht darin, das Projekt anhand der bereitgestellten Designdatei zu erstellen. Wir bieten sowohl Sketch- als auch Figma-Versionen des Designs an, sodass Sie wählen können, welches Tool Sie bevorzugen. Sie können die Designdatei auf der Plattform herunterladen. Bitte stellen Sie sicher, dass Sie diese nicht an Dritte weitergeben. Der Design-Download enthält auch eine README.md-Datei, die Ihnen bei der Einrichtung hilft.
Alle für dieses Projekt erforderlichen Assets befinden sich im Ordner /assets. Die Bilder sind bereits für die richtige Bildschirmgröße exportiert und optimiert. Einige sind auf mehreren Bildschirmgrößen wiederverwendbar. Wenn Sie also ein Bild in einem bestimmten Ordner nicht sehen, befindet es sich normalerweise in einem anderen Ordner für diese Seite.
Wir fügen auch variable und statische Schriftartdateien für die erforderlichen Schriftarten für dieses Projekt bei. Sie können entweder eine Verknüpfung zu Google Fonts herstellen oder die lokalen Schriftartendateien verwenden, um die Schriftarten selbst zu hosten. Beachten Sie, dass wir die statischen Schriftartdateien für die Schriftstärken entfernt haben, die für dieses Projekt nicht benötigt werden.
Das Designsystem in der Designdatei bietet Ihnen weitere Informationen zu den verschiedenen Farben, Schriftarten und Stilen, die in diesem Projekt verwendet werden. Unsere Schriftarten stammen immer von Google Fonts.
Erstellen Sie Ihr Projekt
Fühlen Sie sich frei, jeden Arbeitsablauf zu verwenden, mit dem Sie sich wohl fühlen. Im Folgenden finden Sie einen empfohlenen Prozess. Sie haben jedoch nicht das Gefühl, dass Sie die folgenden Schritte ausführen müssen:
1. Richten Sie Ihr Projekt ein: Erstellen Sie einen neuen Ordner für Ihr Projekt und initialisieren Sie ihn mit Git.
2. Fügen Sie die HTML-, CSS- und JavaScript-Dateien hinzu: Erstellen Sie die erforderlichen Dateien für Ihr Projekt.
3. Erstellen Sie die HTML-Struktur: Verwenden Sie die Designdatei als Referenz, um die Grundstruktur Ihres Projekts aufzubauen.
4. Gestalten Sie den HTML-Code mit CSS: Verwenden Sie die Designdatei, um die Elemente Ihres Projekts zu gestalten.
5. Funktionalität mit JavaScript hinzufügen: Verwenden Sie JavaScript, um Benutzereingaben und Berechnungen zu verarbeiten.
6. Testen Sie Ihr Projekt: Testen Sie die Funktionalität Ihres Projekts mit den Entwicklertools Ihres Browsers.
7. Stellen Sie Ihr Projekt bereit: Hosten Sie Ihr Projekt auf einer kostenlosen Hosting-Plattform.
Bereitstellen Ihres Projekts
Wie oben erwähnt, gibt es viele Möglichkeiten, Ihr Projekt kostenlos zu hosten. Unsere empfohlenen Gastgeber sind:
GitHub-Seiten
Netlify
Vercel
Sie können Ihre Website mit einer dieser Lösungen oder einem unserer anderen vertrauenswürdigen Anbieter hosten. Lesen Sie mehr über unsere empfohlenen und vertrauenswürdigen Gastgeber.
Erstellen Sie eine benutzerdefinierte README.md
Wir empfehlen dringend, diese README.md mit einer benutzerdefinierten Datei zu überschreiben. Wir haben in diesem Startercode eine Vorlage in der Datei README-template.md bereitgestellt.
Die Vorlage bietet eine Anleitung zum Hinzufügen. Eine benutzerdefinierte README-Datei hilft Ihnen, Ihr Projekt zu erklären und über Ihre Erkenntnisse nachzudenken. Sie können unsere Vorlage jederzeit beliebig bearbeiten.
Nachdem Sie Ihre Informationen zur Vorlage hinzugefügt haben, löschen Sie diese Datei und benennen Sie die Datei README-template.md in README.md um. Dadurch wird es als README-Datei Ihres Repositorys angezeigt.
Einreichen Ihrer Lösung
Reichen Sie Ihre Lösung auf der Plattform ein, damit der Rest der Community sie sehen kann. Tipps dazu finden Sie in unserer „Vollständigen Anleitung zum Einreichen von Lösungen“.
Denken Sie daran: Wenn Sie Feedback zu Ihrer Lösung benötigen, stellen Sie beim Einreichen unbedingt Fragen. Je konkreter und detaillierter Sie Ihre Fragen formulieren, desto höher ist die Chance, dass Sie wertvolles Feedback von der Community erhalten.
⚠️ WICHTIG ⚠️: Bei diesen Premium-Herausforderungen achten Sie bitte darauf, die Designdateien nicht auf GitHub hochzuladen, wenn Sie sie auf der Plattform einreichen und teilen. Wenn Sie ein brandneues Projekt erstellt haben, können Sie dies am einfachsten tun, indem Sie die in diesem Starterprojekt bereitgestellte .gitignore-Datei kopieren.
Teilen Sie Ihre Lösung
Es gibt mehrere Orte, an denen Sie Ihre Lösung teilen können:
Frontend-Mentor: Teilen Sie Ihre Lösung auf der Plattform, damit der Rest der Community sie sehen kann.
GitHub: Teilen Sie Ihre Lösung auf GitHub.
Twitter: Teilen Sie Ihre Lösung auf Twitter.
Wir stellen Vorlagen zur Verfügung, die Ihnen helfen, Ihre Lösung zu teilen, nachdem Sie sie auf der Plattform eingereicht haben. Bitte bearbeiten Sie sie und fügen Sie spezifische Fragen hinzu, wenn Sie Feedback einholen möchten.
Je konkreter Sie Ihre Fragen formulieren, desto wahrscheinlicher ist es, dass ein anderes Mitglied der Community Ihnen Feedback gibt.
Haben Sie Feedback für uns?
Wir freuen uns über Feedback! Wir sind stets bestrebt, unsere Herausforderungen und unsere Plattform zu verbessern. Wenn Sie also etwas erwähnen möchten, senden Sie bitte eine E-Mail an hi[at]frontendmentor[dot]io.
Viel Spaß beim Bauen! ✨
