Distribuer din første gjøremålsliste: 8 trinn

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:22

Hvis du er helt ny på koding eller har bakgrunnskoding, lurer du kanskje på hvor du skal begynne å lære. Du må lære hvordan, hva, hvor du skal kode og deretter, når koden er klar, hvordan du distribuerer den for hele å se.

Den gode nyheten er at koding ikke er vanskelig.

Målgruppe: Denne opplæringen er beregnet for nybegynnere som ønsker å starte en karriere innen webutvikling, har forståelse for webteknologi generelt.

Byggetid: 90 minutter.

Vanskelighetsgrad: Lett.

Trinn 1: Hva skal vi bygge?

På slutten av denne opplæringen vil vi:

• Lag en enkel huskeliste-applikasjon med HTML5.
• Integrer Bootstrap med appen vår for å legge til flott og rask styling.
• Bruk JavaScript og JQuery -biblioteket for å legge til dynamisk oppførsel i programmet vårt.
• Distribuer applikasjonen vår i skyen ved hjelp av Ziet/now.

I aksjon:

Trinn 2: Introduksjon til HTML, Bootstrap, JavaScript og JQuery

Hva er HTML?

Hyper Text Markup Language (HTML) kan betraktes som "internettets språk". HTML er standard kodespråk som brukes til å lage websider. Den ble opprinnelig designet for å dele vitenskapelige dokumenter. Tilpasninger til HTML gjennom årene gjorde det egnet å beskrive flere andre typer dokumenter som kan vises som nettsider på internett.

Det eneste kravet som trengs for å vise en HTML -side er en nettleser, for eksempel Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome eller Apple Safari.

Hva er Bootstrap?

Bootstrap er det mest populære HTML-, CSS- og JavaScript -rammeverket for å bygge responsive, mobile første nettsteder. Bootstrap er et åpen kildekode -prosjekt utviklet av Twitter. den består av CSS -klasser som kan brukes på elementer for å style dem konsekvent og JavaScript -kode som utfører ytterligere forbedring.

Hva er JavaScript?

JavaScript er et programmeringsspråk som brukes til programmering på klientsiden i webapplikasjoner. JavaScript -kode kjøres av nettleseren og lar programmerere for webprogrammer bygge dynamisk webinnhold, for eksempel komponenter som viser eller er skjult dynamisk, endrer utseende og validerer brukerinngang.

Hva er JQuery?

JQuery er et raskt, lite og funksjonsrikt JavaScript-bibliotek, det gjør ting som HTML-dokumentoverføring og manipulering, hendelseshåndtering og animasjon mye enklere.

All kraft i JQuery er tilgjengelig via JavaScript, så det å ha en sterk forståelse av JavaScript er avgjørende for å forstå, strukturere og feilsøke koden din.

For flere detaljer:

HTML

JavaScript

JQuery

Støvelhempe

Trinn 3: Din første side med HTML

TRINN 1: opprett en ny mappe:

mkdir simple-todolist

TRINN 2: lag en ny fil inne i mappen som er enkel å bruke, og navngi den index.html.

cd simple-todolist

trykk på index.html

TRINN 3: legg til følgende kode i index.html.

Gjøremålsliste

Min huskeliste

TRINN 4: Åpne index.html i nettleseren din.

Du vil se Min gjøremålsliste vises (se bildet ovenfor).

Trinn 4: Legge til Bootstrap

I denne delen vil vi legge til Bootstrap-støtte på vår index.html-side for å legge til rask og god styling i gjøremålslisten.

Merk: I denne appen bruker vi Bootstrap 3, du bruker andre CSS -rammer, som Semantic UI.

TRINN 1: legg til Bootstrap CSS -fil i overskriften:

TRINN 2: legg til Bootstrap og JQuery CDN -skriptfiler på slutten av brødteksten:

TRINN 3: Åpne index.html i nettleseren din.

Gratulerer, vi har lagt til Bootstrap -støtte på siden vår med få trinn.

Trinn 5: Fullfør brukergrensesnittet

Etter at vi har lagt til Bootstrap -støtte i appen vår. La oss nå fortsette og konkurrere i brukergrensesnittet (brukergrensesnitt) for å la brukeren legge til nye oppgaver. Gjøremål-listen vil kunne legge til nye elementer i en liste, samt fjerne eksisterende elementer.

