Implementér din første opgaveliste-applikation: 8 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:27

Hvis du er helt ny inden for kodning eller har baggrundskodning, undrer du dig måske over, hvor du skal begynde at lære. Du skal lære, hvordan, hvad, hvor du skal kode, og derefter, når koden er klar, hvordan du implementerer den for hele at se.

Den gode nyhed er, at kodning ikke er svært.

Målgruppe: Denne vejledning er beregnet til begyndere, der ønsker at starte en karriere inden for webudvikling, har forståelse for webteknologier generelt.

Byggetid: 90 minutter.

Vanskelighed: Let.

Trin 1: Hvad vil vi bygge?

I slutningen af denne vejledning vil vi:

• Opret en simpel opgaveliste-webapplikation ved hjælp af HTML5.
• Integrer Bootstrap med vores app for at tilføje flot og hurtig styling.
• Brug JavaScript og JQuery -biblioteket til at tilføje dynamisk adfærd til vores applikation.
• Distribuer vores applikation i skyen ved hjælp af Ziet/nu.

I aktion:

Trin 2: Introduktion til HTML, Bootstrap, JavaScript og JQuery

Hvad er HTML?

Hyper Text Markup Language (HTML) kan betragtes som "internettets sprog". HTML er standardmarkupsproget, der bruges til at oprette websider. Det var oprindeligt designet til at dele videnskabelige dokumenter. Tilpasninger til HTML gennem årene gjorde det velegnet til at beskrive flere andre typer dokumenter, der kan vises som websider på internettet.

Det eneste krav, der er nødvendigt for at få vist en HTML -side, er en webbrowser, f.eks. Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome eller Apple Safari.

Hvad er Bootstrap?

Bootstrap er den mest populære HTML-, CSS- og JavaScript -ramme til opbygning af responsive, mobile første websteder. Bootstrap er et open source -projekt udviklet af Twitter. den består af CSS -klasser, der kan anvendes på elementer for at style dem konsekvent og JavaScript -kode, der udfører yderligere forbedring.

Hvad er JavaScript?

JavaScript er et programmeringssprog, der bruges til programmering på klientsiden i webapplikationer. JavaScript -kode køres af browseren og tillader webapplikationsprogrammerere at opbygge dynamisk webindhold, f.eks. Komponenter, der viser eller er skjult dynamisk, ændrer udseende og validerer brugerinput.

Hvad er JQuery?

JQuery er et hurtigt, lille og funktionsrigt JavaScript-bibliotek, det gør ting som HTML-dokumentoverskridelse og manipulation, begivenhedshåndtering og animation meget enklere.

Al JQuerys magt er tilgængelig via JavaScript, så det er vigtigt at have en stærk forståelse af JavaScript for at forstå, strukturere og fejlfinde din kode.

For flere detaljer:

HTML

JavaScript

JQuery

Bootstrap

Trin 3: Din første side med HTML

TRIN1: Opret en ny mappe:

mkdir simple-todolist

TRIN2: Opret en ny fil inde i mappen, der er let at håndtere, og navngiv den index.html.

cd simple-todolist

tryk på index.html

TRIN3: tilføj følgende kode til index.html.

Opgaveliste

Min huskeliste

TRIN4: Åbn index.html i din browser.

Du vil se Min opgaveliste vises (se billedet ovenfor).

Trin 4: Tilføjelse af Bootstrap

I dette afsnit tilføjer vi Bootstrap-understøttelse til vores index.html-side for at tilføje hurtig og god styling til To-Do List-appen.

Bemærk: I denne app vil vi bruge Bootstrap 3, du bruger enhver anden CSS -ramme, som Semantic UI.

TRIN1: tilføj Bootstrap CSS -fil i head -tagget:

TRIN2: tilføj Bootstrap og JQuery CDN -scriptfiler i slutningen af brødteksten:

TRIN3: Åbn index.html i din browser.

Tillykke, vi tilføjede med succes Bootstrap -support til vores side i få trin.

Trin 5: Fuldfør brugergrænsefladen

Efter at vi med succes har tilføjet Bootstrap -understøttelse til vores app. Lad os nu fortsætte og konkurrere UI (brugergrænseflade) for at lade brugeren tilføje nye opgaver. To-Do-listen vil kunne tilføje nye elementer til en liste samt fjerne eksisterende elementer.

