Créer un site Web Flip Coin-tutoriel CSS-php.cn

Build a Flip Coin Website

Introduction

Bonjour les développeurs ! Je suis ravi de partager mon dernier projet : une applicationFlip Coin. Ce projet simple mais amusant vous permet de simuler le tirage au sort classique, parfait pour prendre des décisions ou simplement pour s'amuser. C'est un excellent exemple de la façon de créer des applications Web interactives à l'aide de HTML, CSS et JavaScript.

Aperçu du projet

LeFlip Coinest une application Web qui simule le lancement d'une pièce de monnaie. Les utilisateurs peuvent cliquer sur un bouton pour lancer la pièce et le résultat sera affiché à l'écran. Ce projet démontre les techniques de base de développement Web et fournit un moyen pratique de mettre en pratique vos compétences front-end.

Caractéristiques

Coin Flip Simulation: cliquez sur un bouton pour lancer la pièce et voir si elle atterrit sur pile ou sur face.
Commentaire visuel: le résultat de la pièce est affiché avec une animation simple pour améliorer l'expérience utilisateur.
Responsive Design: L'application est conçue pour fonctionner correctement sur divers appareils.

Technologies utilisées

HTML: Fournit la structure de l'application Flip Coin.
CSS: stylise l'application et ajoute des animations pour une expérience visuellement attrayante.
JavaScript: implémente la logique de tirage au sort et gère les interactions des utilisateurs.

Structure du projet

Voici un aperçu de la structure du projet :

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

Copier après la connexion

index.html: Contient la structure HTML de l'application Flip Coin.
style.css: inclut des styles CSS pour un design épuré et interactif.
script.js: Gère la logique de tirage au sort et les interactions des utilisateurs.

Installation

Pour démarrer le projet, suivez ces étapes :

Cloner le référentiel:

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

Copier après la connexion

Ouvrez le répertoire du projet:
```
cd Flip-Coin
```
Copier après la connexion
Exécuter le projet:
- Ouvrez le fichier index.html dans un navigateur Web pour utiliser l'application Flip Coin.

Usage

Ouvrez le site Webdans un navigateur Web.
Cliquez sur le bouton "Flip Coin"pour lancer la pièce.
Affichez le résultatsur l'écran, indiquant si la pièce a atterri sur pile ou sur face.

Explication du code

HTML

Le fichier index.html définit la structure de l'application Flip Coin, y compris le bouton et la zone pour afficher le résultat. Voici un extrait :

     Flip Coin   
   
  Flipping your fate with a click
  Créer un site Web Flip Coin: 0
 Tails: 0
 
    
   
 
     
 
 
  Made with ❤️ by Abhishek Gurjar

Copier après la connexion

CSS

Le fichier style.css stylise l'application Flip Coin, en ajoutant une animation simple pour le tirage au sort. Voici quelques styles clés :

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

Copier après la connexion

Javascript

Le fichier script.js contient la logique pour lancer la pièce et afficher le résultat. Voici un extrait :

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 = `Créer un site 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(); });

Copier après la connexion

Démo en direct

Vous pouvez consulter la démo en direct du projet Flip Coin ici.

Conclusion

Créer l'application Flip Coin a été une expérience amusante et éducative. Il s'agit d'un projet simple qui montre comment créer des éléments Web interactifs à l'aide de HTML, CSS et JavaScript. J'espère que vous le trouverez utile et que vous apprécierez de l'expérimenter. Bon codage !

Crédits

Ce projet a été développé dans le cadre de mon parcours continu visant à améliorer mes compétences en développement front-end avec des applications Web pratiques et interactives.