paint-brush
Das Taschenrechnerprojekt: Warum es einfacher war, aber dennoch voller Hürden stecktevon@codebyblazej
313 Lesungen
313 Lesungen

Das Taschenrechnerprojekt: Warum es einfacher war, aber dennoch voller Hürden steckte

von CodeByBlazej5m2024/06/21
Read on Terminal Reader

Zu lang; Lesen

Ich habe mich an das Calculator-Projekt gewagt und fand es überraschenderweise einfacher als das Etch-a-Sketch-Projekt, musste aber trotzdem einige Hürden überwinden, insbesondere bei CSS. Ich habe meine Erfahrungen, Programmiertipps, Ressourcen und Problemlösungsstrategien geteilt. Trotz der Herausforderungen hat mir der Prozess Spaß gemacht, ich habe viel gelernt und anderen Programmierern praktische Ratschläge gegeben. Lesen Sie meine ganze Geschichte und meine Tipps!
featured image - Das Taschenrechnerprojekt: Warum es einfacher war, aber dennoch voller Hürden steckte
CodeByBlazej HackerNoon profile picture

Hallo, hier ist Blazej,


Die Arbeit am Taschenrechner-Projekt war ziemlich lustig und, würde ich sagen, eine andere Erfahrung. Anders als Etch-a-Sketch, das schwieriger zu sein schien. Wie ist das dann möglich?


Die Antwort liegt vermutlich nicht im Schwierigkeitsgrad der Übung, sondern an etwas anderem. Beginnen wir von vorne.

Starten des Taschenrechnerprojekts

Ich habe am 2. Mai 2024 mit der Arbeit am Rechner begonnen. Die erste Sitzung dauerte drei Stunden, in denen ich es geschafft habe, ihn einzurichten und auszuführen. Es war etwa Mittag, also beschloss ich, eine endgültige Entscheidung zu treffen, zu Abend zu essen und zu trainieren.


Ich wollte an diesem Nachmittag noch ein bisschen mehr programmieren, weil ich wusste, dass meine Freundin am nächsten Tag zu Besuch kommen und drei Nächte bleiben würde.


Wie andere engagierte Odinisten wollte ich keine Pause vom Programmieren machen, insbesondere nicht vom Rechner, der meiner Meinung nach das wichtigste Projekt in Foundations ist.



1. Screenshot des Rechners



Unerwartete Inspirationen

Ich wollte gerade meinen Computer ausschalten, als ForrestKnights YouTube-Video auftauchte. Ich schaute es mir ein wenig an und hielt inne, als er erzählte, wie viel Spaß ihm das Programmieren macht.


Ich habe darüber nachgedacht und hier ist meine Perspektive als Anfänger, der gerade mit dem Programmieren fertig ist und sich diese Frage immer noch häufig stellt.


Für jemanden wie mich, der seit seiner Kindheit Zugang zu einem Computer hat, viele Spiele spielt und ein grundlegendes Verständnis davon hat, wie die Dinge funktionieren, ist die Antwort nicht so einfach.


Allerdings hatte ich vorher noch nie programmiert!

Erste Programmiererfahrung

Ich habe jedoch festgestellt, dass mir der Prozess umso mehr Spaß macht, je mehr ich programmiere und sehe, wie es funktioniert. Das gilt insbesondere für den Rechner, der insgesamt reibungslos funktionierte und bei dem ich es geschafft habe, nicht ernsthaft ins Stocken zu geraten – na ja, größtenteils zumindest. Darauf werde ich später noch eingehen.


Dieses Projekt war deutlich einfacher als das Etch-a-Sketch-Projekt, bei dem ich zwei Tage lang mit der Implementierung der Farbverlaufslogik kämpfte. Programmieren ist sicherlich nicht einfach, aber für dieses Projekt habe ich an vier Tagen jeden Tag etwa 1,5 bis 2 Stunden aufgewendet, und es war eine überschaubare und lohnende Erfahrung.


Jedes Mal, wenn ich VSCode öffnete, fühlte ich mich sehr produktiv, was mir half, die Aufgaben schnell zu lösen. Das Faszinierendste bei der Arbeit daran war, dass ich mir andere Optionen vorstellen konnte, die diese Aufgabe ebenfalls lösen würden.


Ich kam mir vor wie ein Kind, das ein verrücktes Lego-Technic-Auto baut und sich vorstellt, welche Funktionen es noch einmal hinzufügen könnte. Komisches Gefühl.

Den Prozess genießen

Was genau meine ich damit? Ich wusste, dass ich eine Funktion mit Ereignissen für alle Zifferntasten hätte erstellen können, anstatt neun einzelne.


Ich habe jedoch vergessen, wie man es richtig macht, und beschloss, mit 9 verschiedenen weiterzumachen, aber ich habe mir versprochen, dass ich zurückgehen und die Dokumentation lesen würde, die ein paar Lektionen zuvor zur Verfügung gestellt wurde, um dieses Problem zu lösen. Wie ich dachte, habe ich es getan.