TRIN1: tilføj følgende kode til index.html.

Tilføj ny opgave Tilføj Ryd alt!

Min opgaveliste

TRIN2: Åbn filen index.html i din browser.

Trin 6: Tilføjelse af logikken til appen

Når du indtaster et opgavens navn og klikker på knappen Tilføj, sker der ikke noget i øjeblikket. Lad os ordne det.

Ved afslutningen af dette trin vil vi gøre vores index.html til en dynamisk side, så den vil opføre sig som brugerinteraktion.

TRIN1: Opret en ny mappe i simple-todolist, navngiv den js og et nyt filnavn den script.js inde i den mappe:

mkdir js

cd js touch script.js

TRIN2: link script.js til index.html ved at tilføje følgende kode i slutningen af head -tagget:

TRIN3: tilføj følgende kode til script.js -filen

$ (dokument).ready (() => {

var opgaver = 0 $ ("#removeAll"). hide (); / * tilføj ny task handler */ $ ("#add"). on ("click", (event) => {event.preventDefault (); event.stopPropagation (); var val = $ ("input"). val (); hvis (val! == "") {opgaver += 1; var elm = $ ("

• "); $ ("#mylist "). append (elem); $ (" input "). val (" "); / * fjern unik opgavehåndterer * / $ (". text-right "). on (" klik ", funktion (begivenhed) {event.preventDefault (); event.stopPropagation (); opgaver -= 1; $ (dette).parent.remove ();}); /* vis knappen removeAll, når vi har mere end 3 opgaver */ if (opgaver> 2) {$ ("#remveAll"). show ();}/ *removeAll handler */ $ ("#removeAll"). on ("click", event => {event.preventDefault (); event.stopPropagation (); $ (". deaktiveret"). søskende (). remove (); task = 0; $ ("#removeAll"). hide ();});}});});

  Bemærk: Du kan enten få klon eller downloade ZIP -koden fra mit GitHub -lager, dette sparer dig godt for at trykke.

  git-klon github.com/ahmnouira/simple-todolist

  TRIN4: test koden

  Åbn din browser, og indtast en opgave, klik derefter på Tilføj, du vil se en ny opgave tilføjes til listen, hvis du tilføjer 3 opgaver, vil du bemærke, at der vises en clearAll -knap, denne knap giver os mulighed for at fjerne alle de tilføjede opgaver, du kan også kun fjerne en opgave køb ved at klikke på dens knap.

  Trin 7: (Valgfrit) Distribuer appen

  

  Indtil videre har vi bygget en simpel todo list -app, nu er det tid til at implementere den i skyen og dele vores arbejde med andre rundt om i verden.

  For at opnå dette vil vi bruge cloud -platform kaldet ZEIT Now.

  Hvad er ZEIT Now?

  ZEIt Now er en skyplatform til statiske websteder og serverløse funktioner, det gør det muligt for udviklere at hoste websteder og webtjenester, der implementerer øjeblikkeligt, alt dette med nul konfiguration.

  1. Installer Now CLI

  For at installere med ZEIT Now skal du installere Now CLI.

  vigtigt: Sørg for at have npm installeret.

  npm -v # tjek, om npm -installationen

  npm installer -g nu@seneste # installer den sidste version af Nu CLI globalt nu -v # chech, hvis Nu CLI er installeret, og udskriv den version

  2. Distribuer

  Alt du skal gøre er at flytte ind i biblioteket og derefter implementere din app med en enkelt kommando:

  nu --prod # implementer appen

  Når den er implementeret, får du en preview -URL, der er tildelt på hver distribution til at dele de seneste ændringer under adressen.

  min app:

  Trin 8: Konklusion

  Det er alt, hvad der skal til!

  Du er velkommen til at udforske koden ved at indstille nye funktioner og udvide appen og dele din oplevelse og spørgsmål i kommentarfeltet.

  Besøg min open source på GitHub for at se flere af mine værker.

  myYouTube.

  myLinkedIn

  Tak fordi du havde tid til at læse min instruerbare ^^.

  Hav en god dag.

  Ahmed Nouira