플립코인 웹사이트 구축

소개

안녕하세요, 개발자 여러분! 저의 최신 프로젝트인 Flip Coin 애플리케이션을 공유하게 되어 기쁩니다. 이 간단하면서도 재미있는 프로젝트를 사용하면 고전적인 동전 던지기를 시뮬레이션할 수 있으며 의사 결정이나 재미를 위해 완벽합니다. 이는 HTML, CSS 및 JavaScript를 사용하여 대화형 웹 애플리케이션을 만드는 방법을 보여주는 훌륭한 예입니다.

프로젝트 개요

Flip Coin은 동전 뒤집기를 시뮬레이션하는 웹 기반 애플리케이션입니다. 사용자는 버튼을 클릭하여 동전을 뒤집을 수 있으며 결과가 화면에 표시됩니다. 이 프로젝트는 기본 웹 개발 기술을 보여주고 프런트엔드 기술을 연습할 수 있는 실습 방법을 제공합니다.

특징

• 동전 뒤집기 시뮬레이션: 버튼을 클릭하여 동전을 뒤집어 앞면이 나올지 뒷면이 나올지 확인하세요.
• 시각적 피드백: 코인의 결과가 간단한 애니메이션으로 표시되어 사용자 경험을 향상시킵니다.
• 반응형 디자인: 다양한 기기에서 잘 작동하도록 디자인되었습니다.

사용된 기술

• HTML: Flip Coin 애플리케이션의 구조를 제공합니다.
• CSS: 시각적으로 매력적인 경험을 위해 애플리케이션 스타일을 지정하고 애니메이션을 추가합니다.
• JavaScript: 동전 뒤집기 논리를 구현하고 사용자 상호 작용을 처리합니다.

프로젝트 구조

프로젝트 구조 개요는 다음과 같습니다.

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

• index.html: Flip Coin 애플리케이션의 HTML 구조를 포함합니다.
• style.css: 깔끔하고 대화형 디자인을 위한 CSS 스타일을 포함합니다.
• script.js: 동전 뒤집기 로직과 사용자 상호작용을 관리합니다.

설치

프로젝트를 시작하려면 다음 단계를 따르세요.

1. 저장소 복제:
   

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

2. 프로젝트 디렉토리 열기:
   

   cd Flip-Coin
   

3. 프로젝트 실행:

   • 플립코인 애플리케이션을 사용하려면 웹 브라우저에서 index.html 파일을 엽니다.

용법

1. 웹사이트를 엽니다 웹 브라우저에서
2. 동전을 뒤집으려면"동전 뒤집기" 버튼을 클릭하세요.
3. 결과를 화면에서 확인하여 동전이 앞면 또는 뒷면에 떨어졌는지 보여줍니다.

코드 설명

HTML

index.html 파일은 버튼과 결과를 표시하는 영역을 포함하여 Flip Coin 애플리케이션의 구조를 정의합니다. 다음은 일부 내용입니다.

  
    <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">플립코인 웹사이트 구축: 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="플립코인 웹사이트 구축">
          </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

style.css 파일은 Flip Coin 애플리케이션의 스타일을 지정하여 동전 뒤집기에 대한 간단한 애니메이션을 추가합니다. 다음은 몇 가지 주요 스타일입니다.

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

자바스크립트

script.js 파일에는 동전을 던지고 결과를 표시하는 로직이 포함되어 있습니다. 다음은 일부 내용입니다.

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 = `플립코인 웹사이트 구축: ${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();
});

라이브 데모

여기에서 Flip Coin 프로젝트의 라이브 데모를 확인하실 수 있습니다.

결론

Flip Coin 애플리케이션을 구축하는 것은 재미있고 교육적인 경험이었습니다. HTML, CSS 및 JavaScript를 사용하여 대화형 웹 요소를 만드는 방법을 보여주는 간단한 프로젝트입니다. 유용하게 사용하시고 실험해 보시길 바랍니다. 즐거운 코딩하세요!

크레딧

이 프로젝트는 실용적이고 대화형 웹 애플리케이션을 통해 프런트엔드 개발 기술을 향상시키려는 지속적인 여정의 일환으로 개발되었습니다.

작가

• 아비셰크 구자르
  • GitHub 프로필

위 내용은 플립코인 웹사이트 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!