Créer un site Web Flip Coin

Introduction

Bonjour les développeurs ! Je suis ravi de partager mon dernier projet : une application Flip 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

Le Flip Coin est une application Web qui simule le lancer 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

• Simulation de lancer de pièces : 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.
• Conception réactive : L'application est conçue pour bien fonctionner 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

• 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 lancer des pièces et les interactions des utilisateurs.

Installation

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

1. Cloner le dépôt :
   

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

2. Ouvrez le répertoire du projet :
   

   cd Flip-Coin
   

3. Exécuter le projet :

   • Ouvrez le fichier index.html dans un navigateur Web pour utiliser l'application Flip Coin.

Usage

1. Ouvrez le site Web dans un navigateur Web.
2. Cliquez sur le bouton « Flip Coin » pour lancer la pièce.
3. Affichez le résultat sur l'écran, indiquant si la pièce est tombée sur pile ou sur face.

Explication du code

HTML

Le fichier index.html définit la structure de l'application Flip Coin, notamment le bouton et la zone d'affichage du résultat. En voici un extrait :

  
    <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>
  
  
    <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">Créer un site 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="Créer un site 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"></source>
            Your browser does not support the audio element.
          </audio>
        </div>
      </div>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  

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

Javascript

Le fichier script.js contient la logique pour lancer la pièce et afficher le résultat. En 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();
});

Démo en direct

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

Conclusion

Construire 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.

Auteur

• Abhishek Gurjar
  • Profil GitHub

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!