Erstellen Sie 2022 einen Rechner mit JavaScript, HTML und CSS
Veröffentlicht: 2021-01-02Egal, ob Sie eine neue Programmiersprache oder ein Entwicklungsframework lernen, irgendwann müssen Sie an realen Projekten arbeiten. Während Sie sich durch das Fach bewegen, sollten Sie Ihre Fähigkeiten und Ihr Verständnis der Sprache testen. Es ist eine gute Idee, ein Projekt mit neu erlernter Technologie oder einem Framework zu erstellen. Es gibt viele online verfügbare Ideen, was Sie mit Ihrem Wissen schaffen sollten.
Zu den am häufigsten gefundenen Vorschlägen gehören ein Taschenrechner in JavaScript und eine Aufgabenliste. Obwohl sie einfach erscheinen, kann es eine ziemliche Aufgabe sein, wenn Sie anfangen, an diesen Projekten zu arbeiten. Hier machen wir es Ihnen sowohl einfach und logisch als auch erlebnisreich.
Sollen wir anfangen?
Inhaltsverzeichnis
Logik vor allem anderen
Wenn Sie mit der Arbeit an einem Projekt beginnen, egal ob es sich um einen Taschenrechner oder eine To-Do-Liste handelt, müssen Sie zuerst die Logik identifizieren.
Wie funktioniert der Rechner?
- Sie addieren zwei oder mehr Zahlen (beliebig viele Ziffern) mit den Zifferntasten auf dem Taschenrechner.
- An diesen Zahlen führen Sie dann grundlegende arithmetische Funktionen aus, dh Addition, Subtraktion, Multiplikation und Division.
- Der Taschenrechner sollte in der Lage sein, die richtigen Lösungen zu berechnen und auszugeben.
Dies ist die Prämisse Ihres Taschenrechner-Tools. Sie benötigen also eine Tastatur, eine Anzeigeeinheit und Funktionselemente.
Die Schaltfläche „Gleich“ wertet die Antwort aus, während die Schaltfläche „Löschen“ sicherstellt, dass alle Eingaben auf dem Rechnerdisplay entfernt werden.
Lernen Sie Online-Softwareentwicklungskurse von den besten Universitäten der Welt. Verdienen Sie Executive PG-Programme, Advanced Certificate-Programme oder Master-Programme, um Ihre Karriere zu beschleunigen.
Das Projekt in Angriff nehmen: Schlüssel zum Erstellen des Codes
Anstatt sofort zum Code zu gehen, müssen Sie lernen, wie Sie ein neues Projekt angehen. Sie haben zwei Dinge für Sie parat: die Logik und ein grundlegendes Verständnis der Frontend-Technologien, also JavaScript, HTML und CSS.
Bevor Sie mit der Erstellung Ihres Taschenrechners mit JavaScript beginnen , benötigen Sie Folgendes:
- Eine integrierte Entwicklungsumgebung, die Ihnen hilft, Ihr Projekt mit allen drei Technologien zu erstellen.
- Ein lokaler Server, der Ihnen hilft, Ihre Codes zu testen und die Fehler zu entfernen. Dadurch können Sie die Anwendung schneller und flexibler starten.
#1 Erste Schritte mit HTML
Der erste Schritt besteht darin, sich mit HTML die Hände schmutzig zu machen, damit Sie die Gliederung für Ihren Taschenrechner erstellt haben.
Es gibt zehn Schaltflächen auf dem Taschenrechner, die von 0 bis 9 reichen. HTML ist für die Erstellung der Schlüssel für jede Ziffer verantwortlich.
Abgesehen davon müssen Sie HTML verwenden, um auch separate Schlüssel für die verschiedenen arithmetischen Funktionen zu erstellen, wenn Sie einen Taschenrechner mit JavaScript erstellen .
Sie können HTML verwenden, um die Schaltfläche zum Anzeigen der eingegebenen Ziffern oder der Ergebnisse sowie zum Löschen der Anzeige hinzuzufügen.
Die visuelle Einheit Ihres Taschenrechners ist vollständig von HTML und CSS abhängig, deren Schaltflächen und ihre IDs mithilfe von HTML erstellt werden müssen.
Der Boilerplate-Code
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name=“viewport“ content=“width=device-width, initial-scale=1.0″>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<title>Rechner</title>
</head>
<Körper>
Der eigentliche Code zum Erstellen der Taschenrechner-Gliederung
(
<!– Taschenrechner –>
<div class="rechner">
<!– Anzeige –>
<input type="text" class="display" disabled>
<!– Tasten –>
<div class="keys">
<!– 4 Tastenreihen –>
<div class="row">
<button value=”7″>7</button>
<button value=“8″>8</button>
<button value="9″>9</button>
<button value="+" class="operator">+</button>
</div>
<div class="row">
<button value=”4″>4</button>
<button value=”5″>5</button>
<button value="6″>6</button>
<button value="-" class="operator">-</button>
</div>
<div class="row">
<Schaltflächenwert=”1″>1</Schaltfläche>
<button value="2">2</button>
<button value=”3″>3</button>
<button value="*" class="operator">*</button>
</div>
<div class="row">
<button value=“C“ class=“operator“>C</button>
<Schaltflächenwert=”0″>0</Schaltfläche>
<button value="/" class="operator">/</button>
<button value=“=“ class=“operator“>=</button>
</div>
</div>
</div>
<!– Ende des Rechnerkörpers –>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
Lernen: Top 20 Javascript-Projekte in Github für Anfänger
#2 Stil mit CSS
Nachdem Sie die Struktur für den Taschenrechner definiert haben, verwenden Sie die Inline-CSS-Elemente, um Ihren Taschenrechner zu gestalten und ihn optisch ansprechend und benutzerfreundlich zu gestalten.
Während Inline-CSS ausgezeichnet ist, wenn es darum geht, das Erscheinungsbild Ihrer App zu entwerfen und zu stylen, ist es möglicherweise nicht SEO-freundlich. Abgesehen davon können Sie auch externe CSS-Elemente verwenden, indem Sie sie mit demselben Stammverzeichnis markieren. Sie können sogar interne oder eingebettete CSS-Elemente verwenden, die innerhalb der <style></style>-Tags im Head-Abschnitt vorhanden sind.
Hier führen wir Sie durch den Code, mit dem Sie Ihren Taschenrechner gestalten können.
(Sie können Variationen dieses Codes erstellen, wenn Sie möchten.)
/* gemeinsame Stile */
* {
Polsterung: 0;
Rand: 0;
}
Karosserie {
Breite: 100vw;
Höhe: 100vh;
Überlauf versteckt;
Anzeige: Flex;
justify-content: center;
Ausrichtungselemente: Mitte;
Hintergrundfarbe: #222831;
Schriftfamilie: serifenlos;
}
/* allgemeine Stile enden */
/* Taschenrechner */
.Taschenrechner {
Breite: 300px;
Polsterung unten: 15px;
Randradius: 7px;
Hintergrundfarbe: #000;
Box-Schatten: 5px 8px 8px -2px rgba(0, 0, 0, 0,61);
}
/* Ende des Taschenrechnerstils */
/* Anzeige */
.Anzeige {
Breite: 100 %;
Höhe: 80px;
Grenze: keine;
Box-Größe: Border-Box;
Polsterung: 10px;
Schriftgröße: 2rem;
Hintergrundfarbe: #00ff44;
Farbe: #000;
Textausrichtung: rechts;
Rand-Radius oben links: 7px;
Rand-Radius oben rechts: 7px;
}
/* Ende des Anzeigestils */
/* Reihe */
.Reihe {
Anzeige: Flex;
Begründungsinhalt: Zwischenraum;
}
/* Ende des Zeilenstils */
/* Taste */
Taste {
Breite: 50px;
Höhe: 50px;
Grenzradius: 50 %;
Grenze: keine;
Gliederung: keine;
Schriftgröße: 1,5 rem;
Hintergrundfarbe: #222;
Farbe: #fff;
Rand: 10px;
}
Schaltfläche: schweben {
Cursor: Zeiger;
}
/* Schaltflächenstil Ende */
/* Operator */
.Operator {
Hintergrundfarbe: #00ff44;
Farbe: #000;
}
/* Ende des Operatorstils */
#3 Funktionalität mit JavaScript hinzufügen
Wir haben nun die sichtbaren Aspekte beim Erstellen eines Taschenrechners mit JavaScript ausführlich besprochen . Lassen Sie uns einige Skripte erstellen, um den Taschenrechner funktionsfähig zu machen und die Berechnungsaufgaben auszuführen. Wir werden die wenigen Schritte verstehen, die zum Erstellen des JS-Codes erforderlich sind, was Ihnen helfen wird, den Code schneller zu entwickeln.
- Sie müssen die HTML-Tags, die Sie für einzelne Funktionen erstellt haben, mit JavaScript aufrufen. Sie verwenden Selektoren, um jeden dieser Eingänge aufzurufen und in einer Variablen zu speichern. Für jede Funktion benötigen Sie eine Variable. Beispielsweise gibt es eine separate Variable für die Anzeige, die Ziffern, die Löschfunktion sowie die Gleichheitsfunktion. In diesem Fall kann die Funktion getElementbyID() verwendet werden.
- Angenommen, Sie möchten eine einfache Berechnung von 20 + 30 durchführen, rufen Sie zuerst 20 auf, indem Sie die oben erwähnte Methode verwenden. Bevor Sie 30 und die arithmetische Funktion aufrufen, müssen Sie die zuvor aufgerufene 20 irgendwo speichern. Ihr Code sollte Platz für die vorübergehende Speicherung der Zahlen schaffen, um Berechnungen zu vereinfachen. Ein leeres Array enthält die Zahl als Zeichenfolge. Nachdem Sie die andere Zahl und die arithmetische Funktion mit eval() hinzugefügt haben, können Sie die Zahlen auswerten und die Antwort erhalten.
- Wenn Sie auf die Schaltflächen im Rechner klicken, möchten Sie einige Ergebnisse, entweder werden sie angezeigt oder sie werden ausgewertet. Zu diesem Zweck sollten Sie Ihrem Code Ereignis-Listener hinzufügen. Auf diese Weise hören die Schaltflächen auf den Klick. Wenn Sie den Ereignis-Listenern Funktionen hinzufügen, führen sie die Aufgabe automatisch für das Klickgeräusch aus.
- Die Anzeigeeinheit sollte den Wert der Schaltfläche zurückgeben, auf die Sie klicken. Sie können das event.target-Objekt verwenden, da es den Wert des Elements zurückgibt, bei dem das Ereignis aufgetreten ist. Beispielsweise möchten Sie, dass die Zahl „1“ angezeigt wird, sobald Sie darauf klicken. Dazu müssen Sie die Nummer in Form einer Variablen speichern. Mit der „if“-Funktion vergleichen Sie die vorhandene Variable, um festzustellen, ob sie Null ist oder nicht. Falls es sich um eine Null handelt, hängen Sie sie an eine leere Zeichenfolge an, sodass keine Zahl mit einer Null beginnt. Zuletzt fügen Sie den Inhalt des Schlüssels „1“ zur Anzeigevariable hinzu. Dadurch sehen Sie, sobald die Zifferntaste ausgelöst wird, den Inhalt im Anzeigefeld.
- Zuletzt müssen Sie die Funktion erstellen, die dabei hilft, mathematische Operationen auf die angezeigten Zahlen anzuwenden. Stellen Sie sicher, dass Ihr Taschenrechner in JavaScript die mathematischen Berechnungen problemlos durchführen kann. Um diese Funktionalität zu aktivieren, können Sie eine Kombination aus Syntaxen und Methoden verwenden. Wir haben den Code für die unten stehenden JavaScript-Elemente zu Ihrer Kenntnisnahme angegeben.
// alle Schaltflächen auswählen
const buttons = document.querySelectorAll('button');
// Element <input type="text" class="display" disabled> auswählen
const display = document.querySelector('.display');
// EventListener zu jeder Schaltfläche hinzufügen
buttons.forEach(Funktion(Taste) {
button.addEventListener('klicken', berechnen);
});
// Funktion berechnen
Funktion berechnen(Ereignis) {
// aktueller Wert der angeklickten Schaltflächen
const clickedButtonValue = event.target.value;
if (clickedButtonValue === '=') {
// prüfen, ob die Anzeige nicht leer ist, dann nur die Berechnung durchführen
if (Anzeigewert !== ”) {
// Berechnen und zeigen Sie die anzuzeigende Antwort
display.value = eval (anzeige.wert);
}
} else if (clickedButtonValue === 'C') {
// alles auf dem Display löschen
display.value = ”;
} anders {
// andernfalls mit der Anzeige verketten
display.value += clickedButtonValue;
}
}
Muss gelesen werden: Erklärung der Java-Architektur und -Komponenten
Zusammenfassen
Unabhängig davon, ob Sie einen Taschenrechner in JavaScript erstellen oder an einem komplexeren Projekt arbeiten, die Idee besteht darin, den Inhalt auf logische und konstruierte Weise aufzuschlüsseln. Dies hilft Ihnen bei der Ableitung der genauen Syntax und führt zu einer flüssigen Webanwendung. Anstatt direkt mit dem Codieren zu beginnen, versuchen Sie zu verstehen, was der wahre Zweck der von Ihnen verwendeten Technologie ist, und Sie werden zum Code geführt.
Wenn Sie mehr über Java und Full-Stack-Softwareentwicklung erfahren möchten, schauen Sie sich das Executive PG-Programm in Softwareentwicklung von upGrad & IIIT-B an – Spezialisierung auf Full-Stack-Entwicklung, das für Berufstätige konzipiert ist und mehr als 500 Stunden strenge Schulungen bietet , 9+ Projekte und Aufgaben, IIIT-B-Alumni-Status, praktische praktische Abschlussprojekte und Arbeitsunterstützung bei Top-Unternehmen.
