Uw eerste takenlijsttoepassing implementeren: 8 stappen

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:16

Als je helemaal nieuw bent in coderen of wat achtergrondcodering hebt, vraag je je misschien af waar je moet beginnen met leren. Je moet leren hoe, wat, waar te coderen en dan, als de code klaar is, hoe je deze moet implementeren zodat het geheel kan zien.

Het goede nieuws is dat coderen niet moeilijk is.

Doelgroep: Deze tutorial is bedoeld voor beginners die een carrière in webontwikkeling willen beginnen, kennis hebben van webtechnologieën in het algemeen.

Bouwtijd: 90 minuten.

Moeilijkheidsgraad: gemakkelijk.

Stap 1: Wat gaan we bouwen?

Aan het einde van deze tutorial zullen we:

• Maak een eenvoudige To-Do List-webtoepassing met HTML5.
• Integreer Bootstrap met onze app om een mooie en snelle styling toe te voegen.
• Gebruik de JavaScript- en JQuery-bibliotheek om dynamisch gedrag aan onze applicatie toe te voegen.
• Implementeer onze applicatie in de cloud met Ziet/now.

In actie:

Stap 2: Inleiding tot HTML, Bootstrap, JavaScript en JQuery

Wat is HTML?

Hyper Text Markup Language (HTML) kan worden gezien als "de taal van het internet". HTML is de standaard opmaaktaal die wordt gebruikt om webpagina's te maken. Het was oorspronkelijk ontworpen voor het delen van wetenschappelijke documenten. Aanpassingen aan HTML door de jaren heen maakten het geschikt om verschillende andere soorten documenten te beschrijven die als webpagina's op internet kunnen worden weergegeven.

De enige vereiste die nodig is om een HTML-pagina weer te geven, is een webbrowser, zoals Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome of Apple Safari.

Wat is Bootstrap?

Bootstrap is het meest populaire HTML-, CSS- en JavaScript-framework voor het bouwen van responsieve, mobile first-websites. Bootstrap is een open source-project ontwikkeld door Twitter. het bestaat uit CSS-klassen die kunnen worden toegepast op elementen om ze consistent te stylen en JavaScript-code die extra verbeteringen uitvoert.

Wat is JavaScript?

JavaScript is een programmeertaal die wordt gebruikt voor client-side programmering in webapplicaties. JavaScript-code wordt uitgevoerd door de browser en stelt programmeurs van webtoepassingen in staat om dynamische webinhoud te bouwen, zoals componenten die dynamisch worden weergegeven of verborgen, het uiterlijk veranderen en gebruikersinvoer valideren.

Wat is JQuery?

JQuery is een snelle, kleine en veelzijdige JavaScript-bibliotheek, het maakt zaken als het doorlopen van HTML-documenten en manipulatie, het afhandelen van gebeurtenissen en animatie veel eenvoudiger.

Alle kracht van JQuery is toegankelijk via JavaScript, dus een goed begrip van JavaScript is essentieel voor het begrijpen, structureren en debuggen van uw code.

Voor meer details:

HTML

JavaScript

JQuery

Bootstrap

Stap 3: Uw eerste pagina met HTML

STAP1: maak een nieuwe map aan:

mkdir simple-todolist

STAP2: maak een nieuw bestand aan in de map simple-todolist en noem het index.html.

cd eenvoudig-todolist

raak index.html aan

STAP3: voeg de volgende code toe aan index.html.

Te doen lijst

Mijn takenlijst

STAP4: Open de index.html in uw browser.

U zult zien dat Mijn takenlijst wordt weergegeven (zie de foto hierboven).

Stap 4: Bootstrap toevoegen

In deze sectie zullen we Bootstrap-ondersteuning toevoegen aan onze index.html-pagina om een snelle en goede stijl toe te voegen aan de To-Do List-app.

Opmerking: in deze app zullen we Bootstrap 3 gebruiken, u gebruikt elk ander CSS-framework, zoals Semantic UI.

STAP1: voeg Bootstrap CSS-bestand toe aan de head-tag:

STAP2: voeg Bootstrap- en JQuery CDN-scriptbestanden toe aan het einde van de body-tag:

STAP3: Open index.html in uw browser.

Gefeliciteerd, we hebben in een paar stappen Bootstrap-ondersteuning aan onze pagina toegevoegd.

Stap 5: Voltooi de gebruikersinterface

