Primijenite svoju prvu aplikaciju liste obaveza: 8 koraka

2024 Autor: John Day | [email protected]. Zadnja izmjena: 2024-01-30 08:05

Ako ste tek počeli kodirati ili imate pozadinsko kodiranje, možda se pitate odakle započeti učenje. Morate naučiti kako, šta, gdje kodirati, a zatim, nakon što je kôd spreman, kako ga rasporediti kako bi ga vidjeli cijeli.

Pa, dobra vijest je da kodiranje nije teško.

Ciljna publika: Ovaj vodič je namijenjen početnicima koji žele započeti karijeru u web razvoju, razumiju web tehnologije općenito.

Vrijeme izrade: 90 minuta.

Teškoća: Lako.

Korak 1: Šta ćemo izgraditi?

Do kraja ovog vodiča ćemo:

• Kreirajte jednostavnu web aplikaciju sa spiskom obaveza pomoću HTML5.
• Integrirajte Bootstrap s našom aplikacijom za dodavanje lijepog izgleda i brzog oblikovanja.
• Koristite JavaScript i JQuery biblioteku da biste dodali dinamičko ponašanje našoj aplikaciji.
• Postavite našu aplikaciju u oblak koristeći Ziet/now.

Na djelu:

Korak 2: Uvod u HTML, Bootstrap, JavaScript i JQuery

Šta je HTML?

Jezik označavanja hiperteksta (HTML) može se smatrati "jezikom interneta". HTML je standardni jezik za označavanje koji se koristi za kreiranje web stranica. Prvobitno je dizajniran za razmjenu naučnih dokumenata. Adaptacije HTML -a godinama su učinile pogodnim opisivanje nekoliko drugih vrsta dokumenata koji se mogu prikazati kao web stranice na internetu.

Jedini uvjet koji je potreban za prikaz HTML stranice je web preglednik, kao što su Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome ili Apple Safari.

Šta je Bootstrap?

Bootstrap je najpopularniji HTML, CSS i JavaScript okvir za izgradnju responzivnih, mobilnih prvih web stranica. Bootstrap je projekat otvorenog koda koji je razvio Twitter. sastoji se od CSS klasa koje se mogu primijeniti na elemente za njihovo dosljedno oblikovanje i JavaScript koda koji vrši dodatno poboljšanje.

Šta je JavaScript?

JavaScript je programski jezik koji se koristi za programiranje na strani klijenta u web aplikacijama. JavaScript kôd pokreće preglednik i omogućuje programerima web aplikacija izgradnju dinamičkog web sadržaja, poput komponenti koje prikazuju ili su skrivene dinamički, mijenjaju izgled i potvrđuju unos korisnika.

Šta je JQuery?

JQuery je brza, mala i JavaScript biblioteka bogata značajkama, koja pojednostavljuje stvari poput prelaska HTML dokumenata i manipulacije, rukovanja događajima i animacije.

Svim moćima JQuery -a pristupa se putem JavaScript -a, pa je dobro poznavanje JavaScript -a neophodno za razumijevanje, strukturiranje i otklanjanje grešaka u vašem kodu.

Za više detalja:

HTML

JavaScript

JQuery

Bootstrap

Korak 3: Vaša prva stranica s HTML -om

KORAK 1: kreirajte novu fasciklu:

mkdir simple-todolist

KORAK 2: kreirajte novu datoteku unutar foldera simple-todolist i dajte joj ime index.html.

cd simple-todolist

dodirnite index.html

KORAK 3: Dodajte sljedeći kod u index.html.

Lista obaveza

Moja lista obaveza

KORAK 4: Otvorite index.html u svom pregledniku.

Vidjet ćete da se prikazuje Moja lista obaveza (pogledajte gornju fotografiju).

Korak 4: Dodavanje Bootstrapa

U ovom ćemo odjeljku dodati stranicu Bootstrap na našu stranicu index.html kako bismo dodali brz i dobar stil aplikaciji Lista zadataka.

Napomena: U ovoj aplikaciji koristit ćemo Bootstrap 3, vi koristite bilo koji drugi CSS okvir, poput semantičkog korisničkog sučelja.

KORAK 1: Dodajte Bootstrap CSS datoteku u oznaku head:

KORAK 2: dodajte datoteke skripti Bootstrapa i JQuery CDN na kraj oznake tijela:

KORAK 3: Otvorite index.html u svom pregledniku.

Čestitamo, uspješno smo dodali Bootstrap podršku na našu stranicu u nekoliko koraka.

Korak 5: Dovršite korisničko sučelje