Taschenrechner-Zifferntasten



Ich hatte damit gerechnet, noch etwa fünf Stunden an etwas festzuhängen, aber das ist nie passiert. Ich habe es mit 244 Zeilen Code zum Laufen gebracht.



244 Zeilen Code



Herausforderungen mit CSS

Jetzt war es an der Zeit, ein wenig mit CSS herumzuspielen und dieses Projekt zu stylen. Nun, da bin ich nicht weitergekommen. Es schien schwieriger zu sein, als JavaScript zu erstellen.


Ich konnte es nicht glauben! Ich wusste, dass ich für dieses Projekt Flexbox verwenden musste, aber die Schaltflächen sahen etwas anders aus als bei dem Etch-a-Sketch, den ich zuvor erstellt hatte. In Etch-a-Sketch wurde mir gesagt, ich solle ein Raster mit Schleifen erstellen:



Etch-A-Sketch-Raster



Wenn ich mit Flexbox nicht weiterkomme, schaue ich mir immer Joshs Blogbeitrag an. Meiner Meinung nach gibt es keine bessere Erklärung, wie sie funktionieren.


Ich war mir allerdings nicht sicher, ob das bei einem Taschenrechner funktionieren würde, da nicht alle Tasten gleich sind. Ich wollte zum Beispiel, dass die 0 größer ist.


Ich habe den Artikel nach unten gescrollt, weil ich mich daran erinnerte, dass CSS Grid dort erwähnt wurde. Es stellte sich heraus, dass ich es hier tatsächlich verwenden musste.


Darüber hinaus wurde auch der von Odin als Beispiel gezeigte Rechner mit CSS Grid entworfen.



Beispiel für Odins Taschenrechner



CSS Grid entdecken

An diesem Punkt war ich ein wenig verloren, denn soweit ich mich erinnere, hatten wir das Gitter überhaupt nicht berührt.


Ich begann, danach zu googeln. Was fand ich? Einen langen Artikel mit einer recht ausführlichen Erklärung zur Verwendung. Ich dachte, es sei nicht der richtige Zeitpunkt dafür und nahm an, dass wir das Grid zu einem späteren Zeitpunkt kennenlernen würden.


Außerdem wurde in der Übung nur Flexbox erwähnt, also ja, ich HOFFE, dass wir auch Grid lernen werden. Wenn nicht, werde ich irgendwann alleine darauf zurückkommen.


KLEINES UPDATE – am nächsten Tag sah ich diesen Beitrag auf Odin Discord:



Discord-Raster



Letzte Anpassungen und UI-Design

Ich habe mich für ein paar Divs entschieden und die Schaltflächen einfach in HTML neu gruppiert



Neu gruppiertes HTML



Nach einer weiteren Lerneinheit kam mir der Rechner irgendwie bekannt vor wie ein normales Gerät.



UI-fähig



Hinzufügen von Tastaturunterstützung

Der letzte Schritt bestand für mich darin, die Tastaturunterstützung zu implementieren.



Albtraum der Tastaturunterstützung



Verdammt! Das war nicht einfach und ich musste zur Ereignislektion zurückkehren und die Dokumentation mehrmals durchlesen, um zu verstehen, wie diese Tasten auf der Tastatur funktionieren.


Es war ziemlich schwierig, da mich das Ereignisblasen verwirrte. Es war der richtige Moment, eine Funktion zu erstellen, die Schaltflächen anklickt, und zwei Aufrufe dafür. Einen für einen Mausklick und den zweiten für einen Tastendruck auf der Tastatur.


Es gelang mir, alle Ziffern und Gleichheitsschaltflächen zu sortieren, ich habe mich jedoch gegen die Verwendung von Operatoren entschieden, da ich meine Logik mit dem Objekt des Operators ändern müsste.


Dieser Aufbau scheint leichter zu verstehen, wenn ich ihn später noch einmal durchgehen muss.


Ich könnte mich jedoch irren, also nehmen Sie es nicht als selbstverständlich hin.


Das fertige Projekt kann hier angesehen werden:


TASCHENRECHNER

Überlegungen und gewonnene Erkenntnisse

Was war die Lektion hier? Ich habe den Prozess der App-Erstellung und des Designs genossen und VIEL über Events gelernt. Ich kann Ihnen nur wärmstens empfehlen, den Extra-Credit-Prozess für diese App zu durchlaufen!


Wenn Ihnen diese Geschichte gefallen hat und Sie die Tipps hilfreich fanden, folgen Sie mir auf Twitter für weitere Updates und Programmiertipps. Ich würde gerne in den Kommentaren unten von Ihren eigenen Programmierherausforderungen und -erfolgen hören!