-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
78 lines (69 loc) · 2.38 KB
/
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
let fables = [];
// Fetch fables from fables.json
fetch('fables.json')
.then(response => response.json())
.then(data => {
fables = data.fables;
populateDropdown();
loadDefaultFable();
})
.catch(error => console. error('Error loading fables', error));
// Function to populate the dropdown with the title from fables.json
function populateDropdown() {
const selectElement = document.getElementById('fable-select');
fables.forEach(fable => {
const option = document.createElement('option');
option.value = fable.id;
option.textContent = fable.title;
selectElement.appendChild(option);
});
}
// Function to load fable content
function loadFable(id) {
const fable = fables.find(f => f.id === id);
if (fable) {
const contentElement = document.getElementById('fable-content');
contentElement.style.opacity = 0;
setTimeout(() => {
contentElement.innerHTML = `
<h2>${fable.title}</h2>
<img src="${fable.image}" alt="Illustration for ${fable.title}">
<p>${fable.content}</p>
<p><strong>Moral:</strong> ${fable.moral}</p>
`;
contentElement.style.opacity = 1;
}, 300);
} else {
console.error('Fable not found');
}
}
function loadDefaultFable() {
if (fables.length > 0) {
loadFable(fables[0].id);
}
}
// Function to load random fable
function loadRandomFable() {
const randomIndex = Math.floor(Math.random() * fables.length);
loadFable(fables[randomIndex].id);
document.getElementById('fable-select').value = fables[randomIndex].id;
}
// Smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Make .navbar always stay at the top while scrolling
window.addEventListener('scroll', function() {
const navbar = document.querySelector('.navbar');
navbar.classList.toggle('sticky', window.scrollY > 0);
});
// Event Listeners
document.getElementById('fable-select').addEventListener('change', function(event) {
loadFable(event.target.value);
});
document.getElementById('random-fable').addEventListener('click', loadRandomFable);