body {
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
section {
margin: 20px;
padding: 20px;
border: 1px solid #ddd;
}
.alphabet {
margin-bottom: 20px;
}
.generated-names ul {
list-style: none;
padding: 0;
}
.generated-names li {
margin: 5px 0;
}
.input label,
.alphabet label {
font-weight: bold;
}
.input input,
.alphabet select {
margin: 10px 0;
padding: 5px;
}
button {
background-color: #333;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
button:hover {
background-color: #555;
}
document.addEventListener("DOMContentLoaded", function() {
// Define an array of names for each letter of the alphabet (A-Z).
const namesByLetter = {
"A": ["Aarav", "Aanya", "Advait", "Akshara"],
// Add more names for each letter here
};
// Function to generate a random name from the selected letter.
function generateName() {
const selectedLetter = document.getElementById("letter").value;
const names = namesByLetter[selectedLetter];
if (names) {
const randomIndex = Math.floor(Math.random() * names.length);
const randomName = names[randomIndex];
document.getElementById("name-list").innerHTML = `
${randomName}
`;
}
}
// Function to get the horoscope information.
function getHoroscope() {
const dob = document.getElementById("dob").value;
// Implement horoscope retrieval logic here and update the "horoscope-info" element.
// You may need to make an API request to get horoscope data.
}
// Event listeners for the generate button and horoscope button.
document.getElementById("generate-button").addEventListener("click", generateName);
document.getElementById("horoscope-button").addEventListener("click", getHoroscope);
});
Post a Comment