mirror of
https://github.com/Alvin-Zilverstand/challenge-11.git
synced 2026-03-06 11:06:21 +01:00
Revamp index.html with Bootstrap and Tailwind CSS integration, add navigation and main content structure, and implement JavaScript for interactivity. Remove unused style.css file.
This commit is contained in:
20
js/script.js
20
js/script.js
@@ -0,0 +1,20 @@
|
||||
// Add fade-in animation to main content
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const mainContent = document.querySelector('main');
|
||||
mainContent.classList.add('fade-in');
|
||||
|
||||
// Add click event to the Learn More button
|
||||
const learnMoreBtn = document.querySelector('.btn-primary');
|
||||
learnMoreBtn.addEventListener('click', () => {
|
||||
alert('Thanks for your interest! This is a demo website.');
|
||||
});
|
||||
|
||||
// Add active class to current nav item
|
||||
const navLinks = document.querySelectorAll('.nav-link');
|
||||
navLinks.forEach(link => {
|
||||
link.addEventListener('click', (e) => {
|
||||
navLinks.forEach(l => l.classList.remove('active'));
|
||||
e.target.classList.add('active');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user