Så, vill du bli webbutvecklare?

Du kan titta på 50 timmar av tutorials, eller så kan du bygga något.

En Tap Counter är det kanoniska "Första Projektet" för frontend-utvecklare. Det täcker alla grundläggande: variabler, funktioner, händelsehanare och DOM-manipulation.

I denna guide kommer vi inte att ge dig klistrabelastkod. Vi kommer att förklara logiken för hur en räknare för tryck fungerar under huven.

The Logic flow

En räknareapp gör tre saker:

1. Tillstånd: Det minns ett nummer (t.ex. `count = 0`). 1. Händelse: Det väntar på att du klickar på en knapp. 1. Uppdatering: När det klickas på, görs `count = count + 1` och skärmen uppdateras.

Steg 1: HTML (Skelettet)

Du behöver en plats att visa numret och en knapp att klicka på.

```

0

Det är det. Det är fult, men det finns.

Steg 2: JavaScript (The Brain)

Det är här magin händer.

Vi behöver berätta för datorn: "Hej, hitta den där Knappen. När någon klickar på den, ta fram Numret, lägg till 1 och visa det igen."

Koden ser ut så här:

``` let count = 0; // Tillståndet

function increase() { count++; // Lägg till 1 document.getElementById("number").innerText = count; // Uppdatera skärmen } ```

Steg 3: LocalStorage (Komminnet)

Problemet med koden ovan? Om du uppdaterar sidan återställs räknaren till 0.

För att skapa en användbar räknare (som en Tasbeeh eller radräknare) behöver den komma ihåg.

Webbläsare har en liten databas som heter `localStorage`.

• Spara: Varje gång vi klickar, berättar vi för webbläsaren: "Spara 'count' permanent."
• Ladda: När sidan laddas, frågar vi: "Har du ett sparad nummer?" Om ja, börja där.

Varför detta projekt är viktigt

Att bygga en räknare för kran lär dig den grundläggande konceptet Staterhantering.

Oavsett om du bygger en att-göra-lista, en varukorg eller Facebook, är det bara avanserade versioner av en räknare.

• Facebook Like Button? Det är en tryckräknare.
• Twitter Retweet räkn? Det är en knackräknare.
• Amazon Cart Artikelräknare? Det är en räknare för klick.

Slutsats

Släpp inte bara verktyg, bygg dem. Öppna en textfil, skriv dessa tio rader kod och se din egen anpassade räknare ta liv. Det är det första steget in i en större värld.