Bina Laman Web Flip Coin-tutorial css-php.cn

Bina Laman Web Flip Coin

PHPz

Lepaskan： 2024-08-25 20:31:03

asal

1055 orang telah melayarinya

Build a Flip Coin Website

pengenalan

Helo, pembangun! Saya teruja untuk berkongsi projek terbaharu saya: aplikasi Flip Coin. Projek ringkas tetapi menyeronokkan ini membolehkan anda mensimulasikan flip syiling klasik, sesuai untuk membuat keputusan atau hanya untuk keseronokan. Ini adalah contoh terbaik tentang cara membuat aplikasi web interaktif menggunakan HTML, CSS dan JavaScript.

Gambaran Keseluruhan Projek

Flip Coin ialah aplikasi berasaskan web yang mensimulasikan flipping syiling. Pengguna boleh mengklik butang untuk membalikkan syiling, dan hasilnya akan dipaparkan pada skrin. Projek ini menunjukkan teknik pembangunan web asas dan menyediakan cara praktikal untuk melatih kemahiran bahagian hadapan anda.

Ciri-ciri

Simulasi Flip Syiling: Klik butang untuk membalikkan syiling dan lihat sama ada ia hinggap di kepala atau ekor.
Maklum Balas Visual: Hasil syiling dipaparkan dengan animasi ringkas untuk meningkatkan pengalaman pengguna.
Reka Bentuk Responsif: Aplikasi ini direka bentuk untuk berfungsi dengan baik pada pelbagai peranti.

Teknologi yang Digunakan

HTML: Menyediakan struktur untuk aplikasi Flip Coin.
CSS: Menggayakan aplikasi dan menambah animasi untuk pengalaman visual yang menarik.
JavaScript: Melaksanakan logik membalik syiling dan mengendalikan interaksi pengguna.

Struktur Projek

Berikut ialah gambaran keseluruhan struktur projek:

Flip-Coin/
├── index.html
├── style.css
└── script.js

Salin selepas log masuk

index.html: Mengandungi struktur HTML untuk aplikasi Flip Coin.
style.css: Termasuk gaya CSS untuk reka bentuk yang bersih dan interaktif.
script.js: Mengurus logik selak syiling dan interaksi pengguna.

Pemasangan

Untuk memulakan projek, ikut langkah berikut:

Klon repositori:

git clone https://github.com/abhishekgurjar-in/Flip-Coin.git

Salin selepas log masuk

Buka direktori projek:
```
cd Flip-Coin
```
Salin selepas log masuk
Jalankan projek:
- Buka fail index.html dalam pelayar web untuk menggunakan aplikasi Flip Coin.

Penggunaan

Buka tapak web dalam penyemak imbas web.
Klik butang "Flip Coin" untuk menterbalikkan syiling.
Lihat keputusan pada skrin, menunjukkan sama ada syiling itu mendarat di kepala atau ekor.

Penerangan Kod

HTML

Fail index.html mentakrifkan struktur aplikasi Flip Coin, termasuk butang dan kawasan untuk memaparkan hasilnya. Berikut adalah coretan:

<!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">Bina Laman Web Flip Coin: 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="Bina Laman Web Flip Coin"
            />
          </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>

Salin selepas log masuk

CSS

Fail style.css menggayakan aplikasi Flip Coin, menambahkan animasi ringkas untuk flip coin. Di bawah ialah beberapa gaya utama:

@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);
  }
}

Salin selepas log masuk

JavaScript

Fail script.js mengandungi logik untuk membalikkan syiling dan memaparkan hasilnya. Berikut adalah coretan:

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 = `Bina Laman Web Flip Coin: ${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();
});

Salin selepas log masuk

Demo Langsung

Anda boleh melihat demo langsung projek Flip Coin di sini.

Kesimpulan

Membina aplikasi Flip Coin merupakan pengalaman yang menyeronokkan dan mendidik. Ia merupakan projek mudah yang menunjukkan cara mencipta elemen web interaktif menggunakan HTML, CSS dan JavaScript. Saya harap anda mendapati ia berguna dan seronok mencubanya. Selamat mengekod!

Kredit

Projek ini dibangunkan sebagai sebahagian daripada perjalanan berterusan saya untuk meningkatkan kemahiran pembangunan bahagian hadapan saya dengan aplikasi web praktikal dan interaktif.