HTML-, CSS- und JavaScript-Projekte

Willkommen in meiner Sammlung von HTML-, CSS- und JavaScript-Projekten! Dieser Blogbeitrag bietet einen umfassenden Überblick über verschiedene von mir erstellte Projekte und stellt verschiedene Aspekte der Webentwicklung vor. Jedes Projekt ist in einem eigenen Repository verfügbar, das den gesamten Code enthält, den Sie zum Erkunden und Lernen benötigen.

Inhaltsverzeichnis

• Einführung
• Projektübersicht
• Erste Schritte
• Mitwirken
• Autor

Einführung

Als Webentwickler arbeite ich gerne an einer Vielzahl von Projekten, die mir helfen, meine Fähigkeiten in HTML, CSS und JavaScript zu verfeinern. Von einfachen Taschenrechnern bis hin zu komplexeren Anwendungen demonstrieren diese Projekte verschiedene Techniken und Best Practices in der Webentwicklung. Unten finden Sie eine kuratierte Liste von Projekten, jedes mit einem Link zum jeweiligen GitHub-Repository.

Projektübersicht

Hier ist eine Übersicht der Projekte, an denen ich gearbeitet habe:

1. Abhi ki News

   • Eine Nachrichtenanwendung, die die neuesten Schlagzeilen zusammenfasst und anzeigt.
   • Code anzeigen

2. Ratgebergenerator

   • Generiert zufällige Ratschläge, um Benutzern hilfreiche Tipps zu geben.
   • Code anzeigen

3. Altersrechner

   • Ein Tool zur Berechnung des Alters basierend auf der Eingabe des Geburtsdatums.
   • Code anzeigen

4. Analoguhr

   • Zeigt mithilfe von JavaScript eine funktionsfähige Analoguhr an.
   • Code anzeigen

5. Artikelkarte

   • Eine stilisierte Kartenkomponente zur Präsentation von Artikeln.
   • Code anzeigen

6. BMI-Rechner

   • Berechnet den Body-Mass-Index basierend auf Benutzereingaben.
   • Code anzeigen

7. Countdown-Timer

   • Ein Timer, der bis zu einem bestimmten Datum und einer bestimmten Uhrzeit herunterzählt.
   • Code anzeigen

8. Würfelwurfsimulator

   • Simuliert Würfeln mit einem Zufallszahlengenerator.
   • Code anzeigen

9. Schlagzeug

   • Ein virtuelles Schlagzeug, mit dem Benutzer verschiedene Schlagzeugsounds spielen können.
   • Code anzeigen

10. FAQ Akkordeon

    • Ein FAQ-Bereich im Akkordeon-Stil für Websites.
    • Code anzeigen

11. Münze werfen

    • Eine einfache Münzwurfsimulation.
    • Code anzeigen

12. Konzentrieren Sie sich auf den Tag

    • Hilft Benutzern, sich mit einer fokussierten Benutzeroberfläche auf tägliche Aufgaben zu konzentrieren.
    • Code anzeigen

13. Feinschmecker-Hamburger

    • Ein stilvolles Hamburger-Menü für Websites zum Thema Essen.
    • Code anzeigen

14. Kreditrechner

    • Berechnet Kreditrückzahlungen basierend auf Benutzereingaben.
    • Code anzeigen

15. Anmeldeformular

    • Ein einfaches Anmeldeformular mit Formularvalidierung.
    • Code anzeigen

16. Monatskalender

    • Zeigt einen Kalender für einen bestimmten Monat an.
    • Code anzeigen

17. Hypothekenrechner

    • Berechnet Hypothekenzahlungen basierend auf verschiedenen Eingaben.
    • Code anzeigen

18. News-Homepage

    • Ein Homepage-Layout für eine Nachrichten-Website.
    • Code anzeigen

19. Newsletter-Anmeldeformular

    • Ein Formular für Benutzer zum Abonnieren von Newslettern.
    • Code anzeigen

20. Passwortgenerator

    • Generiert sichere Passwörter mit anpassbaren Optionen.
    • Code anzeigen

21. Pomodoro-Timer

    • Ein Timer zur Steigerung der Produktivität mithilfe der Pomodoro-Technik.
    • Code anzeigen

22. Profilkarte

    • Eine Kartenkomponente zur Anzeige von Benutzerprofilen.
    • Code anzeigen

23. QR-Code-Generator

    • Generiert QR-Codes basierend auf Benutzereingaben.
    • Code anzeigen

24. Stein-Papier-Schere

    • Ein Stein-Papier-Schere-Spiel, implementiert in JavaScript.
    • Code anzeigen

25. Einfacher Rechner

    • Ein einfacher Rechner zur Durchführung arithmetischer Operationen.
    • Code anzeigen

26. Sneakers E-Commerce

    • Eine E-Commerce-Seite für Sneaker mit Produktlisten.
    • Code anzeigen

27. Temperaturkonverter

    • Rechnet Temperaturen zwischen Celsius, Fahrenheit und Kelvin um.
    • Code anzeigen

28. Referenzen-Slider

    • Eine Slider-Komponente zum Anzeigen von Benutzerreferenzen.
    • Code anzeigen

29. Text-zu-Sprache-Generator

    • Konvertiert Texteingaben mithilfe der Web Speech API in gesprochene Wörter.
    • Code anzeigen

30. Tic-Tac-Toe

    • Ein klassisches Tic-Tac-Toe-Spiel, implementiert in JavaScript.
    • Code anzeigen

31. Trinkgeldrechner

    • Berechnet den Trinkgeldbetrag basierend auf der Rechnung und dem Trinkgeldprozentsatz.
    • Code anzeigen

32

. Todo-Liste
- Eine einfache To-Do-Listen-Anwendung zum Verwalten von Aufgaben.
- Code anzeigen

1. Gewichtsumrechner
   • Rechnet Gewichte zwischen verschiedenen Einheiten um.
   • Code anzeigen

Erste Schritte

Um eines dieser Projekte zu klonen und lokal auszuführen, befolgen Sie diese Schritte:

1. Klonen Sie das Repository:

   git clone https://github.com/abhishekgurjar-in/html-css-javascript-projects.git

1. Navigieren Sie zum Projektverzeichnis:

   cd <project-name>

1. Öffnen Sie das Projekt in Ihrem Browser: Öffnen Sie die Datei index.html in Ihrem Browser, um das Projekt in Aktion zu sehen.

Mitwirken

Wenn Sie zu einem dieser Projekte beitragen möchten, befolgen Sie bitte diese Richtlinien:

1. Forken Sie das Repository.
2. Erstellen Sie einen neuen Zweig für Ihre Änderungen.
3. Übernehmen Sie Ihre Änderungen und übertragen Sie sie in Ihr gespaltenes Repository.
4. Erstellen Sie eine Pull-Anfrage mit einer Beschreibung Ihrer Änderungen.

Autor

Abhishek Gurjar

Das obige ist der detaillierte Inhalt vonHTML-, CSS- und JavaScript-Projekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!