Scribd
Upload
9 views3 pages

!DOCTYPE HTML

Uploaded by

lalsingh42683673
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
9 views3 pages

!DOCTYPE HTML

Uploaded by

lalsingh42683673
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube Channel Simulator</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f0f0f0;
color: #333;
margin: 0;
height: 100vh;
justify-content: center;
}
.game-container {
width: 300px;
padding: 20px;
text-align: center;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.title {
font-size: 24px;
margin-bottom: 10px;
}
.button {
width: 100%;
padding: 10px;
font-size: 18px;
margin: 10px 0;
border: none;
border-radius: 5px;
cursor: pointer;
color: white;
}
.start {
background-color: #ff0000;
}
.action {
background-color: #4CAF50;
}
.progress {
font-size: 16px;
margin-top: 10px;
color: #555;
}
</style>
</head>
<body>
<div class="game-container">
<div class="title">Create Your YouTube Channel!</div>
<button class="button start" onclick="startGame()">Start Game</button>
<div id="gameContent"></div>
<div class="progress" id="progressText"></div>
</div>

<script>
let step = 0;
let subscribers = 0;

function startGame() {
document.getElementById("gameContent").innerHTML = `
<div>Choose a Channel Name:</div>
<input type="text" id="channelName" placeholder="Enter channel
name" />
<button class="button action"
onclick="chooseContent()">Next</button>
`;
document.getElementById("progressText").innerText = "Step 1: Set your
channel name.";
}

function chooseContent() {
const channelName = document.getElementById("channelName").value;
if (channelName.trim() === "") {
alert("Please enter a channel name.");
return;
}
step++;
document.getElementById("gameContent").innerHTML = `
<div>Welcome, <strong>${channelName}</strong>!</div>
<div>Choose Content Type:</div>
<button class="button action"
onclick="gainSubscribers('Gaming')">Gaming</button>
<button class="button action"
onclick="gainSubscribers('Education')">Education</button>
<button class="button action"
onclick="gainSubscribers('Vlogs')">Vlogs</button>
`;
document.getElementById("progressText").innerText = "Step 2: Choose
your content type.";
}

function gainSubscribers(contentType) {
step++;
subscribers += Math.floor(Math.random() * 100) + 1; // Random
subscribers gained
document.getElementById("gameContent").innerHTML = `
<div>You chose <strong>${contentType}</strong> content!</div>
<button class="button action" onclick="createVideo()">Create Your
First Video</button>
`;
document.getElementById("progressText").innerText = `Step 3: Start
creating videos. Current Subscribers: ${subscribers}`;
}

function createVideo() {
step++;
subscribers += Math.floor(Math.random() * 200) + 50; // More
subscribers gained
document.getElementById("gameContent").innerHTML = `
<div>Congratulations! Your video got views!</div>
<button class="button action"
onclick="gainSubscribersMore()">Promote Channel</button>
`;
document.getElementById("progressText").innerText = `Great! You now
have ${subscribers} subscribers. Keep growing!`;
}

function gainSubscribersMore() {
subscribers += Math.floor(Math.random() * 500) + 100;
document.getElementById("progressText").innerText = `You're now growing
rapidly! Total Subscribers: ${subscribers}.`;
document.getElementById("gameContent").innerHTML = `
<div>You're becoming popular on YouTube!</div>
<button class="button action" onclick="keepGrowing()">Keep Growing!
</button>
`;
}

function keepGrowing() {
subscribers += Math.floor(Math.random() * 1000) + 500;
document.getElementById("progressText").innerText = `Amazing! You now
have ${subscribers} subscribers. You're a YouTube Star!`;
document.getElementById("gameContent").innerHTML = `
<div>Congratulations on becoming a YouTube Star with ${subscribers}
subscribers!</div>
<button class="button start" onclick="startGame()">Play
Again</button>
`;
}
</script>
</body>
</html>

You might also like