Skip to content

Commit cd3d482

Browse files
MDJAminMDJAmin
committed
feat: Block Chain Collage Code 1 - 14.1
1 parent 9cb5064 commit cd3d482

3 files changed

Lines changed: 226 additions & 0 deletions

File tree

‎Block Chain Collage Code 1/14/14.1/css/style.css‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
/* Reset default margins and fonts */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
font-family: "Poppins", sans-serif;
7+
}
8+
9+
body {
10+
height: 100vh;
11+
background: linear-gradient(135deg, #6a5acd, #ff69b4, #00bfff);
12+
background-size: 300% 300%;
13+
animation: gradientShift 8s ease infinite;
14+
display: flex;
15+
flex-direction: column;
16+
align-items: center;
17+
justify-content: center;
18+
color: white;
19+
text-align: center;
20+
}
21+
22+
/* Gradient animation */
23+
@keyframes gradientShift {
24+
0% {
25+
background-position: 0% 50%;
26+
}
27+
50% {
28+
background-position: 100% 50%;
29+
}
30+
100% {
31+
background-position: 0% 50%;
32+
}
33+
}
34+
35+
/* Title */
36+
h1 {
37+
font-size: 3rem;
38+
margin-bottom: 1.5rem;
39+
text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
40+
}
41+
42+
/* Input field */
43+
#guess {
44+
padding: 0.7rem 1.2rem;
45+
font-size: 1rem;
46+
border: none;
47+
border-radius: 25px;
48+
outline: none;
49+
width: 200px;
50+
text-align: center;
51+
margin-bottom: 1rem;
52+
background: rgba(255, 255, 255, 0.9);
53+
color: #333;
54+
transition: 0.3s;
55+
}
56+
57+
#guess:focus {
58+
box-shadow: 0 0 15px rgba(255, 105, 180, 0.8);
59+
}
60+
61+
/* Buttons */
62+
button {
63+
padding: 0.7rem 1.5rem;
64+
font-size: 1rem;
65+
margin: 0.5rem;
66+
border: none;
67+
border-radius: 30px;
68+
cursor: pointer;
69+
transition: all 0.3s ease;
70+
color: white;
71+
font-weight: bold;
72+
}
73+
74+
#submit {
75+
background: linear-gradient(135deg, #6a5acd, #00bfff);
76+
}
77+
78+
#reset {
79+
background: linear-gradient(135deg, #ff69b4, #ff7bff);
80+
}
81+
82+
button:hover {
83+
transform: scale(1.05);
84+
box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
85+
}
86+
87+
/* Text feedback */
88+
#hint,
89+
#showLastNumber,
90+
#chance {
91+
margin-top: 1rem;
92+
font-size: 1.2rem;
93+
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
94+
}
95+
96+
/* Optional: subtle glowing border for feedback */
97+
#hint {
98+
padding: 0.5rem 1rem;
99+
border-radius: 20px;
100+
background: rgba(255, 255, 255, 0.1);
101+
}

‎Block Chain Collage Code 1/14/14.1/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1.0"
8+
/>
9+
<link
10+
rel="stylesheet"
11+
href="css/style.css"
12+
/>
13+
<title>Guess The number</title>
14+
</head>
15+
<body>
16+
<h1>Guess The number!</h1>
17+
<input
18+
type="text"
19+
id="guess"
20+
/>
21+
<button id="submit">Submit</button>
22+
<button id="reset">Reset the game</button>
23+
<h2 id="chance"></h2>
24+
<p id="hint"></p>
25+
<p id="showLastNumber"></p>
26+
27+
<script src="js/script.js"></script>
28+
</body>
29+
</html>

‎Block Chain Collage Code 1/14/14.1/js/script.js‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
// let x = Math.random();
2+
// console.log(x);
3+
4+
// let y = Math.trunc(4.337249);
5+
// console.log(y);
6+
7+
// let z = Math.floor(9.98);
8+
// console.log(z);
9+
10+
// let a = Math.ceil(7.000001)
11+
// console.log(a)
12+
13+
// let b = Math.round(8.6);
14+
// console.log(b);
15+
16+
// let b2 = Math.round(8.4);
17+
// console.log(b2);
18+
19+
// let c = Math.max(5, 12, 8, 25, 1);
20+
// console.log(c);
21+
22+
// let e = Math.min(5, 12, 8, 25, 1);
23+
// console.log(e);
24+
25+
// let f = Math.pow(2, 10);
26+
// console.log(f);
27+
28+
// let q = Math.sqrt(16);
29+
// console.log(q);
30+
31+
// let random = Math.floor(Math.random() * 200 + 1);
32+
// console.log(random);
33+
34+
// ________________________________________________
35+
36+
// setTimeout(() => {
37+
// console.log(0);
38+
// }, 0); // 3
39+
40+
// console.log(1); // 1
41+
42+
// setTimeout(() => {
43+
// console.log(2);
44+
// }, 1000); // 5
45+
46+
// setTimeout(() => {
47+
// console.log(3);
48+
// }, 500); // 4
49+
50+
// console.log(4); // 2
51+
52+
"use strict";
53+
const guessInp = document.querySelector("#guess");
54+
const submitBtn = document.querySelector("#submit");
55+
const resetBtn = document.querySelector("#reset");
56+
const chanceEl = document.querySelector("#chance");
57+
const hintEl = document.querySelector("#hint");
58+
const lastGuessEl = document.querySelector("#showLastNumber");
59+
let chance = 5;
60+
let randomNum = Math.trunc(Math.random() * 20 + 1);
61+
62+
chanceEl.textContent = `chance: ${chance}`;
63+
submitBtn.addEventListener("click", () => {
64+
chance--;
65+
chanceEl.textContent = `chance: ${chance}`;
66+
const value = guessInp.value;
67+
guessInp.value = "";
68+
lastGuessEl.textContent += ` ${value}`;
69+
if (randomNum == value) {
70+
guessInp.disable = true;
71+
submitBtn.disable = true;
72+
hintEl.textContent = "You Winnnnnnn!🎉";
73+
} else {
74+
if (chance > 0) {
75+
if (randomNum > value) {
76+
hintEl.textContent = "Your Guess is lower than random number";
77+
} else {
78+
hintEl.textContent = "Your Guess is higher than random number";
79+
}
80+
} else {
81+
guessInp.disable = true;
82+
submitBtn.disable = true;
83+
hintEl.textContent = `you lose, random number was : ${randomNum} 😂🗿`;
84+
}
85+
}
86+
});
87+
88+
resetBtn.addEventListener("click", () => {
89+
guessInp.disable = false;
90+
submitBtn.disable = false;
91+
chance = 5;
92+
chanceEl.textContent = `chance: ${chance}`;
93+
hintEl.textContent = "";
94+
lastGuessEl.textContent = "";
95+
randomNum = Math.trunc(Math.random() * 20 + 1);
96+
});

0 commit comments

Comments
 (0)