-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathphotowards.html
145 lines (123 loc) · 5.73 KB
/
photowards.html
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photowards</title>
<link rel="stylesheet" href="../styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1 class="source-code-pro-regular"><b>Photowards</b></h1>
<p class="source-code-pro-light">A lens on all photography awards.</p>
</header>
<main>
<div class="last-update">
<p>Last Update: 31 Oct 2024</p>
<p>Please message <a href="mailto:[email protected]">[email protected]</a> if you would like to suggest any awards</p>
</div>
<div class="awards-container">
<ul class="award-list" id="award-list">
<!-- Awards will be dynamically added here -->
</ul>
</div>
</main>
<footer>
<p class="source-code-pro-light">© 2024-2025 Long Winter Project</p>
<nav>
<ul class="footer-links">
<li><a href="index.html" class="source-code-pro-light">Home</a></li>
<li><a href="contact.html" class="source-code-pro-light">Contact</a></li>
<li><a href="photowards.html" class="source-code-pro-light photowards-link">Photowards</a></li>
</ul>
</nav>
</footer>
<script>
// Function to check if the deadline is expired or active
function getDeadlineStatus(deadline) {
if (deadline === "N/A") {
return 'n/a';
}
const deadlineDate = new Date(deadline);
const today = new Date();
return deadlineDate < today ? 'expired' : 'active';
}
// Sorting function to prioritize active > expired > N/A, with closest deadlines first
function sortByDeadline(a, b) {
const statusA = getDeadlineStatus(a.deadline);
const statusB = getDeadlineStatus(b.deadline);
const statusOrder = {
'active': 1,
'expired': 2,
'n/a': 3
};
// Compare deadline status first
if (statusOrder[statusA] < statusOrder[statusB]) {
return -1;
} else if (statusOrder[statusA] > statusOrder[statusB]) {
return 1;
} else {
// If both have the same deadline status and are "active", sort by closest deadline
if (statusA === 'active' && statusB === 'active') {
const deadlineA = new Date(a.deadline);
const deadlineB = new Date(b.deadline);
return deadlineA - deadlineB;
}
return 0;
}
}
// Fetch the JSON data from a file
fetch('awards.json')
.then(response => response.json())
.then(data => {
// Sort the data by deadline status and date
const sortedAwards = data.sort(sortByDeadline);
// Generate and display sorted awards
const awardsContainer = document.createElement('ul');
awardsContainer.className = 'award-list';
sortedAwards.forEach(award => {
const listItem = document.createElement('li');
listItem.className = 'award-item';
// Award name
const awardLink = document.createElement('a');
awardLink.className = 'award-link';
awardLink.href = award.url;
awardLink.textContent = award.name;
// Entry link
const entryLink = document.createElement('a');
entryLink.className = 'latest-opening-entry-link';
entryLink.href = award.latestOpeningEntry === "N/A" ? '#' : award.latestOpeningEntry;
entryLink.textContent = award.latestOpeningEntry === "N/A" ? "Entry Closed" : "Enter Now";
if (award.latestOpeningEntry === "N/A") {
entryLink.style.color = 'grey';
}
// Deadline handling
const deadlineText = document.createElement('p');
deadlineText.className = 'deadline-text';
deadlineText.textContent = `Deadline: ${award.deadline}`;
// Apply the proper class for deadline status
const deadlineStatus = getDeadlineStatus(award.deadline);
if (deadlineStatus === 'expired') {
deadlineText.classList.add('deadline-expired');
} else if (deadlineStatus === 'active') {
deadlineText.classList.add('deadline-active');
} else if (deadlineStatus === 'n/a') {
deadlineText.style.color = 'grey';
}
// Append elements to the list item
listItem.appendChild(awardLink);
listItem.appendChild(entryLink);
listItem.appendChild(deadlineText);
// Append list item to the awards container
awardsContainer.appendChild(listItem);
});
// Add the sorted list to the DOM
document.querySelector('.awards-container').appendChild(awardsContainer);
})
.catch(error => console.error('Error loading awards data:', error));
</script>
</body>
</html>