react-launchpad / script.js
TironTraining's picture
Start a React project
68b9246 verified
Raw
History Blame Contribute Delete
2.07 kB
// Initialize Feather icons
document.addEventListener('DOMContentLoaded', function() {
feather.replace();
// Add animation to elements when they come into view
const observerOptions = {
root: null,
rootMargin: '0px',
threshold: 0.1
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-fade-in');
observer.unobserve(entry.target);
}
});
}, observerOptions);
// Observe feature cards
document.querySelectorAll('.feature-card').forEach(card => {
card.classList.add('opacity-0', 'translate-y-4');
observer.observe(card);
});
// Smooth scrolling 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',
block: 'start'
});
}
});
});
});
// Theme toggle functionality
function toggleTheme() {
const html = document.documentElement;
const currentTheme = html.classList.contains('dark') ? 'dark' : 'light';
if (currentTheme === 'light') {
html.classList.add('dark');
localStorage.setItem('theme', 'dark');
} else {
html.classList.remove('dark');
localStorage.setItem('theme', 'light');
}
}
// Set initial theme based on system preference or saved preference
document.addEventListener('DOMContentLoaded', () => {
const savedTheme = localStorage.getItem('theme');
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
document.documentElement.classList.add('dark');
}
});