Stellen Sie Ihre erste To-Do-Listenanwendung bereit: 8 Schritte

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:17

Wenn Sie völlig neu im Programmieren sind oder etwas Hintergrundwissen haben, fragen Sie sich vielleicht, wo Sie mit dem Lernen beginnen sollen. Sie müssen lernen, wie, was, wo zu codieren ist, und dann, wenn der Code fertig ist, wie Sie ihn bereitstellen, damit das Ganze sichtbar ist.

Die gute Nachricht ist, dass die Codierung nicht schwierig ist.

Zielgruppe: Dieses Tutorial richtet sich an Anfänger, die eine Karriere in der Webentwicklung beginnen möchten und allgemeine Kenntnisse über Webtechnologien haben.

Bauzeit: 90 Minuten.

Schwierigkeit: Einfach.

Schritt 1: Was werden wir bauen?

Am Ende dieses Tutorials werden wir:

• Erstellen Sie eine einfache To-Do-Listen-Webanwendung mit HTML5.
• Integrieren Sie Bootstrap in unsere App, um gut aussehendes und schnelles Styling hinzuzufügen.
• Verwenden Sie die JavaScript- und JQuery-Bibliothek, um unserer Anwendung dynamisches Verhalten hinzuzufügen.
• Stellen Sie unsere Anwendung in der Cloud mit Ziet/now bereit.

In Aktion:

Schritt 2: Einführung in HTML, Bootstrap, JavaScript & JQuery

Was ist HTML?

Hyper Text Markup Language (HTML) kann als "die Sprache des Internets" betrachtet werden. HTML ist die Standard-Auszeichnungssprache, die zum Erstellen von Webseiten verwendet wird. Es wurde ursprünglich für den Austausch wissenschaftlicher Dokumente entwickelt. Anpassungen an HTML im Laufe der Jahre machten es geeignet, mehrere andere Arten von Dokumenten zu beschreiben, die als Webseiten im Internet angezeigt werden können.

Die einzige Voraussetzung, um eine HTML-Seite anzuzeigen, ist ein Webbrowser wie Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome oder Apple Safari.

Was ist Bootstrap?

Bootstrap ist das beliebteste HTML-, CSS- und JavaScript-Framework zum Erstellen von reaktionsschnellen Mobile-First-Websites. Bootstrap ist ein von Twitter entwickeltes Open-Source-Projekt. Es besteht aus CSS-Klassen, die auf Elemente angewendet werden können, um sie einheitlich zu gestalten, und JavaScript-Code, der zusätzliche Verbesserungen durchführt.

Was ist JavaScript?

JavaScript ist eine Programmiersprache, die für die clientseitige Programmierung in Webanwendungen verwendet wird. JavaScript-Code wird vom Browser ausgeführt und ermöglicht es Webanwendungsprogrammierern, dynamische Webinhalte zu erstellen, z. B. Komponenten, die dynamisch ein- oder ausgeblendet werden, das Aussehen zu ändern und Benutzereingaben zu validieren.

Was ist JQuery?

JQuery ist eine schnelle, kleine und funktionsreiche JavaScript-Bibliothek, die Dinge wie das Durchlaufen von HTML-Dokumenten und die Manipulation, Ereignisbehandlung und Animation viel einfacher macht.

Auf die gesamte Leistungsfähigkeit von JQuery wird über JavaScript zugegriffen. Daher ist ein solides Verständnis von JavaScript unerlässlich, um Ihren Code zu verstehen, zu strukturieren und zu debuggen.

Für mehr Details:

HTML

JavaScript

JQuery

Bootstrap

Schritt 3: Ihre erste Seite mit HTML

SCHRITT1: Erstellen Sie einen neuen Ordner:

mkdir simple-todolist

SCHRITT2: Erstellen Sie eine neue Datei im Ordner simple-todolist und nennen Sie sie index.html.

cd simple-todolist

Berühren Sie index.html

SCHRITT3: Fügen Sie den folgenden Code zu index.html hinzu.

Aufgabenliste

Meine To-Do-Liste

SCHRITT 4: Öffnen Sie die index.html in Ihrem Browser.

Sie werden sehen, dass Meine To-Do-Liste angezeigt wird (siehe Foto oben).

Schritt 4: Bootstrap hinzufügen

In diesem Abschnitt werden wir Bootstrap-Unterstützung zu unserer index.html-Seite hinzufügen, um der To-Do-Listen-App ein schnelles und gutes Styling hinzuzufügen.

Hinweis: In dieser App verwenden wir Bootstrap 3, Sie verwenden jedes andere CSS-Framework, wie Semantic UI.

SCHRITT 1: Fügen Sie die Bootstrap-CSS-Datei zum Head-Tag hinzu:

SCHRITT2: Fügen Sie Bootstrap- und JQuery-CDN-Skriptdateien am Ende des Body-Tags hinzu:

SCHRITT 3: Öffnen Sie index.html in Ihrem Browser.

Herzlichen Glückwunsch, wir haben in wenigen Schritten erfolgreich Bootstrap-Unterstützung zu unserer Seite hinzugefügt.

Schritt 5: Vervollständigen Sie die Benutzeroberfläche

