Bina Laman Web Flip Coin

pengenalan

Helo, pembangun! Saya teruja untuk berkongsi projek terbaharu saya: aplikasiFlip 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

TheFlip Coinialah 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 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 membalikkan syiling dan mengendalikan interaksi pengguna.

Struktur Projek

Berikut ialah gambaran keseluruhan struktur projek:

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

• 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 pelik duit syiling dan interaksi pengguna.

Pemasangan

Untuk memulakan projek, ikut langkah berikut:

1. Klon repositori:
   

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

   Salin selepas log masuk

2. Buka direktori projek:
   

   cd Flip-Coin

   Salin selepas log masuk

3. Jalankan projek:

   • Buka fail index.html dalam pelayar web untuk menggunakan aplikasi Flip Coin.

Penggunaan

1. Buka laman webdalam pelayar web.
2. Klik butang "Flip Coin"untuk menterbalikkan syiling.
3. Lihat keputusanpada 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:

        
  
 
 
 
Flipping your fate with a click
 
 
Bina Laman Web Flip Coin: 0
 
Tails: 0
 
 
 
  
 
  
 
 
 Flip coin Reset  
 
 
 
 
Made with ❤️ by Abhishek Gurjar
 
  

CSS

Fail style.css menggayakan aplikasi Flip Coin, menambahkan animasi ringkas untuk flip coin. Di bawah adalah 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); } }

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

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 menikmati percubaan dengannya. 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.

Pengarang

• Abhishek Gurjar
  • Profil GitHub

Atas ialah kandungan terperinci Bina Laman Web Flip Coin. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!