Skip to content

Commit 427439d

Browse files
NaeuCodeNaeuCode
committed
Adding Day #22
1 parent 3751258 commit 427439d

File tree

17 files changed

+1040
-0
lines changed

17 files changed

+1040
-0
lines changed

‎Day #21 - Flip a Coin Game/21-ScreenShot.png

314 KB
Loading

‎Day #21 - Flip a Coin Game/README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Day #21
2+
3+
### Flip a Coin Game
4+
In this tutorial ([Open in Youtube](https://youtu.be/ZqqU15oj-ZU)), I am gonna showing to you how to code simple flip a coin game! this heads and tails game have very simple code and it's best js tutorial for beginners❗️
5+
6+
# Screenshot
7+
Here we have project screenshot :
8+
9+
![screenshot](21-ScreenShot.png)

‎Day #21 - Flip a Coin Game/heads.svg

Lines changed: 13 additions & 0 deletions
Loading

‎Day #21 - Flip a Coin Game/index.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css">
7+
<title>Day #21 - Flip Coin Game | NaeuCode</title>
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="stats">
12+
<p id="heads-count">Heads: 0</p>
13+
<p id="tails-count">Tails: 0</p>
14+
</div>
15+
16+
<div class="coin" id="coin">
17+
<div class="heads">
18+
<img src="heads.svg" />
19+
</div>
20+
<div class="tails">
21+
<img src="tails.svg" />
22+
</div>
23+
</div>
24+
25+
<div class="buttons">
26+
<button id="flip-button">Flip Coin</button>
27+
<button id="reset-button">Reset</button>
28+
</div>
29+
</div>
30+
31+
<script src="script.js"></script>
32+
</body>
33+
</html>

‎Day #21 - Flip a Coin Game/script.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
let heads = 0;
2+
let tails = 0;
3+
let coin = document.querySelector(".coin");
4+
let flipBtn = document.querySelector("#flip-button");
5+
let resetBtn = document.querySelector("#reset-button");
6+
7+
flipBtn.addEventListener("click", () => {
8+
let i = Math.floor(Math.random() * 2);
9+
coin.style.animation = "none";
10+
if (i) {
11+
setTimeout(function() {
12+
coin.style.animation = "spin-heads 3s forwards";
13+
}, 100);
14+
heads++;
15+
}else {
16+
setTimeout(function() {
17+
coin.style.animation = "spin-tails 3s forwards";
18+
}, 100);
19+
tails++;
20+
}
21+
22+
setTimeout(updateStats, 3000);
23+
disableButton();
24+
});
25+
26+
function updateStats() {
27+
document.querySelector("#heads-count").textContent = `Heads: ${heads}`;
28+
document.querySelector("#tails-count").textContent = `Tails: ${tails}`;
29+
}
30+
31+
function disableButton() {
32+
flipBtn.disabled = true;
33+
setTimeout(function () {
34+
flipBtn.disabled = false;
35+
}, 3000);
36+
}
37+
38+
resetBtn.addEventListener("click", () => {
39+
coin.style.animation = "none";
40+
heads = 0;
41+
tails = 0;
42+
updateStats();
43+
})

‎Day #21 - Flip a Coin Game/style.css

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: 'Roboto', sans-serif;
8+
}
9+
10+
body {
11+
height: 100vh;
12+
background: linear-gradient(185deg, #f8bf03, #110a0a);
13+
}
14+
15+
.container{
16+
background: #fff;
17+
width: 400px;
18+
padding: 50px;
19+
position: absolute;
20+
transform: translate(-50%, -50%);
21+
top: 50%;
22+
left: 50%;
23+
box-shadow: 15px 30px 35px rgba(0, 0, 0, .1);
24+
border-radius: 10px;
25+
-webkit-perspective: 300px;
26+
perspective: 300px;
27+
}
28+
29+
.stats{
30+
display: flex;
31+
justify-content: space-between;
32+
color: #110a0a;
33+
font-weight: 500;
34+
}
35+
36+
.coin {
37+
height: 150px;
38+
width: 150px;
39+
position: relative;
40+
margin: 50px auto;
41+
-webkit-transform-style: preserve-3d;
42+
transform-style: preserve-3d;
43+
}
44+
45+
.tails{
46+
transform: rotateX(180deg);
47+
}
48+
49+
.buttons{
50+
display: flex;
51+
flex-direction: column;
52+
justify-content: space-between;
53+
align-items: center;
54+
gap: 1rem;
55+
}
56+
57+
.coin img{
58+
width: 150px;
59+
}
60+
61+
.heads , .tails{
62+
position: absolute;
63+
width: 100%;
64+
height: 100%;
65+
backface-visibility: hidden;
66+
-webkit-backface-visibility: hidden;
67+
}
68+
69+
button{
70+
width: 120px;
71+
padding: 10px 0 ;
72+
border: 0;
73+
cursor: pointer;
74+
}
75+
76+
#flip-button{
77+
background: #f8bf03;
78+
color: #110a0a;
79+
border: 1px solid #101020;
80+
border-radius: 10px;
81+
}
82+
83+
#flip-button:disabled{
84+
background-color: #fff;
85+
color: #101020;
86+
border-color: #e1e0ee;
87+
}
88+
89+
#reset-button {
90+
background: #fff;
91+
color: #101020;
92+
}
93+
94+
#reset-button:hover{
95+
background: #fff;
96+
color: #ff0101;
97+
}
98+
99+
@keyframes spin-tails{
100+
0% {
101+
transform: rotateX(0);
102+
}
103+
100%{
104+
transform: rotateX(1980deg);
105+
}
106+
}
107+
108+
@keyframes spin-heads {
109+
0% {
110+
transform: rotateX(0);
111+
}
112+
100% {
113+
transform: rotateX(2160deg);
114+
}
115+
}

‎Day #21 - Flip a Coin Game/tails.svg

Lines changed: 13 additions & 0 deletions
Loading

‎Day #22 - Responsive Animated Contact Form/22-ScreenShot.png

534 KB
Loading

‎Day #22 - Responsive Animated Contact Form/README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Day #22
2+
3+
### Animated Contact Form
4+
In this tutorial ([Open in Youtube]()), I am gonna showing to you how to code Responsive Animated Contact Form ! this Forms and Images animation it's best tutorial for beginners❗️
5+
6+
# Screenshot
7+
Here we have project screenshot :
8+
9+
![screenshot](22-ScreenShot.png)

‎Day #22 - Responsive Animated Contact Form/img/bg1.jpg

986 KB
Loading

0 commit comments

Comments
 (0)