<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Comment Generator</title>
<link rel="stylesheet" href="styles.css">
<script defer src="script.js"></script>
</head>
<body>
<div class="container">
<h1>AI Comment Generator</h1>
<select id="commentType">
<option value="positive">Positive</option>
<option value="funny">Funny</option>
<option value="motivational">Motivational</option>
<option value="random">Random</option>
</select>
<button onclick="generateComment()">Generate Comment</button>
<div id="commentBox" class="output"></div>
<button id="copyBtn">📋 Copy</button>
<p id="message"></p>
</div>
</body>
</html>
/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: linear-gradient(135deg, #FF5733, #3498DB);
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
padding: 20px;
}
.container {
background: rgba(255, 255, 255, 0.2);
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
max-width: 600px;
width: 100%;
}
h1 {
margin-bottom: 15px;
}
select, button {
width: 100%;
padding: 10px;
margin: 10px 0;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
select {
background: #34495E;
color: white;
}
button {
background: #2ECC71;
color: white;
}
button:hover {
opacity: 0.8;
}
.output {
background: #1A1A1A;
padding: 15px;
border-radius: 5px;
font-size: 16px;
color: white;
margin-top: 10px;
min-height: 50px;
}
#copyBtn {
background: #F39C12;
}
#message {
margin-top: 10px;
font-size: 14px;
color: yellow;
}
document.getElementById('copyBtn').addEventListener('click', copyToClipboard);
const comments = {
positive: [
"Great job! Keep up the amazing work!",
"Your effort really shows, well done!",
"You're making a huge impact, keep going!",
"Fantastic! Your skills are impressive!"
],
funny: [
"I'd give you a gold star, but I'm out of stickers!",
"Your comment game is strong!",
"Are you a comedian? Because that was hilarious!",
"Certified legend status achieved!"
],
motivational: [
"Believe in yourself! You're capable of great things.",
"Every step you take brings you closer to success.",
"Don't stop now! Your journey is just beginning.",
"You have everything it takes to achieve greatness!"
],
random: [
"The universe is smiling at you today!",
"Amazing things are on the horizon for you.",
"Your energy is contagious, spread the positivity!",
"Keep being awesome, the world needs more people like you!"
]
};
function generateComment() {
let type = document.getElementById('commentType').value;
let commentList = comments[type];
let randomComment = commentList[Math.floor(Math.random() * commentList.length)];
document.getElementById('commentBox').innerText = randomComment;
document.getElementById('message').textContent = "";
}
function copyToClipboard() {
let commentText = document.getElementById('commentBox').innerText;
if (commentText === '') {
document.getElementById('message').textContent = "Nothing to copy!";
return;
}
navigator.clipboard.writeText(commentText).then(() => {
document.getElementById('message').textContent = "Copied to Clipboard!";
});
}