Nadat we met succes Bootstrap-ondersteuning aan onze app hebben toegevoegd. Laten we nu verder gaan en de UI (gebruikersinterface) beconcurreren om de gebruiker nieuwe taken te laten toevoegen. De takenlijst kan nieuwe items aan een lijst toevoegen en bestaande items verwijderen.

STAP1: voeg de volgende code toe aan index.html.

Nieuwe taak toevoegen Toevoegen Alles wissen!

Mijn takenlijst

STAP2: open het bestand index.html in uw browser.

Stap 6: De logica toevoegen aan de app

Wanneer u een taaknaam invoert en op de knop Toevoegen klikt, gebeurt er op dit moment niets. Laten we dat oplossen.

Aan het einde van deze stap zullen we onze index.html veranderen in een dynamische pagina, zodat deze zich gedraagt op gebruikersinteractie.

STAP1: maak een nieuwe map in simple-todolist, noem het js en een nieuw bestand noem het script.js in die map:

mkdir js

cd js touch script.js

STAP2: koppel de script.js aan de index.html door de volgende code toe te voegen aan het einde van de head-tag:

STAP3: voeg de volgende code toe aan het script.js-bestand

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

var taken = 0 $("#removeAll").hide(); /* nieuwe taakafhandelaar toevoegen */ $("#add").on("klik", (event) => { event.preventDefault(); event.stopPropagation(); var val = $("input"). val(); if(val !=="") {taken +=1; var elm =$("

• "); $("#mylist").append(elem); $("input").val(""); /* verwijder unieke taakhandler */ $(".text-right").on(" clikc", function(event) { event.preventDefault(); event.stopPropagation(); taken -=1; $(this).parent.remove(); }); /* show removeAll knop als we meer dan 3 hebben taken */ if(taken > 2) { $("#remveAll").show(); } /* removeAll handler */ $("#removeAll").on("klik", event => { event.preventDefault (); event.stopPropagation(); $(".disabled").siblings().remove(); taken = 0; $("#removeAll").hide(); }); } }); });

  Opmerking: u kunt de code klonen of downloaden van mijn GitHub-repository, dit voorkomt dat u hoeft te tikken.

  git kloon github.com/ahmnouira/simple-todolist

  STAP4: test de code

  Open uw browser en voer een taak in en klik vervolgens op Toevoegen, u zult zien dat er een nieuwe taak aan de lijst is toegevoegd, als u 3 taken toevoegt, zult u merken dat er een knop Alles wissen verschijnt, met deze knop kunnen we alle toegevoegde taken verwijderen, u kan ook slechts één taak verwijderen door op de bijbehorende knop te klikken.

  Stap 7: (Optioneel) De app implementeren

  

  Tot nu toe hebben we een eenvoudige takenlijst-app gebouwd, nu is het tijd om deze in de cloud te implementeren en ons werk te delen met anderen over de hele wereld.

  Om dit te bereiken zullen we het cloudplatform ZEIT Now gebruiken.

  Wat is ZEIT Nu?

  ZEIt Now is een cloudplatform voor statische sites en serverloze functies, waarmee ontwikkelaars websites en webservices kunnen hosten die onmiddellijk worden geïmplementeerd, en dit alles zonder configuratie.

  1. Installeer nu CLI

  Om met ZEIT Now te implementeren, moet u Now CLI installeren.

  belangrijk:Zorg ervoor dat npm is geïnstalleerd.

  npm -v # controleer of de npm install

  npm install -g now@latest # installeer de laatste versie van Now CLI nu wereldwijd -v # controleer of de Now CLI is geïnstalleerd en druk de versie af

  2. Implementeren

  Het enige dat u hoeft te doen, is naar de map gaan en vervolgens uw app implementeren met een enkele opdracht:

  nu --prod # implementeer de app

  Eenmaal geïmplementeerd, krijgt u een voorbeeld-URL die aan elke implementatie wordt toegewezen om de laatste wijzigingen onder het adres te delen.

  mijn app:

  Stap 8: Conclusie

  Dat is alles!

  Voel je vrij om de code te verkennen door nieuwe functies in te stellen en de app uit te breiden, en deel je ervaringen en vragen in het opmerkingenveld.

  Bezoek mijn open source op GitHub om meer van mijn werken te zien.

  mijnYouTube.

  mijnLinkedIn

  Bedankt voor het hebben van een tijd om mijn instructable te lezen ^^.

  Prettige dag.

  Ahmed Nouira