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.
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.
Hier ein kurzer Blick auf die Projektstruktur:
Simple-Calculator/ ├── index.html ├── styles.css └── script.js
Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:
Klonen Sie das Repository:
git clone https://github.com/abhishekgurjar-in/Simple-Calculator.git
Öffnen Sie das Projektverzeichnis:
cd Simple-Calculator
Führen Sie das Projekt aus:
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>
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;
}
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;
}
});
});
Sie können sich hier die Live-Demo des Simple Calculator ansehen.
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!
Dieses Projekt wurde als Teil meiner Reise entwickelt, um meine Webentwicklungsfähigkeiten zu verbessern, wobei ich mich auf JavaScript und Benutzerinteraktion konzentrierte.
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
