Hallo Entwickler! Ich freue mich, mein neuestes Projekt vorzustellen: eine Flip 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.
Der Flip Coin ist 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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flip Coin</title>
<link rel="stylesheet" href="style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div id="main">
<div id="logo_image"></div>
<div class="container">
<p>Flipping your fate with a click</p>
<div class="stats">
<p id="heads-count">Erstellen Sie eine Flip-Coin-Website: 0</p>
<p id="tails-count">Tails: 0</p>
</div>
<div class="coin">
<div class="heads">
<img
src="https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/c82f3949ec4ba9503c875fc0fa7faa4a71053db7/Day%20%2307%20-%20Flip%20a%20Coin%20Game/heads.svg"
alt="Erstellen Sie eine Flip-Coin-Website"
/>
</div>
<div class="tails">
<img
src="https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/c82f3949ec4ba9503c875fc0fa7faa4a71053db7/Day%20%2307%20-%20Flip%20a%20Coin%20Game/tails.svg"
alt="Tails"
/>
</div>
</div>
<div id="buttons">
<button id="flip-button">Flip coin</button>
<button id="reset-button">Reset</button>
<audio id="flip-sound">
<source src="./assets/coin-flip-88793.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</div>
</div>
</div>
<div class="footer">
<p>Made with ❤️ by Abhishek Gurjar</p>
</div>
</body>
</html>
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();
});
Sie können sich hier 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!
