Distribuera din första att-göra-lista: 8 steg
Distribuera din första att-göra-lista: 8 steg

Innehållsförteckning:

Anonim
Distribuera din första att-göra-lista-applikation
Distribuera din första att-göra-lista-applikation

Om du är helt ny på kodning eller har bakgrundskodning kanske du undrar var du ska börja lära dig. Du måste lära dig hur, vad, var du ska koda och sedan, när koden är klar, hur du distribuerar den för hela att se.

Tja, den goda nyheten är att kodning inte är svårt.

Målgrupp: Denna handledning är avsedd för nybörjare som vill börja en karriär inom webbutveckling, har förståelse för webbteknik i allmänhet.

Byggtid: 90 minuter.

Svårighet: Lätt.

Steg 1: Vad ska vi bygga?

I slutet av denna handledning kommer vi att:

  • Skapa en enkel att göra-lista webbapplikation med HTML5.
  • Integrera Bootstrap med vår app för att lägga till snygg och snabb styling.
  • Använd JavaScript och JQuery -biblioteket för att lägga till dynamiskt beteende i vår applikation.
  • Distribuera vår applikation i molnet med Ziet/nu.

I aktion:

Steg 2: Introduktion till HTML, Bootstrap, JavaScript och JQuery

Vad är HTML?

Hyper Text Markup Language (HTML) kan ses som "internetets språk". HTML är standardmarkeringsspråket som används för att skapa webbsidor. Det var ursprungligen utformat för att dela vetenskapliga dokument. Anpassningar till HTML genom åren gjorde det lämpligt att beskriva flera andra typer av dokument som kan visas som webbsidor på internet.

Det enda kravet som krävs för att visa en HTML -sida är en webbläsare, till exempel Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome eller Apple Safari.

Vad är Bootstrap?

Bootstrap är det mest populära HTML-, CSS- och JavaScript -ramverket för att bygga responsiva, mobila första webbplatser. Bootstrap är ett projekt med öppen källkod som utvecklats av Twitter. den består av CSS -klasser som kan tillämpas på element för att styla dem konsekvent och JavaScript -kod som utför ytterligare förbättring.

Vad är JavaScript?

JavaScript är ett programmeringsspråk som används för programmering på klientsidan i webbapplikationer. JavaScript -koden körs av webbläsaren och gör det möjligt för webbapplikationsprogrammerare att bygga dynamiskt webbinnehåll, till exempel komponenter som visar eller döljs dynamiskt, ändrar utseende och validerar användarinmatning.

Vad är JQuery?

JQuery är ett snabbt, litet och funktionsrikt JavaScript-bibliotek, det gör saker som HTML-dokumentöverföring och manipulation, händelsehantering, animering mycket enklare.

All kraft i JQuery nås via JavaScript, så att ha ett starkt grepp om JavaScript är viktigt för att förstå, strukturera och felsöka din kod.

För mer detaljer:

HTML

JavaScript

JQuery

Bootstrap

Steg 3: Din första sida med HTML

Din första sida med HTML
Din första sida med HTML

STEG1: skapa en ny mapp:

mkdir enkel-todolist

STEG2: skapa en ny fil i den enkla todolistmappen och namnge den index.html.

cd enkel-todolist

tryck på index.html

STEG3: lägg till följande kod i index.html.

Att göra lista

Min att göra-lista

STEG4: Öppna index.html i din webbläsare.

Du kommer att se Min att-göra-lista visas (se bilden ovan).

Steg 4: Lägga till Bootstrap

Lägger till Bootstrap
Lägger till Bootstrap

I det här avsnittet kommer vi att lägga till Bootstrap-stöd på vår index.html-sida, för att lägga till snabb och bra styling till To-Do List-appen.

Observera: I den här appen kommer vi att använda Bootstrap 3, du använder alla andra CSS -ramar, som Semantic UI.

STEG1: lägg till Bootstrap CSS -fil i huvudtaggen:

STEG2: lägg till Bootstrap och JQuery CDN -skriptfiler i slutet av brödtaggen:

STEG3: Öppna index.html i din webbläsare.

Grattis, vi har framgångsrikt lagt till Bootstrap -support på vår sida i några steg.

Steg 5: Slutför UI

Slutför UI
Slutför UI