Nachdem wir unserer App erfolgreich Bootstrap-Unterstützung hinzugefügt haben. Lassen Sie uns nun fortfahren und die Benutzeroberfläche (Benutzeroberfläche) konkurrieren, damit der Benutzer neue Aufgaben hinzufügen kann. Die To-Do-Liste kann neue Elemente zu einer Liste hinzufügen und vorhandene Elemente entfernen.

SCHRITT1: Fügen Sie den folgenden Code zu index.html hinzu.

Neue Aufgabe hinzufügen Hinzufügen Alles löschen!

Meine Aufgabenliste

SCHRITT2: Öffnen Sie die Datei index.html in Ihrem Browser.

Schritt 6: Hinzufügen der Logik zur App

Wenn Sie einen Aufgabennamen eingeben und auf die Schaltfläche Hinzufügen klicken, passiert im Moment nichts. Lass uns das beheben.

Am Ende dieses Schrittes verwandeln wir unsere index.html in eine dynamische Seite, damit sie sich der Benutzerinteraktion verhält.

SCHRITT 1: Erstellen Sie einen neuen Ordner in simple-todolist, nennen Sie ihn js und eine neue Datei namens script.js in diesem Ordner:

mkdir js

cd js touch script.js

SCHRITT 2: Verknüpfen Sie script.js mit index.html, indem Sie den folgenden Code am Ende des Head-Tags hinzufügen:

SCHRITT3: Fügen Sie der Datei script.js den folgenden Code hinzu

$(Dokument).bereit(() => {

var Aufgaben = 0 $("#removeAll").hide(); /* neuen Task-Handler hinzufügen */ $("#add").on("click", (event) => { event.preventDefault(); event.stopPropagation(); var val = $("input"). val(); if(val !=="") { Aufgaben +=1; var elm =$("

• "); $("#mylist").append(elem); $("input").val(""); /* Eindeutigen Task-Handler entfernen */ $(".text-right").on(" clikc", function(event) { event.preventDefault(); event.stopPropagation(); Tasks -=1; $(this).parent.remove(); }); /* Schaltfläche removeAll anzeigen, wenn mehr als 3. vorhanden sind Tasks */ if(tasks > 2) { $("#remveAll").show(); } /* removeAll-Handler */ $("#removeAll").on("click", event => { event.preventDefault (); event.stopPropagation(); $(".disabled").siblings().remove(); Aufgaben = 0; $("#removeAll").hide(); }); } }); });

  Hinweis: Sie können die ZIP des Codes entweder aus meinem GitHub-Repository klonen oder herunterladen, dies erspart Ihnen das Tippen.

  Git-Klon github.com/ahmnouira/simple-todolist

  SCHRITT 4: Testen Sie den Code

  Öffnen Sie Ihren Browser und geben Sie eine Aufgabe ein, dann klicken Sie auf Hinzufügen. Sie sehen, dass eine neue Aufgabe zur Liste hinzugefügt wird. Wenn Sie 3 Aufgaben hinzufügen, werden Sie feststellen, dass eine Schaltfläche ClearAll angezeigt wird. Mit dieser Schaltfläche können wir alle hinzugefügten Aufgaben entfernen Sie können auch nur eine Aufgabe entfernen, indem Sie auf die Schaltfläche klicken.

  Schritt 7: (Optional) Bereitstellen der App

  

  Bisher haben wir eine einfache Aufgabenlisten-App erstellt, jetzt ist es an der Zeit, sie in der Cloud bereitzustellen und unsere Arbeit mit anderen auf der ganzen Welt zu teilen.

  Dazu verwenden wir die Cloud-Plattform ZEIT Now.

  Was ist ZEIT jetzt?

  ZEIt Now ist eine Cloud-Plattform für statische Sites und Serverless Functions. Sie ermöglicht es Entwicklern, Websites und Webdienste zu hosten, die sofort bereitgestellt werden, und dies alles ohne Konfiguration.

  1. Jetzt installieren CLI

  Um mit ZEIT Now bereitzustellen, müssen Sie Now CLI installieren.

  Wichtig: Stellen Sie sicher, dass npm installiert ist.

  npm -v # Überprüfen Sie, ob die npm-Installation

  npm install -g now@latest # installiere die letzte Version von Now CLI jetzt global -v # check ob die Now CLI installiert ist und drucke sie aus

  2. Bereitstellen

  Alles, was Sie tun müssen, ist, in das Verzeichnis zu wechseln und dann Ihre App mit einem einzigen Befehl bereitzustellen:

  jetzt --prod # die App bereitstellen

  Nach der Bereitstellung erhalten Sie eine Vorschau-URL, die bei jeder Bereitstellung zugewiesen wird, um die neuesten Änderungen unter der Adresse freizugeben.

  meine App:

  Schritt 8: Fazit

  Das ist alles dazu !

  Fühlen Sie sich frei, den Code zu erkunden, indem Sie neue Funktionen festlegen und die App erweitern, und teilen Sie Ihre Erfahrungen und Fragen im Kommentarbereich.

  Um mehr von meinen Arbeiten zu sehen, besuchen Sie bitte meine Open Source auf GitHub.

  meinYouTube.

  myLinkedIn

  Vielen Dank, dass Sie eine Zeit haben, mein instructable ^^ zu lesen.

  Einen schönen Tag noch.

  Ahmed Nouira