Nakon što smo uspješno dodali podršku za Bootstrap našoj aplikaciji. Sada idemo dalje i natjecajmo se u korisničkom sučelju (korisničkom sučelju) kako bismo omogućili korisniku dodavanje novih zadataka. Lista zadataka će moći dodavati nove stavke na listu, kao i uklanjati postojeće.

KORAK 1: dodajte sljedeći kod u index.html.

Dodaj novi zadatak Dodaj Obriši sve!

Moja lista zadataka

KORAK 2: otvorite datoteku index.html u svom pregledniku.

Korak 6: Dodavanje logike u aplikaciju

Kada unesete naziv zadatka i kliknete na gumb Dodaj, trenutno se ništa ne događa. Popravimo to.

Do kraja ovog koraka pretvorit ćemo naš index.html u dinamičku stranicu, tako da će se ponašati prema interakciji korisnika.

KORAK 1: stvorite novu mapu unutar simple-todolista, dajte joj ime js i novu datoteku po imenu script.js unutar te mape:

mkdir js

cd js touch script.js

KORAK 2: povežite script.js s index.html dodavanjem sljedećeg koda na kraj oznake head:

KORAK 3: Dodajte sljedeći kod u datoteku script.js

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

var tasks = 0 $ ("#removeAll"). hide (); / * dodaj novi rukovatelj zadacima */ $ ("#add"). on ("click", (event) => {event.preventDefault (); event.stopPropagation (); var val = $ ("input"). val (); if (val! == "") {zadaci += 1; var elm = $ ("

• "); $ ("#mylist "). append (elem); $ (" input "). val (" "); / * uklonite jedinstveni rukovatelj zadacima * / $ (". text-right "). on (" clikc ", function (event) {event.preventDefault (); event.stopPropagation (); zadaci -= 1; $ (ovo).parent.remove ();}); /* prikaži dugme RemoveAll kada imamo više od 3 zadaci */ if (zadaci> 2) {$ ("#remveAll"). show ();}/ *removeAll handler */ $ ("#removeAll"). on ("klik", događaj => {event.preventDefault (); event.stopPropagation (); $ (". disabled"). siblings (). remove (); tasks = 0; $ ("#removeAll"). hide ();});}});});

  Napomena: Možete dobiti ili kloniranje ili preuzimanje ZIP koda iz mog GitHub spremišta, što će vas spasiti od dodirivanja.

  git clone github.com/ahmnouira/simple-todolist

  KORAK 4: testirajte kôd

  Otvorite svoj preglednik i unesite zadatak, a zatim kliknite Dodaj, vidjet ćete da je novi zadatak dodan na popis, ako dodate 3 zadatka primijetit ćete da se pojavljuje gumb ClearAll, ovo nam dugme omogućuje uklanjanje svih dodanih zadataka, vi takođe možete ukloniti samo jedan zadatak kupujući klikom na njegovo dugme.

  Korak 7: (Opcionalno) Implementirajte aplikaciju

  

  Do sada smo izgradili jednostavnu aplikaciju za popis zadataka, sada je vrijeme da je postavite u oblak i podijelite svoj rad s drugima širom svijeta.

  Da bismo to postigli, koristit ćemo cloud platformu pod nazivom ZEIT Now.

  Šta je ZEIT sada?

  ZEIt Now je oblačna platforma za statičke web stranice i funkcije bez poslužitelja, a omogućuje programerima da ugoste web stranice i web usluge koje se trenutno primjenjuju, a sve to s nultom konfiguracijom.

  1. Instalirajte sada CLI

  Za implementaciju sa ZEIT Now, morate instalirati Now CLI.

  važno: Uverite se da imate instaliran npm.

  npm -v # proverite da li je npm instaliran

  npm install -g now@latest # instalirajte posljednju verziju Now CLI -a globalno sada -v # chech ako je Now CLI instaliran i ispišite verziju

  2. Rasporedite

  Sve što trebate učiniti je premjestiti se u direktorij, a zatim primijeniti aplikaciju s jednom naredbom:

  sada --prod # implementirajte aplikaciju

  Nakon implementacije, dobit ćete URL za pregled koji je dodijeljen svakoj implementaciji za dijeljenje najnovijih promjena pod adresom.

  moja aplikacija:

  Korak 8: Zaključak

  To je sve!

  Slobodno istražite kôd postavljanjem novih funkcija i proširivanjem aplikacije te podijelite svoje iskustvo i pitanja u području za komentare.

  Da biste vidjeli više mojih radova, posjetite moj otvoreni izvor na GitHub -u.

  myYouTube.

  myLinkedIn

  Hvala vam što ste imali vremena da pročitate uputstva ^^.

  Želim vam ugodan dan.

  Ahmed Nouira