Flipping your fate with a click
Erstellen Sie eine Flip-Coin-Website: 0
Tails: 0
Hallo Entwickler! Ich freue mich, mein neuestes Projekt vorzustellen: eineFlip Coin-Anwendung. Dieses einfache, aber unterhaltsame Projekt ermöglicht es Ihnen, den klassischen Münzwurf zu simulieren, perfekt für die Entscheidungsfindung oder einfach nur zum Spaß. Es ist ein hervorragendes Beispiel dafür, wie man interaktive Webanwendungen mit HTML, CSS und JavaScript erstellt.
DerFlip Coinist eine webbasierte Anwendung, die das Werfen einer Münze simuliert. Benutzer können auf eine Schaltfläche klicken, um die Münze zu werfen, und das Ergebnis wird auf dem Bildschirm angezeigt. Dieses Projekt demonstriert grundlegende Webentwicklungstechniken und bietet eine praktische Möglichkeit, Ihre Front-End-Fähigkeiten zu üben.
Hier ein Überblick über die Projektstruktur:
Flip-Coin/ ├── index.html ├── style.css └── script.js
Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:
Klonen Sie das Repository:
git clone https://github.com/abhishekgurjar-in/Flip-Coin.git
Öffnen Sie das Projektverzeichnis:
cd Flip-Coin
Führen Sie das Projekt aus:
Die Datei index.html definiert die Struktur der Flip Coin-Anwendung, einschließlich der Schaltfläche und des Bereichs zur Anzeige des Ergebnisses. Hier ist ein Ausschnitt:
Flip Coin Flipping your fate with a click
Erstellen Sie eine Flip-Coin-Website: 0
Tails: 0
Die style.css-Datei formatiert die Flip Coin-Anwendung und fügt eine einfache Animation für den Münzwurf hinzu. Nachfolgend sind einige wichtige Stile aufgeführt:
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Rubik", sans-serif; } body { height: 100%; width: 100%; background-color: #072ac8; } #main { display: flex; justify-content: center; width: 100%; height: 90vh; } #logo_image { width: 250px; height: 100px; background: url(./assets/original-68bc1d89ca3ea0450d8ca9f3a1403d42-removebg-preview.png); background-position: center; background-size: cover; align-items: center; justify-content: center; } .container { background: #a2d6f9; width: 700px; height: 500px; padding: 80px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 15px 30px 35px rgba(0, 0, 0, 0.1); border-radius: 10px; -webkit-perspective: 300px; perspective: 300px; } .container p { text-align: center; font-size: 20px; } .stats { display: flex; align-items: center; justify-content: space-between; color: #101020; font-weight: 500; line-height: 50px; font-size: 20px; } .coin { height: 150px; width: 150px; position: relative; margin: 50px auto; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .tails { transform: rotateX(180deg); } .buttons { display: flex; justify-content: center; align-items: center; } .coin img { width: 145px; } .heads, .tails { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; } button { width: 260px; padding: 10px 0; border: 2.5px solid black; font-size: 22px; border-radius: 5px; cursor: pointer; } #flip-button { background: #072ac8; color: white; } #flip-button:disabled { background-color: #e1e0ee; color: #101020; border-color: #e1e0ee; } #reset-button { background: #fff; color: #072ac8; } .footer { margin: 20px; text-align: center; color: white; } @keyframes spin-tails { 0% { transform: rotateX(0); } 100% { transform: rotateX(1980deg); } } @keyframes spin-heads { 0% { transform: rotateX(0); } 100% { transform: rotateX(2160deg); } }
Die Datei script.js enthält die Logik zum Werfen der Münze und zur Anzeige des Ergebnisses. Hier ist ein Ausschnitt:
let tails = 0; let heads = 0; // Added heads variable definition let coin = document.querySelector(".coin"); let flipBtn = document.querySelector("#flip-button"); let resetBtn = document.querySelector("#reset-button"); let flipSound = document.querySelector("#flip-sound"); flipBtn.addEventListener("click", () => { flipSound.currentTime = 0; flipSound.play(); let i = Math.floor(Math.random() * 2); coin.style.animation = "none"; if (i) { setTimeout(() => { coin.style.animation = "spin-heads 3s forwards"; }, 100); heads++; } else { setTimeout(() => { coin.style.animation = "spin-tails 3s forwards"; }, 100); tails++; } setTimeout(updateStatus, 3000); disableButton(); }); function updateStatus() { document.querySelector("#heads-count").textContent = `Erstellen Sie eine Flip-Coin-Website: ${heads}`; document.querySelector("#tails-count").textContent = `Tails: ${tails}`; } function disableButton() { flipBtn.disabled = true; setTimeout(() => { flipBtn.disabled = false; }, 3000); } resetBtn.addEventListener("click", () => { coin.style.animation = "none"; // Fixed typo: "aniamtion" to "animation" heads = 0; tails = 0; updateStatus(); });
Hier können Sie sich die Live-Demo des Flip Coin-Projekts ansehen.
Das Erstellen der Flip Coin-Anwendung war eine unterhaltsame und lehrreiche Erfahrung. Es handelt sich um ein einfaches Projekt, das zeigt, wie man interaktive Webelemente mit HTML, CSS und JavaScript erstellt. Ich hoffe, dass Sie es nützlich finden und Freude daran haben, damit zu experimentieren. Viel Spaß beim Codieren!
Dieses Projekt wurde als Teil meiner kontinuierlichen Reise entwickelt, um meine Front-End-Entwicklungsfähigkeiten mit praktischen und interaktiven Webanwendungen zu verbessern.
Das obige ist der detaillierte Inhalt vonErstellen Sie eine Flip-Coin-Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