Efter att vi framgångsrikt har lagt till Bootstrap -stöd i vår app. Låt oss nu fortsätta och tävla UI (User Interface) för att låta användaren lägga till nya uppgifter. Att-göra-listan kommer att kunna lägga till nya objekt i en lista, samt ta bort befintliga objekt.

STEG 1: lägg till följande kod i index.html.

Lägg till ny uppgift Lägg till Rensa allt!

Min uppgiftslista

STEG2: öppna filen index.html i din webbläsare.

Steg 6: Lägga till logiken i appen

Lägga till logiken i appen
Lägga till logiken i appen

När du anger ett uppgiftsnamn och klickar på knappen Lägg till händer ingenting för tillfället. Låt oss fixa det.

I slutet av det här steget kommer vi att göra vårt index.html till en dynamisk sida, så den kommer att bete sig som användarinteraktion.

STEG1: skapa en ny mapp i simple-todolist, namnge den js och ett nytt filnamn den script.js inuti den mappen:

mkdir js

cd js touch script.js

STEG2: länka script.js till index.html genom att lägga till följande kod i slutet av huvudtaggen:

STEG3: lägg till följande kod i script.js -filen

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

var uppgifter = 0 $ ("#removeAll"). hide (); / * lägg till ny aktivitetshanterare */ $ ("#add"). on ("click", (event) => {event.preventDefault (); event.stopPropagation (); var val = $ ("input"). val (); if (val! == "") {uppgifter += 1; var elm = $ ("

  • "); $ ("#mylist "). append (elem); $ (" input "). val (" "); / * ta bort unik uppgiftshanterare * / $ (". text-right "). on (" clikc ", function (event) {event.preventDefault (); event.stopPropagation (); uppgifter -= 1; $ (detta).parent.remove ();}); /* visa removeAll -knappen när vi har fler än 3 uppgifter */ if (uppgifter> 2) {$ ("#remveAll"). show ();}/ *removeAll handler */ $ ("#removeAll"). on ("click", event => {event.preventDefault (); event.stopPropagation (); $ (". inaktiverad"). syskon (). remove (); tasks = 0; $ ("#removeAll"). hide ();});}});});

    Obs: Du kan antingen få klona eller ladda ner ZIP -koden från mitt GitHub -arkiv, detta kan spara dig från att knacka.

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

    STEG4: testa koden

    Öppna din webbläsare och ange en uppgift, klicka sedan på Lägg till, du kommer att se en ny uppgift läggs till i listan, om du lägger till tre uppgifter kommer du att märka att en clearAll -knapp visas, med den här knappen kan vi ta bort alla tillagda uppgifter, du kan också ta bort bara en uppgiftsköp genom att klicka på dess knapp.

    Steg 7: (Valfritt) Distribuera appen

    Hittills har vi byggt en enkel todo list -app, nu är det dags att distribuera den i molnet och dela vårt arbete med andra runt om i världen.

    För att uppnå detta kommer vi att använda molnplattform som heter ZEIT Now.

    Vad är ZEIT nu?

    ZEIt Now är en molnplattform för statiska webbplatser och serverlösa funktioner, det gör det möjligt för utvecklare att vara värd för webbplatser och webbtjänster som distribuerar direkt, allt detta med noll konfiguration.

    1. Installera Now CLI

    För att distribuera med ZEIT Now måste du installera Now CLI.

    viktigt: Se till att du har npm installerat.

    npm -v # kontrollera om npm -installationen

    npm installera -g nu@senaste # installera den senaste versionen av Now CLI globalt nu -v # chech om Now CLI är installerat och skriv ut versionen

    2. Distribuera

    Allt du behöver göra är att gå in i katalogen och sedan distribuera din app med ett enda kommando:

    nu --prod # distribuera appen

    När den väl har distribuerats får du en förhandsgransknings -URL som tilldelas varje distribution för att dela de senaste ändringarna under adressen.

    min app:

    Steg 8: Slutsats

    Det är allt som finns!

    Utforska gärna koden genom att ställa in nya funktioner och utöka appen och dela dina erfarenheter och frågor i kommentarsfältet.

    För att se mer av mina verk, besök min öppna källa på GitHub.

    myYouTube.

    myLinkedIn

    Tack för att du har tid att läsa min instruerbara ^^.

    Ha en bra dag.

    Ahmed Nouira