Erstellen Sie eine einfache Rechner-Website-CSS-Tutorial-php.cn

Erstellen Sie eine einfache Rechner-Website

王林

Freigeben： 2024-08-23 14:33:27

Original

386 Leute haben es durchsucht

Build a Simple Calculator Website

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

Abhishek Gurjar
- GitHub-Profil

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!