<div class="badge-container">
<h2>1 Like = 1 Story Badge</h2>
<p>Click the like button to earn a Story Badge. The more likes, the more badges!</p>
<button class="like-btn" onclick="increaseLike()">Like</button>
<p class="count">Likes: <span id="likeCount">0</span></p>
</div>
<script>
let likeCount = 0;
function increaseLike() {
likeCount++;
document.getElementById("likeCount").innerText = likeCount;
}
</script>
Like to Earn a Story Badge
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
.badge-container {
background-color: #f8f9fa;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
display: inline-block;
}
.like-btn {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
}
.like-btn:hover {
background-color: #0056b3;
}
.count {
font-size: 20px;
font-weight: bold;
margin-top: 10px;
}
9 Likes