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

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.

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.

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.

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:

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.

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:

Letzte Anpassungen und UI-Design

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

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

Hinzufügen von Tastaturunterstützung

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

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!