Hur du gör din egen Cryptocurrency Dashboard

Annons

Med alla samtal om forking, bedrägerier, webbplatser som stjäl din CPU för att bryta altcoinsoch galen prisvolatilitet, kryptokurser ("crypto") blir säkert mer mainstream.

Om du har investerat eller funderar på att köpa kryptokurser, behöver du ett sätt att övervaka deras priser i realtid. Lyckligtvis kan du enkelt bygga dig själv en kryptodashboard med ingenting annat än HTML och CSS Lär dig HTML och CSS med dessa steg för steg-tutorialsÄr du nyfiken på HTML, CSS och JavaScript? Om du tror att du har en skicklighet för att lära dig att skapa webbplatser från grunden - här är några bra steg-för-steg-tutorials som är värda att prova. Läs mer .

Notera: Att köpa cryptocurrencies är en mycket spekulativ investering. Invester aldrig mer än du har råd, och var beredd att förlora allt över natten.

Komma igång

Denna instrumentbräda drivs av en gratis widget tillhandahållen av coinmarketcap.com. Denna utmärkta webbplats visar statistik och aktuella priser på tusentals kryptokurser. Börja med att välja valfri valuta eller genom att ange ett mynt i sökfunktionen längst upp till höger.

När du väl valt kommer du att föras till myntöversikt, där olika statistik, diagram och analyser visas om ditt valda mynt. Gå vidare till Verktyg flik. Det är här du ser en färdigt widget som visar specifik information om ditt valda mynt. Känn dig fri att experimentera med Anpassa den här widgeten inställningar, men för tillfället räcker den grundläggande widgeten. Kopiera koden från Webbplatswidget ruta eller hålla sidan öppen för användning senare.

Så här ser widgetkoden ut för Bitcoin:

Oavsett om du är med Bitcoin, Ethereum, Krusning, dogecoin, eller något annat av 1000+ alternativ (alt) tillgängliga mynt, den här processen är exakt densamma: hitta ett mynt och kopiera sedan widgetkoden.

Om du vill bli smart med automatisering kan du använda API Ticker och ett schemaläggningsverktyg såsom cron Hur man planerar uppgifter i Linux med Cron och CrontabFörmågan att automatisera uppgifter är en av de futuristiska tekniker som redan finns här. Varje Linux-användare kan dra nytta av schemaläggningssystem och användaruppgifter, tack vare cron, en lättanvänd bakgrundstjänst. Läs mer att utföra nästan allt du gillar. Det är lite utanför artikelns räckvidd, men du kan skapa en e-postvarning om till exempel priset sjunker under ett visst tröskelvärde.

Bygga webbsidan

Nu när du har widgeten måste du skapa en grundläggande HTML-sida för att visa den. Skapa en ny HTML-fil som heter din favorittextredigerare dashboard.html.

Här är startkoden du behöver:

Klistra in din HTML-widgetkod mellan kropp taggar. När vi går tillbaka till Bitcoin ser hela koden så här ut:

Det är allt som finns åt det. Det är det verkligen så enkelt för att skapa din egen cryptocurrency-instrumentbräda.

Att göra det ganska

Medan denna instrumentpanel är det tekniskt färdig, det är inte bra. Widgeten fyller skärmen horisontellt, men är inte särskilt hög vertikalt. Låt oss utforma det med övergripande stilark 5 Babysteg för att lära sig CSS och bli en kick-ass CSS trollkarlCSS är de enskilt viktigaste förändringswebbsidor som har sett under det senaste decenniet, och det banade vägen för separationen av stil och innehåll. På det moderna sättet definierar XHTML den semantiska strukturen ... Läs mer (CSS).

Under titel, Lägg till en stil märka:

Inuti dessa stiltaggar är det där du skriver din CSS. Här är vad du behöver:

.coinmarketcap-currency-widget {bredd: 33%; marginal: 100px auto; }

