Einführung
Hallo, liebe Entwickler! Ich freue mich, Ihnen mein neuestes Projekt vorzustellen: einen einfachen Rechner. Dieses Projekt ist eine perfekte Möglichkeit, die Grundlagen von JavaScript zu erkunden, insbesondere die Handhabung mathematischer Operationen, die dynamische Aktualisierung des DOM und die Erstellung einer interaktiven Benutzeroberfläche. Egal, ob Sie neu in der Webentwicklung sind oder Ihre JavaScript-Kenntnisse verbessern möchten, dieses Simple Calculator-Projekt ist ein guter Ausgangspunkt.
Projektübersicht
Der Einfache Rechner ist eine webbasierte Anwendung, die es Benutzern ermöglicht, grundlegende arithmetische Operationen wie Addition, Subtraktion, Multiplikation und Division durchzuführen. Dieses Projekt zeigt, wie man eine reaktionsfähige und benutzerfreundliche Oberfläche erstellt und gleichzeitig Benutzereingaben effizient verarbeitet, um Berechnungen durchzuführen.
Merkmale
-
Intuitive Benutzeroberfläche: Sauberes und unkompliziertes Design für einfache Interaktion.
-
Grundlegende arithmetische Operationen: Unterstützt Addition, Subtraktion, Multiplikation und Division.
-
Lösch- und Löschfunktion: Benutzer können die Eingabe löschen oder den letzten Eintrag mit einem einzigen Klick löschen.
-
Responsive Design: Gewährleistet eine konsistente Benutzerfreundlichkeit auf verschiedenen Geräten und Bildschirmgrößen.
Verwendete Technologien
-
HTML: Strukturiert die Webseite und Eingabeelemente.
-
CSS: Gestaltet die Rechneroberfläche und sorgt so für ein klares und ansprechendes Design.
-
JavaScript: Verwaltet die Berechnungslogik und Benutzerinteraktionen.
Projektstruktur
Hier ein kurzer Blick auf die Projektstruktur:
Simple-Calculator/
├── index.html
├── styles.css
└── script.js
Nach dem Login kopieren
-
index.html: Enthält die HTML-Struktur für den einfachen Rechner.
-
styles.css: Enthält CSS-Stile, um das Erscheinungsbild und die Reaktionsfähigkeit des Rechners zu verbessern.
-
script.js: Verwaltet die Berechnungslogik und Benutzerinteraktionen.
Installation
Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:
-
Klonen Sie das Repository:
git clone https://github.com/abhishekgurjar-in/Simple-Calculator.git
Nach dem Login kopieren
-
Öffnen Sie das Projektverzeichnis:
cd Simple-Calculator
Nach dem Login kopieren
-
Führen Sie das Projekt aus:
- Öffnen Sie die Datei index.html in einem Webbrowser, um den einfachen Rechner zu verwenden.
Verwendung
-
Öffnen Sie die Websitein einem Webbrowser.
-
Geben Sie Zahlen ein und führen Sie Rechenoperationen mit den Taschenrechnertasten aus.
-
Verwenden Sie die „AC“-Taste, um alle Eingaben zu löschen, oder „DEL“-Taste, um den letzten Eintrag zu löschen.
-
Klicken Sie auf die Schaltfläche „=", um das Ergebnis der Berechnung anzuzeigen.
Code-Erklärung
HTML
Die Datei index.html stellt die Grundstruktur des einfachen Rechners bereit, einschließlich des Anzeigebereichs und der Schaltflächen für arithmetische Operationen. Hier ist ein Ausschnitt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simple Calculator</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="header">
<h1>Simple Calculator</h1>
</div>
<div class="container">
<div class="calculator">
<input type="text" id="inputBox" placeholder="0" />
<div>
<button class="button operator">AC</button>
<button class="button operator">DEL</button>
<button class="button operator">%</button>
<button class="button operator">/</button>
</div>
<div>
<button class="button">7</button>
<button class="button">8</button>
<button class="button">9</button>
<button class="button operator">*</button>
</div>
<div>
<button class="button">4</button>
<button class="button">5</button>
<button class="button">6</button>
<button class="button operator">-</button>
</div>
<div>
<button class="button">1</button>
<button class="button">2</button>
<button class="button">3</button>
<button class="button operator">+</button>
</div>
<div>
<button class="button">00</button>
<button class="button">0</button>
<button class="button">.</button>
<button class="button equalBtn">=</button>
</div>
</div>
</div>
<div class="footer">
<p>Made with ❤️ by Abhishek Gurjar</p>
</div>
</body>
</html>
Nach dem Login kopieren
CSS
Die Datei „styles.css“ formatiert den einfachen Rechner und bietet ein modernes und benutzerfreundliches Layout. Hier sind einige wichtige Stile:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
background: linear-gradient(45deg, #0a0a0a, #3a4452);
}
.header {
color: white;
margin: 30px;
text-align: center;
}
.calculator {
border: 1px solid #717377;
padding: 20px;
border-radius: 16px;
background: transparent;
box-shadow: 0px 3px 15px rgba(113, 115, 119, 0.5);
}
input {
width: 320px;
border: none;
padding: 24px;
margin: 10px;
background: transparent;
box-shadow: 0px 3px 15px rgba(84, 84, 84, 0.1);
font-size: 40px;
text-align: right;
cursor: pointer;
color: #ffffff;
}
input::placeholder {
color: #ffffff;
}
button {
border: none;
width: 60px;
height: 60px;
margin: 10px;
border-radius: 50%;
background: transparent;
color: #ffffff;
font-size: 20px;
box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1);
cursor: pointer;
}
.equalBtn {
background-color: #fb7c14;
}
.operator {
color: #6dee0a;
}
.footer {
color: white;
margin: 50px;
text-align: center;
}
Nach dem Login kopieren
JavaScript
Die Datei script.js verwaltet die Logik zur Durchführung von Berechnungen und zur Verarbeitung von Benutzerinteraktionen. Hier ist ein Ausschnitt:
let input = document.getElementById("inputBox");
let buttons = document.querySelectorAll("button");
let string = "";
let arr = Array.from(buttons);
arr.forEach((button) => {
button.addEventListener("click", (e) => {
if (e.target.innerHTML === "=") {
string = eval(string);
input.value = string;
} else if (e.target.innerHTML === "AC") {
string = "";
input.value = string;
} else if (e.target.innerHTML === "DEL") {
string = string.substring(0, string.length - 1);
input.value = string;
} else {
string += e.target.innerHTML;
input.value = string;
}
});
});
Nach dem Login kopieren
Live-Demo
Sie können sich hier die Live-Demo des Simple Calculator ansehen.
Abschluss
Die Erstellung dieses einfachen Rechners war eine lohnende Erfahrung, die mein Verständnis von JavaScript und der Erstellung interaktiver Webanwendungen vertiefte. Ich hoffe, dass dieses Projekt Sie dazu ermutigt, mit Ihren eigenen JavaScript-Projekten zu experimentieren. Viel Spaß beim Codieren!
Credits
Dieses Projekt wurde als Teil meiner Reise entwickelt, um meine Webentwicklungsfähigkeiten zu verbessern, wobei ich mich auf JavaScript und Benutzerinteraktion konzentrierte.
Autor
Das obige ist der detaillierte Inhalt vonErstellen Sie eine einfache Rechner-Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