TRINN 1: legg til følgende kode i index.html.

Legg til ny oppgave Legg til Fjern alle!

Min oppgaveliste

TRINN 2: åpne index.html -filen i nettleseren din.

Trinn 6: Legge til logikken i appen

Når du skriver inn et oppgavenavn og klikker på Legg til -knappen, skjer det ingenting for øyeblikket. La oss fikse det.

Ved slutten av dette trinnet vil vi gjøre index.html til en dynamisk side, så den oppfører seg som brukerinteraksjon.

TRINN 1: opprett en ny mappe i simple-todolist, gi den navnet js og et nytt filnavn den script.js i den mappen:

mkdir js

cd js touch script.js

TRINN2: koble script.js til index.html ved å legge til følgende kode på slutten av overskriften:

TRINN 3: legg til følgende kode i script.js -filen

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

var oppgaver = 0 $ ("#removeAll"). hide (); / * legg til ny oppgavebehandler */ $ ("#add"). on ("click", (event) => {event.preventDefault (); event.stopPropagation (); var val = $ ("input"). val (); if (val! == "") {oppgaver += 1; var elm = $ ("

• "); $ ("#mylist "). append (elem); $ (" input "). val (" "); / * remove unique task handler * / $ (". text-right "). on (" clikc ", function (hendelse) {event.preventDefault (); event.stopPropagation (); oppgaver -= 1; $ (dette).parent.remove ();}); /* vis removeAll -knapp når vi har mer enn 3 oppgaver */ if (oppgaver> 2) {$ ("#remveAll"). show ();}/ *removeAll handler */ $ ("#removeAll"). on ("click", event => {event.preventDefault (); event.stopPropagation (); $ (". deaktivert"). søsken (). remove (); task = 0; $ ("#removeAll"). hide ();});}});});

  Merk: Du kan enten klone eller laste ned ZIP -koden fra GitHub -depotet, dette sparer deg for å trykke.

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

  TRINN 4: test koden

  Åpne nettleseren din og skriv inn en oppgave, klikk deretter på Legg til. Du vil se at en ny oppgave blir lagt til i listen. Hvis du legger til 3 oppgaver, vil du legge merke til at en klar -knapp vises, denne knappen lar oss fjerne alle de oppgavene som er lagt til, du kan også fjerne bare en oppgavekjøp ved å klikke på knappen.

  Trinn 7: (Valgfritt) Distribuer appen

  

  Så langt har vi bygget en enkel todo list -app, nå er det på tide å distribuere den i skyen og dele arbeidet vårt med andre rundt om i verden.

  For å oppnå dette vil vi bruke skyplattformen ZEIT Now.

  Hva er ZEIT nå?

  ZEIt Now er en skyplattform for statiske nettsteder og serverløse funksjoner, det gjør det mulig for utviklere å være vert for nettsteder og webtjenester som distribuerer umiddelbart, alt dette med null konfigurasjon.

  1. Installer nå CLI

  For å distribuere med ZEIT Now må du installere Now CLI.

  viktig: Sørg for at du har npm installert.

  npm -v # sjekk om npm er installert

  npm install -g nå@siste # installer den siste versjonen av Now CLI globalt nå -v # chech hvis Now CLI er installert og skriv den ut

  2. Distribuer

  Alt du trenger å gjøre er å flytte inn i katalogen og deretter distribuere appen din med en enkelt kommando:

  nå --prod # distribuer appen

  Når den er implementert, får du en forhåndsvisningsadresse som er tilordnet for hver distribusjon for å dele de siste endringene under adressen.

  appen min:

  Trinn 8: Konklusjon

  Det er alt det er!

  Utforsk gjerne koden ved å angi nye funksjoner og utvide appen, og dele din erfaring og spørsmål i kommentarfeltet.

  For å se mer av verkene mine, vennligst besøk min åpne kilde på GitHub.

  myYouTube.

  myLinkedIn

  Takk for at du har tid til å lese min instruktive ^^.

  Ha en fin dag.

  Ahmed Nouira