Denna enkla CSS gör två saker. Använda Dokumentobjektmodell JavaScript och webbutveckling: Använda dokumentobjektmodellenDen här artikeln kommer att presentera dokumentskelettet som JavaScript fungerar med. Med kunskap om detta abstrakta dokumentobjektmodell kan du skriva JavaScript som fungerar på vilken webbsida som helst. Läs mer (DOM), det riktar sig till coinmarketcap-valuta widget klass. Denna klass är den huvudsakliga behållaren för widgeten, så detta kommando instruerar din webbläsare att tillämpa följande stilar på det specifika elementet.

Widgetens bredd är inställd på 33%, vilket säkerställer att det inte längre ser utsträckt när det står kvar vid standardalternativet (som är 100% i det här fallet).

Slutligen läggs en marginal på 100 pixlar till topp och botten, där vänster och höger får en marginal på bil. Detta flyttar widgeten bort från toppen av webbläsaren och centrerar den horisontellt.

Det finns nästan ingen gräns för hur långt du kan gå med din utformning av den här widgeten. Kanske gillar du röd text eller en blå bakgrund? Vad sägs om blinkande text? Himlen är verkligen gränsen!

Lägga till fler mynt

Nu när du har spikat grunderna är det dags att lägga till fler mynt. Även om du bara äger ett mynt har diversifiering av instrumentpanelen flera fördelar.

Som en lös regel (även om allt kan hända i det vilda väster om cryptocururrency), går mynt upp när Bitcoin går ner, bortsett från när Bitcoin absolut sjunker, tar det allt annat med sig.

Genom att övervaka andra valutor kan du ofta tydligt se att pengar flyter ut ur en och till en annan. Om du vill köpa ett nytt mynt, lägger du till det på instrumentpanelen kan du möjligen upptäcka en trend eller en daglig låg för att skaffa ett fynd!

Gör så här med hjälp av stegen ovan och få widgetkoden för alla andra valutor du vill spåra. Klistra in dem nedanför Bitcoin tracker så här:

Du behöver inte currency.js för varje widget. Du behöver det bara en gång per sida.

Om du laddar om instrumentpanelen ser du att den inte ser bra ut. Alla mynt staplas vertikalt, och det finns enorma luckor mellan dem! Du måste ändra CSS för att göra att dessa widgets ser bättre ut för flera mynt.

Genom att justera bredden och marginalen för varje widgetbehållare kan du ställa in flera widgets horisontellt, så här:

bredd: 23%; marginal: 10px 1%; flyta till vänster;

Med samma CSS är det möjligt att stapla så många widgets du vill, även om du kanske måste ändra den något efter cirka 12 widgets.

En sista pricken är att få instrumentpanelen att ladda om automatiskt, så att du alltid har de senaste priserna.

Inuti huvud klistermärken högst upp i ditt dokument, klistra in denna metatagg:

Detta kommer att uppdatera din sida var X: e sekund, där X anges inuti innehåll. Koden ovan kommer att uppdatera sidan var 60: e sekund. Ändra detta till vad du vill, förutsatt att du matar in numret i sekunder.

Staying Sane

Nu när din cryptocurrency-instrumentbräda är klar behöver du inte längre kontrollera coinmarketcap.com, eller coinbase.com, eller vilken webbplats du använder för att övervaka dina inköp. Bara inte göra dig själv galet genom att kontrollera priserna varje minut.

Låt den köras på din dator, eller kanske till och med ställa in den på en Raspberry Pi och ha den igång i din hall!

Om du vill kolla priser när du är på farten, ta en titt på vår guide till de bästa Android-apparna för cryptocurrency Håll dig uppdaterad om din CryptoCurrency med dessa Android-apparAtt hålla reda på virtuell valutaförändring och dagshandel kan både vara roligt och ett sätt att öka dina vinster efter en god dags gruvdrift. Läs mer , och glöm inte att läsa vår guide om allt du behöver veta innan du köper cryptocurrency.

Har du byggt en kryptodashboard? Var placerade du din? Låt oss veta i kommentarerna nedan!