friendly-ui-wizard / script.js
kaidjuric's picture
web app for dayly horoscope compatibility
5ae1158 verified
// Main application script
document.addEventListener('DOMContentLoaded', () => {
// Initialize tooltips
const tooltipTriggers = document.querySelectorAll('[data-tooltip]');
tooltipTriggers.forEach(trigger => {
const tooltip = document.createElement('div');
tooltip.className = 'hidden absolute z-50 bg-gray-800 text-white text-xs rounded py-1 px-2';
tooltip.textContent = trigger.getAttribute('data-tooltip');
trigger.appendChild(tooltip);
trigger.addEventListener('mouseenter', () => {
tooltip.classList.remove('hidden');
});
trigger.addEventListener('mouseleave', () => {
tooltip.classList.add('hidden');
});
});
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth'
});
}
});
});
// Toast notification example
function showToast(message, type = 'info') {
const toast = document.createElement('div');
toast.className = `fixed bottom-4 right-4 px-4 py-2 rounded-lg shadow-lg text-white ${
type === 'error' ? 'bg-red-500' :
type === 'success' ? 'bg-green-500' : 'bg-purple-500'
}`;
toast.textContent = message;
document.body.appendChild(toast);
setTimeout(() => {
toast.classList.add('opacity-0', 'transition-opacity', 'duration-300');
setTimeout(() => toast.remove(), 300);
}, 3000);
}
// Horoscope compatibility logic
const compatibilityData = {
'aries': {
'aries': { score: 75, strengths: 'Dynamic energy and shared passion', challenges: 'Competitiveness and power struggles', advice: 'Take turns leading and learn to compromise' },
'taurus': { score: 65, strengths: 'Balance of fire and earth', challenges: 'Different pacing and values', advice: 'Respect each other\'s approaches to life' },
'gemini': { score: 70, strengths: 'Intellectual stimulation and adventure', challenges: 'Lack of emotional depth', advice: 'Schedule quality time for deep conversations' },
'cancer': { score: 45, strengths: 'Initial attraction and excitement', challenges: 'Different emotional needs and communication styles', advice: 'Practice patience and emotional understanding' },
'leo': { score: 90, strengths: 'Shared passion and creativity', challenges: 'Ego clashes', advice: 'Celebrate each other\'s successes' },
'virgo': { score: 40, strengths: 'Learning from differences', challenges: 'Fundamentally different approaches', advice: 'Focus on common goals and shared values' },
'libra': { score: 60, strengths: 'Social compatibility and charm', challenges: 'Decision-making differences', advice: 'Make decisions together and find middle ground' },
'scorpio': { score: 85, strengths: 'Intense passion and loyalty', challenges: 'Power struggles and jealousy', advice: 'Build trust through open communication' },
'sagittarius': { score: 95, strengths: 'Shared love for adventure and freedom', challenges: 'Commitment fears', advice: 'Create a balance between freedom and togetherness' },
'capricorn': { score: 50, strengths: 'Ambition and drive', challenges: 'Different approaches to life', advice: 'Learn to appreciate each other\'s strengths' },
'aquarius': { score: 70, strengths: 'Innovative thinking and independence', challenges: 'Emotional detachment', advice: 'Schedule regular emotional check-ins' },
'pisces': { score: 55, strengths: 'Creative inspiration and compassion', challenges: 'Practical vs dreamy nature', advice: 'Ground dreams in reality and support each other\'s visions' }
},
'taurus': {
'aries': { score: 65, strengths: 'Balance of fire and earth', challenges: 'Different pacing and values', advice: 'Find activities that combine both your interests' },
'taurus': { score: 80, strengths: 'Shared values and stability', challenges: 'Stubbornness and resistance to change', advice: 'Be willing to try new things together' },
'gemini': { score: 40, strengths: 'Learning opportunities', challenges: 'Fundamental differences in temperament', advice: 'Focus on building trust and security' },
'cancer': { score: 90, strengths: 'Emotional security and domestic harmony', challenges: 'Over-attachment', advice: 'Maintain individual interests and friendships' },
'leo': { score: 75, strengths: 'Shared love for luxury and beauty', challenges: 'Stubbornness conflicts', advice: 'Learn the art of compromise' },
'virgo': { score: 85, strengths: 'Practical approach to life', challenges: 'Over-criticism', advice: 'Focus on appreciation rather than perfection' },
'libra': { score: 95, strengths: 'Harmony and aesthetic appreciation', challenges: 'Decision-making delays', advice: 'Set deadlines for important decisions' },
'scorpio': { score: 85, strengths: 'Intense loyalty and passion', challenges: 'Possessiveness issues', advice: 'Trust each other\'s commitment' },
'sagittarius': { score: 35, strengths: 'Learning from differences', challenges: 'Different life philosophies', advice: 'Respect each other\'s beliefs and find common ground' },
'capricorn': { score: 95, strengths: 'Shared ambition and traditional values', challenges: 'Workaholic tendencies', advice: 'Schedule regular quality time away from work' },
'aquarius': { score: 50, strengths: 'Stability meets innovation', challenges: 'Communication gaps', advice: 'Practice active listening and explain your perspectives clearly' },
'pisces': { score: 80, strengths: 'Sensual connection and artistic appreciation', challenges: 'Practical vs dreamy conflicts', advice: 'Balance dreams with practical action plans' }
}
};
// Daily horoscope data
const dailyHoroscope = {
love: "Today brings opportunities for meaningful connections. Be open to new encounters and trust your intuition when it comes to matters of the heart. The stars align for honest conversations about feelings.",
career: "A creative project may require extra attention. Your persistence will pay off professionally. Networking could lead to unexpected opportunities.",
health: "Balance is key today. Make time for both physical activity and mental relaxation. Listen to your body's signals."
};
// Load daily horoscope
document.getElementById('love-horoscope').textContent = dailyHoroscope.love;
document.getElementById('career-horoscope').textContent = dailyHoroscope.career;
document.getElementById('health-horoscope').textContent = dailyHoroscope.health;
// Compatibility checker
document.getElementById('check-compatibility').addEventListener('click', () => {
const userSign = document.getElementById('user-zodiac').value;
const partnerSign = document.getElementById('partner-zodiac').value;
if (!userSign || !partnerSign) {
showToast('Please select both zodiac signs', 'error');
return;
}
// For demo purposes, using Aries and Taurus combinations
// In a real app, you would have all combinations defined
let compatibility;
if (compatibilityData[userSign] && compatibilityData[userSign][partnerSign]) {
compatibility = compatibilityData[userSign][partnerSign];
} else {
// Generate random compatibility for demo
const scores = [25, 40, 50, 60, 75, 80, 85, 90, 95];
const randomScore = scores[Math.floor(Math.random() * scores.length)];
compatibility = {
score: randomScore,
strengths: "Strong communication and mutual respect create a solid foundation for this relationship.",
challenges: "Different communication styles may require extra effort to understand each other fully.",
advice: "Focus on understanding each other's perspectives and find joy in your differences."
};
}
// Display results
document.getElementById('compatibility-score').textContent = `${compatibility.score}%`;
document.getElementById('strengths').textContent = compatibility.strengths;
document.getElementById('challenges').textContent = compatibility.challenges;
document.getElementById('advice').textContent = compatibility.advice;
// Show results section
document.getElementById('compatibility-result').classList.remove('hidden');
document.getElementById('compatibility-result').scrollIntoView({ behavior: 'smooth' });
showToast('Compatibility analysis complete!', 'success');
});
// Example usage
showToast('Welcome to Horoscope Compatibility! Check your zodiac match today.', 'success');
});