Вот пример генератора поздравлений с днем рождения с использованием HTML, CSS и JavaScript:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Birthday Wishes Generator</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Birthday Wishes Generator</h1>
<form id="birthdayForm">
<label for="name">Recipient's Name:</label>
<input type="text" id="name" required>
<button type="submit">Generate</button>
</form>
<div id="output"></div>
<script src="script.js"></script>
</body>
</html>
CSS (styles.css):
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: #333;
}
form {
margin-top: 20px;
}
label {
display: block;
margin-bottom: 10px;
}
input[type="text"] {
padding: 5px;
font-size: 16px;
}
button[type="submit"] {
padding: 8px 20px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
JavaScript (script.js):
document.getElementById('birthdayForm').addEventListener('submit', function(event) {
event.preventDefault();
var name = document.getElementById('name').value;
var wishes = generateWishes(name);
document.getElementById('output').innerHTML = wishes;
});
function generateWishes(name) {
var wishes = 'Happy birthday, ' + name + '! May all your wishes come true.';
return wishes;
}
В этом примере создается простая форма, в которой вы можете ввести имя получателя. После отправки формы она генерирует поздравление с днем рождения с помощью JavaScript и отображает его на странице.