안녕하세요, 개발자 여러분! 저의 최신 프로젝트인 Flip Coin 애플리케이션을 공유하게 되어 기쁩니다. 이 간단하면서도 재미있는 프로젝트를 사용하면 고전적인 동전 던지기를 시뮬레이션할 수 있으며 의사 결정이나 재미를 위해 완벽합니다. 이는 HTML, CSS 및 JavaScript를 사용하여 대화형 웹 애플리케이션을 만드는 방법을 보여주는 훌륭한 예입니다.
Flip Coin은 동전 뒤집기를 시뮬레이션하는 웹 기반 애플리케이션입니다. 사용자는 버튼을 클릭하여 동전을 뒤집을 수 있으며 결과가 화면에 표시됩니다. 이 프로젝트는 기본 웹 개발 기술을 보여주고 프런트엔드 기술을 연습할 수 있는 실습 방법을 제공합니다.
프로젝트 구조 개요는 다음과 같습니다.
Flip-Coin/ ├── index.html ├── style.css └── script.js
프로젝트를 시작하려면 다음 단계를 따르세요.
저장소 복제:
git clone https://github.com/abhishekgurjar-in/Flip-Coin.git
프로젝트 디렉토리 열기:
cd Flip-Coin
프로젝트 실행:
index.html 파일은 버튼과 결과를 표시하는 영역을 포함하여 Flip Coin 애플리케이션의 구조를 정의합니다. 다음은 일부 내용입니다.
<!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">플립코인 웹사이트 구축: 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" />
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>
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를 사용하여 대화형 웹 요소를 만드는 방법을 보여주는 간단한 프로젝트입니다. 유용하게 사용하시고 실험해 보시길 바랍니다. 즐거운 코딩하세요!
이 프로젝트는 실용적이고 대화형 웹 애플리케이션을 통해 프런트엔드 개발 기술을 향상시키려는 지속적인 여정의 일환으로 개발되었습니다.
위 내용은 플립코인 웹사이트 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
